Merge pull request #448 from CorrelAid/414-icons-navigation

closes #414
CorrelAid · Jun 1, 2023 · 84bb884 · 84bb884
2 parents 2070569 + 9cc2550
commit 84bb884
Show file tree

Hide file tree

Showing 24 changed files with 2,045 additions and 1 deletion.
diff --git a/src/app.css b/src/app.css
@@ -171,3 +171,41 @@
     height: 100dvh;
   }
 }
+
+/* londrina-solid-100 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 100;
+  src: url('./fonts/londrina/londrina-solid-v15-latin-100.woff2')
+    format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* londrina-solid-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/londrina/londrina-solid-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* londrina-solid-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/londrina/londrina-solid-v15-latin-regular.woff2')
+    format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* londrina-solid-900 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 900;
+  src: url('/fonts/londrina/londrina-solid-v15-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
diff --git a/src/lib/components/NavTiles.svelte b/src/lib/components/NavTiles.svelte
@@ -0,0 +1,35 @@
+<script>
+  export let navItems;
+  const icon_size = 73;
+  import {t} from '$lib/stores/i18n';
+  const colorScale = ['#3864a3', '#538794', '#6fa07f', '#78a972', '#96c342'];
+</script>
+
+<div
+  class="mx-4 grid grid-cols-[repeat(auto-fit,minmax(144px,max-content))] justify-center gap-8 p-[initial] md:grid-cols-[repeat(auto-fit,minmax(176px,max-content))]"
+>
+  {#each navItems as item, i}
+    <a
+      href={$t(item.key).url}
+      class="flex h-36 w-36 items-center justify-center rounded opacity-80 md:h-44 md:w-44"
+      style="background-color: {colorScale[i]};"
+    >
+      <div class="flex flex-col items-center justify-center opacity-100">
+        <svelte:component
+          this={item.icon}
+          height={icon_size}
+          width={icon_size}
+          fill={'white'}
+        />
+
+        <h2
+          class="break-word mx-2 pt-2 text-center font-londrina text-xl leading-6 tracking-[0.025em] text-white opacity-100 md:text-2xl md:leading-7"
+        >
+          {$t(item.key).text === 'Bildungsressourcen'
+            ? 'Ressourcen'
+            : $t(item.key).text}
+        </h2>
+      </div>
+    </a>
+  {/each}
+</div>
diff --git a/src/lib/components/Quote_Carousel.svelte b/src/lib/components/Quote_Carousel.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div
-  class="relative border bg-gradient-to-r from-primary-75 to-secondary-75 text-white"
+  class="relative border bg-gradient-to-r from-secondary-75 to-primary-75 text-white"
 >
   <div class="container mx-auto">
     {#if browser}

diff --git a/src/lib/svg/nav_icons/DialogueLaptop.svelte b/src/lib/svg/nav_icons/DialogueLaptop.svelte
diff --git a/src/lib/svg/nav_icons/Europe.svelte b/src/lib/svg/nav_icons/Europe.svelte
diff --git a/src/lib/svg/nav_icons/Graph.svelte b/src/lib/svg/nav_icons/Graph.svelte
@@ -0,0 +1,120 @@
+<script>
+  export let width;
+  export let height;
+  export let fill;
+</script>
+
+<svg
+  {width}
+  {height}
+  {fill}
+  viewBox="0 0 600 599.999999"
+  preserveAspectRatio="xMidYMid meet"
+  version="1.0"
+  id="svg2792"
+  sodipodi:docname="edu3.svg"
+  inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+>
+  <sodipodi:namedview
+    id="namedview2794"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:showpageshadow="2"
+    inkscape:pageopacity="0.0"
+    inkscape:pagecheckerboard="0"
+    inkscape:deskcolor="#d1d1d1"
+    showgrid="false"
+    inkscape:zoom="1.1225"
+    inkscape:cx="341.20267"
+    inkscape:cy="400"
+    inkscape:window-width="2560"
+    inkscape:window-height="1411"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="svg2792"
+  />
+  <defs id="defs2678">
+    <filter x="0" y="0" width="1" height="1" id="563d157186">
+      <feColorMatrix
+        values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+        color-interpolation-filters="sRGB"
+        id="feColorMatrix2653"
+      />
+    </filter>
+    <g id="g2656" />
+    <mask id="af719f3ba0">
+      <g filter="url(#563d157186)" id="g2660">
+        <rect
+          x="-60"
+          width="720"
+          y="-60"
+          height="719.999999"
+          fill-opacity="0.298"
+          id="rect2658"
+        />
+      </g>
+    </mask>
+    <clipPath id="a1be953911">
+      <path
+        d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 "
+        clip-rule="nonzero"
+        id="path2663"
+      />
+    </clipPath>
+    <clipPath id="d0ed5bf3df">
+      <path
+        d="M 17.25 0 L 582.582031 0 C 587.15625 0 591.546875 1.816406 594.78125 5.050781 C 598.015625 8.289062 599.832031 12.675781 599.832031 17.25 L 599.832031 582.75 C 599.832031 587.324219 598.015625 591.710938 594.78125 594.949219 C 591.546875 598.183594 587.15625 600 582.582031 600 L 17.25 600 C 12.675781 600 8.289062 598.183594 5.050781 594.949219 C 1.816406 591.710938 0 587.324219 0 582.75 L 0 17.25 C 0 12.675781 1.816406 8.289062 5.050781 5.050781 C 8.289062 1.816406 12.675781 0 17.25 0 "
+        clip-rule="nonzero"
+        id="path2666"
+      />
+    </clipPath>
+    <clipPath id="dd81f78d0f">
+      <rect x="0" width="600" y="0" height="600" id="rect2669" />
+    </clipPath>
+    <clipPath id="57b1549d73">
+      <path
+        d="M 169 184 L 426 184 L 426 359.25 L 169 359.25 Z M 169 184 "
+        clip-rule="nonzero"
+        id="path2672"
+      />
+    </clipPath>
+    <clipPath id="f7b64cfc0e">
+      <path
+        d="M 157 60 L 443.886719 60 L 443.886719 250 L 157 250 Z M 157 60 "
+        clip-rule="nonzero"
+        id="path2675"
+      />
+    </clipPath>
+  </defs>
+  <g id="g4732" transform="translate(13.976079,1.0604908)">
+    <g
+      clip-path="url(#57b1549d73)"
+      id="g2698"
+      transform="matrix(1.97342,0,0,1.97342,-307.39225,-114.75793)"
+    >
+      <path
+        d="M 169.10937,359.30078 V 275.02734 H 239.5 v 84.27344 z m 162.20704,0 V 238.76562 h -69.375 v 120.53516 z m 93.85546,0 V 184.62109 h -70.39843 v 174.67969 z m 0,0"
+        fill-opacity="1"
+        fill-rule="nonzero"
+        id="path2696"
+      />
+    </g>
+    <g
+      clip-path="url(#f7b64cfc0e)"
+      id="g2702"
+      transform="matrix(1.97342,0,0,1.97342,-307.39225,-114.75793)"
+    >
+      <path
+        d="m 166.74609,249.41406 c -3.78125,-1.40625 -10.58203,-5.1875 -8.47656,-14.04687 1.48828,-6.23828 6.67188,-10.91016 12.91406,-12.32422 25.88282,-5.92188 118.76172,-33.375 233.58203,-140.570314 l -14.79296,-15.320312 53.5625,-7.132813 -7.125,50.054689 -15.30079,-12.257814 c 0,0 -98.125,108.589844 -250.02343,151.742184 -1.46094,0.42188 -2.90625,0.375 -4.33985,-0.14453 z m 0,0"
+        fill-opacity="1"
+        fill-rule="nonzero"
+        id="path2700"
+      />
+    </g>
+  </g>
+</svg>
diff --git a/src/lib/svg/nav_icons/HandDialogue.svelte b/src/lib/svg/nav_icons/HandDialogue.svelte
@@ -0,0 +1,91 @@
+<script>
+  export let width;
+  export let height;
+  export let fill;
+</script>
+
+<svg
+  {width}
+  {height}
+  {fill}
+  viewBox="0 0 600 599.999999"
+  preserveAspectRatio="xMidYMid meet"
+  version="1.0"
+  id="svg6785"
+  sodipodi:docname="data6.svg"
+  inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+>
+  <sodipodi:namedview
+    id="namedview6787"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:showpageshadow="2"
+    inkscape:pageopacity="0.0"
+    inkscape:pagecheckerboard="0"
+    inkscape:deskcolor="#d1d1d1"
+    showgrid="false"
+    inkscape:zoom="1.1225"
+    inkscape:cx="351.00223"
+    inkscape:cy="400.89087"
+    inkscape:window-width="2560"
+    inkscape:window-height="1411"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="svg6785"
+  />
+  <defs id="defs6629">
+    <filter x="0" y="0" width="1" height="1" id="1ec44428a5">
+      <feColorMatrix
+        values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+        color-interpolation-filters="sRGB"
+        id="feColorMatrix6610"
+      />
+    </filter>
+    <g id="g6613" />
+    <mask id="f937741216">
+      <g filter="url(#1ec44428a5)" id="g6617">
+        <rect
+          x="-60"
+          width="720"
+          y="-60"
+          height="719.999999"
+          fill-opacity="0.298"
+          id="rect6615"
+        />
+      </g>
+    </mask>
+    <clipPath id="eaea631328">
+      <path
+        d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 "
+        clip-rule="nonzero"
+        id="path6620"
+      />
+    </clipPath>
+    <clipPath id="412f7cfd4c">
+      <path
+        d="M 17.25 0 L 582.582031 0 C 587.15625 0 591.546875 1.816406 594.78125 5.050781 C 598.015625 8.289062 599.832031 12.675781 599.832031 17.25 L 599.832031 582.75 C 599.832031 587.324219 598.015625 591.710938 594.78125 594.949219 C 591.546875 598.183594 587.15625 600 582.582031 600 L 17.25 600 C 12.675781 600 8.289062 598.183594 5.050781 594.949219 C 1.816406 591.710938 0 587.324219 0 582.75 L 0 17.25 C 0 12.675781 1.816406 8.289062 5.050781 5.050781 C 8.289062 1.816406 12.675781 0 17.25 0 "
+        clip-rule="nonzero"
+        id="path6623"
+      />
+    </clipPath>
+    <clipPath id="b1e8fe6152">
+      <rect x="0" width="600" y="0" height="600" id="rect6626" />
+    </clipPath>
+  </defs>
+  <g
+    id="g8722"
+    transform="matrix(1.9964864,0,0,1.9964864,-299.93223,-117.84147)"
+  >
+    <path
+      d="m 247.94531,247.71875 c -14.3125,0 -29.07812,2.04297 -40.92578,11.71875 l -49.27344,40.31641 c -2.88672,2.38671 -3.28515,6.65234 -0.90234,9.54296 2.38672,2.88672 6.65625,3.3125 9.54297,0.89844 l 49.16797,-40.3164 c 8.21484,-6.70313 19.32031,-8.64063 32.39062,-8.64063 h 99.39453 c 1.16407,3.3125 1.03125,7.37109 -1.14062,11.39844 -2.73047,5.0625 -7.36719,7.82031 -9.6211,7.60937 -0.1875,-0.0547 -0.39843,-0.082 -0.60937,-0.10937 h -64.48828 c -3.71094,-0.0781 -6.78516,2.91797 -6.83985,6.65625 -0.0508,3.71094 2.91797,6.78515 6.65625,6.83594 0.0508,0 0.12891,0 0.1836,0 h 64.48828 v -0.10547 c 9.88672,0.58203 17.73047,-6.38672 22.15625,-14.55078 4.53516,-8.40235 6.01953,-19.66797 -0.74219,-28.4961 -1.26953,-1.69531 -3.25781,-2.73047 -5.3789,-2.75781 z m 178.11328,-50.33594 c -5.27343,0 -10.07031,2.38672 -13.49218,5.91406 l -0.10547,-0.10937 -0.10547,0.21484 c -0.16016,0.15625 -9.25,9.17188 -19.21485,19.10938 -10.01953,9.99219 -20.48828,20.41015 -23.61718,23.85547 -2.51953,2.73047 -2.35938,7.02734 0.42578,9.54297 2.72656,2.51953 7.02344,2.33203 9.53906,-0.42188 0,-0.0273 0.0273,-0.0273 0.0547,-0.0547 2.12109,-2.33203 13.09375,-13.33203 23.11328,-23.32422 9.99219,-9.99609 19.29297,-19.29687 19.29297,-19.29687 0.082,-0.0273 0.16015,-0.082 0.21484,-0.10547 1.16406,-1.24609 2.46485,-1.80469 3.89453,-1.80469 3.04688,0 6.125,2.89063 6.125,7.58203 0,2.03907 -0.63672,3.76172 -1.5664,5.08985 -0.0274,0.0234 0.0273,0.0781 0,0.0781 -0.31641,0.3711 -40.6836,48.85157 -66.79297,79.35938 -7.23438,8.42969 -17.1211,16.80859 -31.14453,16.80859 h -80.07032 c -8.61328,0 -17.67968,1.5625 -24.70312,8.42578 l -19.10938,18.66407 c -2.70312,2.59765 -2.78515,6.86328 -0.21484,9.5664 2.54688,2.70313 6.83984,2.8125 9.54297,0.23828 0.0547,-0.0508 0.13281,-0.13281 0.1875,-0.18359 l 19.08203,-18.6875 c 3.87109,-3.76563 7.95313,-4.53125 15.21484,-4.53125 h 80.07032 c 19.40234,0 32.97265,-11.71875 41.375,-21.52344 26.32031,-30.77734 67.11328,-79.78515 67.11328,-79.78515 0.0781,-0.10938 0.13281,-0.21485 0.21094,-0.32032 2.73046,-3.65625 4.32031,-8.24218 4.32031,-13.19922 0,-11.21484 -8.42969,-21.10156 -19.64063,-21.10156 z M 337,134.82812 c -4.42578,0 -8.00391,3.6836 -8.00391,8.11329 0,4.42578 3.57813,8.03125 8.00391,8.03125 4.45312,0 8.03125,-3.60547 8.03125,-8.03125 0,-4.42969 -3.57813,-8.11329 -8.03125,-8.11329 z m -36.49609,0 c -4.42579,0 -8.03125,3.6836 -8.03125,8.11329 0,4.42578 3.60546,8.03125 8.03125,8.03125 4.42578,0 8.03125,-3.60547 8.03125,-8.03125 0,-4.42969 -3.60547,-8.11329 -8.03125,-8.11329 z m -36.4961,0 c -4.45312,0 -8.03125,3.6836 -8.03125,8.11329 0,4.42578 3.57813,8.03125 8.03125,8.03125 4.42578,0 8.00391,-3.60547 8.00391,-8.03125 0,-4.42969 -3.57813,-8.11329 -8.00391,-8.11329 z m 36.4961,-61.308589 c 38.3789,0 69.3125,30.933599 69.3125,69.312499 0,38.38281 -30.9336,69.44922 -69.3125,69.44922 -11.82032,0 -22.98047,-3.04688 -32.70704,-8.24219 -1.43359,-0.74219 -3.07421,-0.98047 -4.64062,-0.63672 l -29.97656,6.65235 6.65234,-30.08594 c 0.34766,-1.5625 0.13281,-3.20703 -0.63672,-4.63672 -5.16797,-9.70312 -8.02734,-20.70312 -8.02734,-32.5 0,-38.3789 30.95703,-69.312499 69.33594,-69.312499 z m 0,-13.519531 c -45.69532,0 -82.82813,37.136719 -82.82813,82.83203 0,12.98828 3.20703,25.23438 8.53516,36.21094 l -8.42969,38.51172 c -0.79688,3.63281 1.51172,7.23828 5.14062,8.03125 0.98047,0.21484 2.01563,0.21484 2.96875,0 l 38.30079,-8.5586 c 11.02734,5.37891 23.27343,8.7461 36.3125,8.7461 45.69531,0 82.82812,-37.24219 82.82812,-82.94141 C 383.33203,97.136719 346.19922,60 300.50391,60"
+      fill-opacity="1"
+      fill-rule="nonzero"
+      id="path6647"
+    />
+  </g>
+</svg>