Style, Refactor, Feature updates/fixes

src/lib/atoms/Arrow.svelte

@@ -0,0 +1,31 @@
+<script>
+  let { rightArrow } = $props();
+</script>
+
+<svg class={rightArrow}
+  aria-hidden="true"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+    d="M5 12l14 0"
+  /><path d="M5 12l4 4" /><path d="M5 12l4 -4" />
+</svg>
+
+<style>
+  svg {
+    translate: 0 1px;
+  }
+
+  .right-arrow {
+    transform: scaleX(-1);
+  }
+</style>

src/lib/atoms/HvaLogo.svelte

@@ -0,0 +1,41 @@
+<svg
+xmlns="http://www.w3.org/2000/svg"
+viewBox="0 0 250 35"
+title="Hva logo"
+class="hva-logo"
+>
+<path
+  d="M42.098 20.932h.42c.734 0 .75-.412.75-2.378v-5.276c0-1.965-.017-2.379-.768-2.379h-.402v-.445h4.732v.445h-.4c-.749 0-.766.413-.766 2.379v2.192h3.862v-2.192c0-1.965-.016-2.379-.766-2.379h-.4v-.445h4.733v.445h-.4c-.752 0-.768.413-.768 2.379v5.276c0 1.965.016 2.378.751 2.378h.416v.448h-4.731v-.448h.399c.75 0 .766-.412.766-2.378v-2.552h-3.862v2.552c0 1.965.017 2.378.767 2.378h.399v.448h-4.732v-.448ZM56.489 17.526c0-3.055.676-3.56 1.49-3.56.815 0 1.492.506 1.492 3.56 0 2.67-.4 3.583-1.493 3.583-1.09 0-1.49-.913-1.49-3.583Zm-2.302 0c0 2.405 1.351 4.104 3.791 4.104 2.443 0 3.794-1.698 3.794-4.104 0-2.385-1.351-4.093-3.794-4.093-2.44 0-3.791 1.708-3.791 4.093ZM65.552 16.143c0-.864.045-2.177 1.226-2.177 1.13 0 1.13 1.498 1.13 2.27 0 .757-.126 1.903-1.138 1.903-1.173 0-1.218-1.115-1.218-1.996Zm.59 3.622c-.782 0-1.12-.113-1.12-.479 0-.327.213-.616.72-.616 1.994 0 4.382 0 4.382-2.675 0-.786-.356-1.343-1.081-1.96.263-.094.448-.154.68-.154.381 0 .121.813 1.044.813.521 0 .782-.411.782-.874 0-.504-.277-.964-.83-.964-.736-.005-1.351.763-2.182.763-.354-.002-1.015-.186-1.846-.186-1.68 0-3.356.764-3.356 2.679 0 1.129.709 1.995 1.741 2.297v.03-.017c-.742.23-1.201.857-1.201 1.64 0 .573.277 1.085.921 1.316v.034c-.785.08-1.793.628-1.793 1.565 0 1.678 2.175 1.981 3.452 1.981 1.842 0 4.28-.698 4.28-2.929 0-1.936-1.622-2.265-2.772-2.265h-1.82v.001Zm.787 1.83c.908 0 2.398.03 2.398 1.271 0 1.18-1.492 1.566-2.473 1.566-.953 0-2.445-.215-2.445-1.434 0-1.372 1.492-1.404 2.52-1.404ZM74.51 17.113c0-1.513.06-3.147 1.333-3.147 1.135 0 1.135 1.48 1.135 3.147H74.51Zm4.865.446c0-2.387-.906-4.125-3.47-4.125-2.443 0-3.795 1.708-3.795 4.096 0 2.403 1.352 4.101 3.794 4.101 1.926 0 3.125-.985 3.324-2.879l-.681-.008c-.033 1.221-.817 2.366-2.151 2.366-1.75 0-1.886-1.622-1.886-3.166v-.384h4.865v-.001ZM80.65 18.869h.492c.308 1.31 1.03 2.24 2.476 2.24.783 0 1.533-.464 1.533-1.257 0-.983-.768-1.2-2.24-1.54-1.138-.263-2.262-.647-2.262-2.232 0-1.837 1.34-2.646 3.031-2.638.692 0 1.182.246 1.69.246.414 0 .645-.123.829-.254h.092v2.468H85.8c-.154-1.012-.984-1.937-2.06-1.937-.751 0-1.52.278-1.52 1.222 0 .783.402.893 2.182 1.31 1.363.306 2.407.74 2.407 2.527 0 1.853-1.518 2.606-3.13 2.604-.72 0-1.506-.249-2.166-.249-.308 0-.617.147-.77.251h-.093V18.87ZM94.84 18.817c-.217 1.897-1.276 2.812-3.176 2.812-2.49 0-3.628-1.865-3.628-4.176 0-2.902 2.075-4.02 3.917-4.02 2.12 0 2.753 1.15 2.753 1.691 0 .737-.386 1.246-1.189 1.246-.627 0-1.028-.449-1.028-1.063 0-.447.218-.524.218-.71 0-.339-.528-.632-.878-.632-1.322 0-1.397 1.866-1.397 3.67 0 1.219-.016 3.475 1.689 3.475 1.396 0 1.933-1.043 2.04-2.301l.678.008ZM95.682 20.932h.522c.46 0 .613-.198.613-1.04V11.43c0-.842-.152-1.039-.612-1.039h-.523v-.45h3.35v4.78h.031c.445-.75 1.257-1.286 2.394-1.286 1.507 0 2.244.9 2.244 2.179v4.28c0 .842.154 1.039.615 1.039h.339v.449h-4.12v-.45h.339c.458 0 .612-.197.612-1.039v-3.88c0-.753 0-1.632-.983-1.632-1.471 0-1.471 1.694-1.471 2.65v2.864c0 .843.155 1.04.615 1.04h.337v.448H95.68v-.451ZM107.982 17.526c0-3.055.674-3.56 1.488-3.56.817 0 1.491.506 1.491 3.56 0 2.67-.398 3.583-1.491 3.583-1.09 0-1.488-.913-1.488-3.583Zm-2.302 0c0 2.405 1.349 4.104 3.79 4.104 2.443 0 3.794-1.698 3.794-4.104 0-2.385-1.351-4.093-3.794-4.093-2.441 0-3.79 1.708-3.79 4.093ZM116.797 17.526c0-3.055.677-3.56 1.491-3.56.815 0 1.489.506 1.489 3.56 0 2.67-.401 3.583-1.489 3.583-1.092 0-1.491-.913-1.491-3.583Zm-2.302 0c0 2.405 1.35 4.104 3.793 4.104 2.439 0 3.789-1.698 3.789-4.104 0-2.385-1.35-4.093-3.789-4.093-2.443 0-3.793 1.708-3.793 4.093ZM122.886 20.932h.521c.461 0 .616-.198.616-1.036v-8.464c0-.843-.155-1.04-.616-1.04h-.521v-.45h3.353v9.954c0 .84.155 1.036.612 1.036h.525v.448h-4.491v-.448h.001ZM139.525 14.13c-.567 0-.739.476-.985 1.064l-1.871 4.54a19.814 19.814 0 0 0-.629 1.75h-1.029c-.139-.397-.277-.826-.432-1.22l-2.041-5.115c-.261-.665-.309-1.02-.751-1.02h-.261v-.445h4.204v.446h-.522c-.26 0-.521.063-.521.339 0 .076.047.262.14.522l1.503 3.923h.03l1.522-3.844c.075-.217.121-.386.121-.524 0-.26-.261-.415-.537-.415h-.371v-.446h2.429v.445h.001ZM144.809 19.286c0 1.325-.798 1.59-1.197 1.59-.784 0-1.057-.712-1.057-1.402 0-1.37.551-2.198 1.795-2.198.136 0 .26.017.459.064v1.946Zm3.092-.029c0 .703 0 1.512-.491 1.512-.248 0-.388-.164-.388-.576v-4.585c0-1.794-1.678-2.174-3.147-2.174-1.084 0-3.094.319-3.094 1.771 0 .697.458 1.145 1.151 1.145.599 0 1.153-.388 1.153-1.036 0-.435-.339-.713-.339-.885 0-.4.702-.462 1.039-.462.808 0 1.023.572 1.023 1.257v1.623c-.23-.016-.445-.016-.673-.016-1.672 0-3.882.676-3.882 2.654 0 1.412 1.088 2.142 2.405 2.142.844 0 1.798-.263 2.241-1.022.26.71 1.063 1.022 1.678 1.022 1.889 0 1.905-1.35 1.905-2.37h-.581ZM149.037 20.932h.52c.461 0 .614-.198.614-1.04v-4.715c0-.847-.153-1.046-.614-1.046h-.52v-.446h1.612c.571 0 1.124-.108 1.648-.251v1.36h.029c.614-.869 1.35-1.36 2.484-1.36 1.51 0 2.247.9 2.247 2.178v4.28c0 .843.155 1.04.614 1.04h.337v.448h-4.116v-.448h.338c.458 0 .61-.198.61-1.04v-3.88c0-.753 0-1.632-.98-1.632-1.475 0-1.475 1.694-1.475 2.656v2.857c0 .843.156 1.04.614 1.04h.338v.449h-4.302v-.45h.002ZM168.61 17.312h-3.517l1.826-4.387 1.691 4.387Zm-.031 4.066h4.916v-.447h-.322c-.599 0-.844-.612-1.03-1.104l-2.841-7.346a18.088 18.088 0 0 1-.704-2.174h-1.368c-.187.656-.417 1.24-.661 1.821l-2.997 7.192c-.508 1.215-.797 1.61-1.581 1.61v.448h3.319v-.447h-.416c-.523-.014-.832-.228-.832-.645 0-.379.188-.937.403-1.459l.413-.987h3.932l.399 1.035c.277.706.522 1.31.522 1.596 0 .446-.459.446-1.152.458v.45ZM173.647 20.932h.521c.461 0 .616-.198.616-1.04v-4.715c0-.847-.155-1.046-.616-1.046h-.521v-.446h1.613c.569 0 1.125-.108 1.649-.251v1.36h.029c.614-.869 1.348-1.36 2.484-1.36 1.045 0 1.815.383 2.107 1.36.659-.947 1.291-1.36 2.563-1.36 1.505 0 2.245.9 2.245 2.178v4.28c0 .843.154 1.04.614 1.04h.339v.448h-4.12v-.448h.336c.46 0 .615-.198.615-1.04v-3.88c0-.753 0-1.632-.983-1.632-1.473 0-1.473 1.694-1.473 2.649v2.864c0 .843.154 1.04.615 1.04h.339v.449h-4.12v-.45h.339c.461 0 .614-.197.614-1.039v-3.88c0-.753 0-1.632-.983-1.632-1.472 0-1.472 1.694-1.472 2.656v2.858c0 .843.154 1.04.614 1.04h.336v.448h-4.302v-.451h.002ZM188.192 18.869h.494c.309 1.31 1.032 2.24 2.475 2.24.784 0 1.535-.464 1.535-1.257 0-.983-.767-1.2-2.242-1.54-1.138-.263-2.26-.647-2.26-2.232 0-1.837 1.34-2.646 3.03-2.638.693 0 1.181.246 1.69.246.415 0 .644-.123.832-.254h.091v2.468h-.494c-.15-1.012-.983-1.937-2.061-1.937-.75 0-1.517.278-1.517 1.222 0 .783.398.893 2.18 1.31 1.367.306 2.407.74 2.407 2.527 0 1.853-1.518 2.606-3.13 2.604-.72 0-1.504-.249-2.166-.249-.31 0-.614.147-.77.251h-.092V18.87h-.002ZM200.212 14.13h-1.607v4.957c0 .924 0 1.6.706 1.6.579 0 .672-.57.689-1.107v-.493h.577v.337c0 1.535-.607 2.206-1.999 2.206-1.587 0-2.188-.97-2.188-2.008V14.13h-1.076v-.446c1.521-.093 2.491-1.565 2.83-2.95h.46v2.95h1.607v.446h.001ZM203.954 17.113c0-1.513.06-3.147 1.333-3.147 1.133 0 1.133 1.48 1.133 3.147h-2.466Zm4.867.446c0-2.387-.909-4.125-3.475-4.125-2.439 0-3.794 1.708-3.794 4.096 0 2.403 1.355 4.101 3.794 4.101 1.928 0 3.124-.985 3.324-2.879l-.68-.008c-.033 1.221-.817 2.366-2.149 2.366-1.752 0-1.887-1.622-1.887-3.166v-.384h4.867v-.001ZM213.119 19.891c0 .843.152 1.04.614 1.04h.707v.446h-4.674v-.446h.521c.46 0 .613-.198.613-1.04v-4.716c0-.844-.153-1.045-.613-1.045h-.521v-.445h1.614c.568 0 1.123-.109 1.647-.252v1.747h.062c.337-.784 1.029-1.628 2.056-1.628.722 0 1.536.307 1.536 1.293 0 .721-.476 1.105-1.288 1.105-.369 0-1.016-.183-1.016-.987 0-.29 0-.368-.181-.368-.433 0-1.077.998-1.077 2.64v2.656ZM219.877 17.312c0-.743 0-3.116 1.162-3.116 1.453 0 1.575 2.128 1.575 3.178 0 1.016-.014 3.5-1.561 3.5-1.176 0-1.176-2.808-1.176-3.562Zm2.877 4.066h3.228v-.447h-.49c-.399 0-.613-.131-.613-1.057V9.943h-3.302v.447h.474c.581 0 .609.273.609 1.025v3.276h-.028c-.474-.858-1.193-1.257-2.174-1.257-2.241 0-2.979 2.148-2.979 4.119 0 1.872.8 4.076 2.948 4.076 1.073 0 1.946-.375 2.299-1.361h.028v1.11ZM231.416 19.286c0 1.325-.796 1.59-1.195 1.59-.783 0-1.06-.712-1.06-1.402 0-1.37.554-2.198 1.796-2.198.137 0 .26.017.459.064v1.946Zm3.094-.029c0 .703 0 1.512-.491 1.512-.249 0-.387-.164-.387-.576v-4.585c0-1.794-1.677-2.174-3.148-2.174-1.085 0-3.095.319-3.095 1.771 0 .697.46 1.145 1.152 1.145.599 0 1.152-.388 1.152-1.036 0-.435-.339-.713-.339-.885 0-.4.702-.462 1.038-.462.81 0 1.023.572 1.023 1.257v1.623c-.227-.016-.442-.016-.672-.016-1.674 0-3.885.676-3.885 2.654 0 1.412 1.092 2.142 2.41 2.142.844 0 1.796-.263 2.241-1.022.261.71 1.062 1.022 1.676 1.022 1.889 0 1.903-1.35 1.903-2.37h-.578ZM235.644 20.932h.519c.465 0 .615-.198.615-1.04v-4.715c0-.847-.15-1.046-.615-1.046h-.519v-.446h1.613c.569 0 1.125-.108 1.648-.251v1.36h.03c.614-.869 1.351-1.36 2.482-1.36 1.047 0 1.817.383 2.109 1.36.66-.947 1.287-1.36 2.561-1.36 1.507 0 2.247.9 2.247 2.178v4.28c0 .843.157 1.04.614 1.04h.339v.448h-4.121v-.448h.338c.463 0 .616-.198.616-1.04v-3.88c0-.753 0-1.632-.982-1.632-1.475 0-1.475 1.694-1.475 2.649v2.864c0 .843.154 1.04.616 1.04h.335v.449h-4.116v-.45h.336c.459 0 .615-.197.615-1.039v-3.88c0-.753 0-1.632-.983-1.632-1.472 0-1.472 1.694-1.472 2.656v2.858c0 .843.151 1.04.614 1.04h.336v.448h-4.302v-.451h.002ZM18.293 8.237c4.742 0 9.175 1.277 12.988 3.505l4.073-6.964C30.347 1.841 24.518.167 18.293.167a33.578 33.578 0 0 0-17.05 4.611l4.072 6.964a25.667 25.667 0 0 1 12.978-3.505Z"
+/>
+<path
+  d="M22.058 12.068c-1.653-.017-6.67-.114-13.119 2.867-.822.381-1.404.7-1.543.497-.278-.44 1.772-2.182 3.972-3.455.795-.473 1.25-.886 1.072-1.238-.265-.512-1.841-.617-6.239 1.633a24.751 24.751 0 0 0-6.034 4.736l.717.677c.706-.748 1.469-1.44 2.246-2.12.519-.45 2.923-2.246 3.133-1.704.081.217-.072.534-.924 1.698-.742 1.029-1.23 1.99-.878 2.285.35.297.773.128 1.776-.425.743-.41 3.102-1.66 6.821-2.778 3.72-1.11 4.623-.689 4.714-.417.113.366-1.6.972-2.61 1.472-.844.433-3.828 2.186-5.447 3.49 0 0 1.57 2.693 1.576 2.693 1.67-.982 8.033-2.592 8.712-1.429.746 1.277-6.024 6.035-6.024 6.035L18.293 34s9.817-11.275 8.252-13.748c-1.578-2.461-7.487-2.005-9.819-1.784-.64.056-1.392.196-1.55-.12-.176-.351.026-1.76 7.905-3.626 1.752-.41 2.434-.626 2.338-1.4-.081-.665-1.706-1.242-3.36-1.254Z"
+/>
+</svg>
+
+
+<style>
+.hva-logo {
+    display: inline-block;
+    width: 50%;
+    margin-left: 1rem;
+  }
+
+  @media (760px <= width) {
+        .hva-logo {
+          width: 40%;
+        }
+    }
+
+  @media (1025px <= width) {
+        .hva-logo {
+          height: auto;
+          width: 20%;
+        }
+    }
+
+        @media (1600 <= width) {
+    .hva-logo {
+      width: 15%;
+    }
+}
+</style>

src/lib/molecules/Heading.svelte

@@ -1,9 +1,14 @@
 <script>
-  let { title, subtitle = "" } = $props()
-  let id = title ? title .replace(/[^\w\s]/gi, "") .replace(/\s+/g, "-") .toLowerCase() : ""
+  let { title, subtitle = "" } = $props();
+  let id = title
+    ? title
+        .replace(/[^\w\s]/gi, "")
+        .replace(/\s+/g, "-")
+        .toLowerCase()
+    : "";
 </script>
 
-<h2> 
+<h2>
   <span>{title}</span>
   {#if subtitle !== ""}
     <strong> {subtitle} </strong>

src/lib/molecules/Pagination.svelte

@@ -1,70 +1,73 @@
 <script>
-  let { prevSprint, nextSprint } = $props()
+  let { prevSprint, nextSprint } = $props();
+  import Arrow from "../atoms/Arrow.svelte";
 </script>
 
 <nav>
   {#if prevSprint}
-      <a data-sveltekit-reload href="/{prevSprint.semester.slug}/{prevSprint.slug}">
-        <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l4 4" /><path d="M5 12l4 -4" /></svg>
-        Vorige sprint
-        <span>: {prevSprint.title}</span>
-      </a>
+    <a
+      data-sveltekit-reload
+      href="/{prevSprint.semester.slug}/{prevSprint.slug}"
+    >
+      <Arrow />
+
+      Vorige sprint
+      <span>: {prevSprint.title}</span>
+    </a>
   {/if}
-  
+
   {#if nextSprint}
-      <a data-sveltekit-reload href="/{nextSprint.semester.slug}/{nextSprint.slug}">
-          Volgende sprint<span>: {nextSprint.title}</span>
+    <a
+      data-sveltekit-reload
+      href="/{nextSprint.semester.slug}/{nextSprint.slug}"
+    >
+      Volgende sprint<span>: {nextSprint.title}</span>
 
-          <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M15 16l4 -4" /><path d="M15 8l4 4" /></svg>
-      </a>
+      <Arrow rightArrow="right-arrow" />
+
+    </a>
   {/if}
 </nav>
 
 <style>
   nav {
-        font-size: 1rem;
-        font-weight: 600;
-        display: flex;
-        justify-content: space-between;
-        margin: 2rem 0 0;
-    
+    font-size: 1rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    margin: 2rem 0 0;
+
     a {
-        text-decoration: none;
-        color: var(--blueberry);
-        display: flex;
-        align-items: center;
-        gap:.25rem;
-        cursor:pointer;
+      text-decoration: none;
+      color: var(--blueberry);
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      cursor: pointer;
 
-        &:hover,
-        &:focus,
-        &:focus-visible {
-            color: var(--text-element-hover);
-            text-decoration: underline;
-            outline: none;
-            outline-offset: none;
-            text-decoration-color: var(--text-element-hover);
-        }
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        color: var(--text-element-hover);
+        text-decoration: underline;
+        outline: none;
+        outline-offset: none;
+        text-decoration-color: var(--text-element-hover);
+      }
     }
 
-    a > span{
-        display:none;
+    a > span {
+      display: none;
     }
 
-    @media (min-width:47rem) {
+    @media (min-width: 47rem) {
       a > span {
-          display: inline;
-      } 
+        display: inline;
+      }
     }
 
     a:last-of-type {
-        margin-left:auto;
-    }
-
-    svg {
-      translate:0 1px;
+      margin-left: auto;
     }
   }
-</style>
+</style>

src/lib/molecules/Program.svelte

@@ -1,19 +1,23 @@
 <script>
-  import Heading from "$lib/molecules/Heading.svelte"
-  
-  let { title, content } = $props()
+  import Heading from "$lib/molecules/Heading.svelte";
+
+  let { title, content } = $props();
 </script>
 
 <section>
-    <Heading {title} />
-    <!-- {@html content.html} -->
+  <Heading {title} />
+  <!-- {@html content.html} -->
 </section>
 
 <style>
   section {
     position: relative;
     color: var(--blueberry);
   }
-
-  @media (min-width: 750px) { section{ margin:0; }}
+
+  @media (min-width: 750px) {
+    section {
+      margin: 0;
+    }
+  }
 </style>

src/lib/molecules/Semester.svelte

@@ -1,9 +1,8 @@
 <script>
-  import Heading from "$lib/molecules/Heading.svelte"
-  import SprintLink from "$lib/molecules/SprintLink.svelte"
-  let { semester, i } = $props()
-  let semesterNr = `Semester ${++i}` 
-
+  import Heading from "$lib/molecules/Heading.svelte";
+  import SprintLink from "$lib/molecules/SprintLink.svelte";
+  let { semester, i } = $props();
+  let semesterNr = `Semester ${++i}`;
 </script>
 
 <article class="semester">
@@ -12,7 +11,13 @@
   </a>
   <ol>
     {#each semester.sprints as sprint, index}
-      <SprintLink {semester} {sprint} nextSprint={index !== semester.sprints.length - 1 ? semester.sprints[index + 1] : false}/>
+      <SprintLink
+        {semester}
+        {sprint}
+        nextSprint={index !== semester.sprints.length - 1
+          ? semester.sprints[index + 1]
+          : false}
+      />
     {/each}
   </ol>
 </article>
@@ -34,7 +39,8 @@
     left: 0;
   }
 
-  .semester a:focus, .semester a:hover {
+  .semester a:focus,
+  .semester a:hover {
     color: var(--text-element-hover);
     text-decoration: underline;
     text-decoration-color: var(--text-element-hover);
@@ -47,14 +53,14 @@
 
   ol {
     list-style: none;
-    padding:0;
-    margin:0;
+    padding: 0;
+    margin: 0;
   }
 
-  :global(.semester h2 ) {
+  :global(.semester h2) {
     line-height: 1.1;
     font-size: 1rem;
-    display:flex;
+    display: flex;
     flex-direction: column;
   }
 
@@ -75,5 +81,4 @@
       list-style: none;
     }
   }
-
-</style>
+</style>