From 629ac882dae1c398cb74113d68471735546a70a3 Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Thu, 21 Sep 2023 22:16:52 -0300
Subject: [PATCH] chore: More misc cleanup

---
 svelte-app/src/app.scss                       |  2 +-
 .../src/components/about/timeline.svelte      |  6 +-
 svelte-app/src/components/code-block.svelte   | 14 ++---
 .../components/controls/arrow-button.svelte   | 29 ++++++++++
 .../document/content/common/footer.svelte     | 13 ++---
 .../document/content/common/header.svelte     | 56 ++++++++++++-------
 .../document/content/common/summary.svelte    |  4 +-
 .../content/common/summary/heading.svelte     | 49 ----------------
 .../content/common/summary/item.svelte        | 46 +++------------
 .../content/common/summary/items.svelte       | 21 +++----
 .../document/content/content.svelte           | 10 +---
 .../src/components/document/route.svelte      | 14 +----
 .../layouts/scroll-container.svelte           | 19 +++++--
 svelte-app/src/languages/en.json              |  3 +
 svelte-app/src/languages/fr.json              |  3 +
 svelte-app/src/lib/helpers/scrollTo.ts        |  2 +-
 svelte-app/src/routes/+layout.svelte          |  2 +-
 .../src/routes/[[lang=lang]]/+page.svelte     | 15 ++---
 18 files changed, 130 insertions(+), 178 deletions(-)
 create mode 100644 svelte-app/src/components/controls/arrow-button.svelte
 delete mode 100644 svelte-app/src/components/document/content/common/summary/heading.svelte

diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
index fe8382124..e4eee6377 100644
--- a/svelte-app/src/app.scss
+++ b/svelte-app/src/app.scss
@@ -30,7 +30,7 @@ img {
 body {
   @apply h-full w-full overflow-x-hidden;
 
-  background-color: $dark;
+  background-color: $black;
   --textColour: $light;
 
   &.light {
diff --git a/svelte-app/src/components/about/timeline.svelte b/svelte-app/src/components/about/timeline.svelte
index a1ad326f9..eb3efc19e 100644
--- a/svelte-app/src/components/about/timeline.svelte
+++ b/svelte-app/src/components/about/timeline.svelte
@@ -10,7 +10,7 @@
   import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
-  import Tags from '$components/tags.svelte';
+  // import Tags from '$components/tags.svelte';
   import Tooltip from '$components/tooltip.svelte';
 
   import type { AuthorTimelineItem } from '$types';
@@ -111,9 +111,9 @@
                 easing: circInOut
               }}
             >
-              {#if item.skills}
+              <!-- {#if item.skills}
                 <Tags model="project" data={item.skills} class="mt-4 select-none" />
-              {/if}
+              {/if} -->
               <div class="-mb-5">
                 <PortableText text={item.body} />
               </div>
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index 0fbc39841..9f9e98dd2 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -119,7 +119,7 @@
 </svelte:head>
 
 <div
-  class="relative -mx-1 my-7 overflow-hidden rounded-sm border border-dark/40 duration-150 dark:border-light/40 {hovered
+  class="relative -mx-1 my-7 overflow-hidden rounded-sm border border-dark/40 duration-75 dark:border-light/40 {hovered
     ? 'border-dark/60 dark:border-light/60'
     : ''}"
   role="group"
@@ -134,7 +134,7 @@
 >
   {#if filename}
     <div
-      class="border-b border-dark/40 bg-dark/5 py-[13px] pl-5 font-mono text-base duration-150 dark:border-light/40 dark:bg-dark/40 {hovered
+      class="border-b border-dark/40 bg-dark/5 py-[13px] pl-5 font-mono text-base duration-75 dark:border-light/40 dark:bg-dark/40 {hovered
         ? 'border-dark/60 dark:border-light/60'
         : ''}"
       id="{id}-filename"
@@ -143,10 +143,10 @@
     </div>
   {/if}
   <Hoverable>
-    <Tooltip text={$t('Copy to clipboard')} position="left" delay={150} fixed>
+    <Tooltip text={$t('Copy to clipboard')} position="left" delay={200} fixed>
       {#key copied}
         <button
-          class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 opacity-0 transition-opacity duration-150 hover:text-dark dark:text-light/60 dark:hover:text-light"
+          class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 opacity-0 transition-opacity duration-75 hover:text-dark dark:text-light/60 dark:hover:text-light"
           class:opacity-100={hovered || filename}
           on:click={() => copy()}
           in:fade={{ duration: 100, delay: 100 }}
@@ -162,9 +162,7 @@
     bind:this={codeContainer}
   >
     <div
-      class="h-fit w-full min-w-full rounded-sm p-1 transition-all dark:bg-dark/10 {hovered
-        ? 'bg-dark/[0.025] dark:bg-light/5'
-        : ''}"
+      class="h-fit w-full min-w-full rounded-sm p-1 transition-all dark:bg-dark/10"
       id="hljs-container"
       bind:clientHeight={innerHeight}
     >
@@ -181,8 +179,6 @@
         <svelte:component this={hlAuto} code={content} />
       {:else}
         {#await hlLang then resolvedLang}
-          <!-- <div class="mx-auto my-4 w-fit"><Spinner /></div> -->
-          <!-- {:then resolvedLang} -->
           {#if showLineNumbers === true}
             <svelte:component
               this={hlHighlight}
diff --git a/svelte-app/src/components/controls/arrow-button.svelte b/svelte-app/src/components/controls/arrow-button.svelte
new file mode 100644
index 000000000..183414d4c
--- /dev/null
+++ b/svelte-app/src/components/controls/arrow-button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher(),
+    self = $$props.href ? 'a' : 'button',
+    handleClick = (e: MouseEvent | KeyboardEvent) => {
+      if (e instanceof KeyboardEvent && e.key !== 'Enter') {
+        return;
+      }
+
+      dispatch('click');
+    };
+</script>
+
+<svelte:element
+  this={self}
+  href={$$props.href || undefined}
+  class="inline-block font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light {$$props.class ||
+    ''}"
+  aria-label={$$props['aria-label'] || undefined}
+  role="button"
+  tabindex="0"
+  on:click={handleClick}
+  on:keydown={handleClick}
+  data-sveltekit-preload-code={$$props.preload ? 'hover' : 'off'}
+  data-sveltekit-preload-data={$$props.preload ? 'hover' : 'off'}
+>
+  <slot />
+</svelte:element>
diff --git a/svelte-app/src/components/document/content/common/footer.svelte b/svelte-app/src/components/document/content/common/footer.svelte
index d52ba080b..a372b22c4 100644
--- a/svelte-app/src/components/document/content/common/footer.svelte
+++ b/svelte-app/src/components/document/content/common/footer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { linkTo, t } from '$i18n';
 
+  import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
 
   import type { PostDocument, ProjectDocument } from '$types';
@@ -11,13 +12,11 @@
 
 <div class="mt-4">
   <Divider />
-  <a
+  <ArrowButton
+    class="w-full text-right"
     href={$linkTo(model === 'post' ? '/blog' : '/work')}
-    class="focusOutline inline-block w-full rounded-sm pl-[8px] text-right font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
-    aria-label={$t('See more')}
-    data-sveltekit-preload-code
-    data-sveltekit-preload-data
+    preload
   >
-    &larr; Read more
-  </a>
+    &larr; {$t('Read more')}
+  </ArrowButton>
 </div>
diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/common/header.svelte
index e312be076..92d7024f3 100644
--- a/svelte-app/src/components/document/content/common/header.svelte
+++ b/svelte-app/src/components/document/content/common/header.svelte
@@ -4,18 +4,22 @@
   import { currentLang, t } from '$i18n';
 
   import BulletPoint from '$components/bullet-point.svelte';
+  import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
+  import SummaryItems from '$components/document/content/common/summary/items.svelte';
   import PostHeader from '$components/document/content/post/header.svelte';
   import ProjectHeader from '$components/document/content/project/header.svelte';
   import Hoverable from '$components/hoverable.svelte';
-  import Tags from '$components/tags.svelte';
 
-  import type { PostDocument, ProjectDocument, PTBlock } from '$types';
+  import type { DocumentHeadings, PostDocument, ProjectDocument, PTBlock } from '$types';
 
-  export let model: 'post' | 'project', data: PostDocument | ProjectDocument;
+  export let data: PostDocument | ProjectDocument,
+    model = data._type,
+    headings: DocumentHeadings[] | undefined;
 
   let dateFormat: 'med' | 'rel' | 'full' = model === 'project' ? 'med' : 'rel',
-    readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[]));
+    readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[])),
+    summaryExpanded = false;
 
   const switchDate = () => {
     if (model === 'project') {
@@ -44,27 +48,39 @@
         </h1>
       </svelte:fragment>
       <svelte:fragment slot="meta">
-        <div class="flex flex-row flex-wrap items-center justify-start gap-y-2">
-          <Hoverable>
-            <button
-              class="focusOutline inline cursor-pointer rounded-sm font-mono text-base"
-              on:click={() => switchDate()}
-              tabindex="0"
-            >
-              {date ? date : $t('Unknown date')}
-            </button>
-          </Hoverable>
-          <BulletPoint />
-          <p class="cursor-default font-mono text-base">
-            {$t('{length} min read', { length: Math.floor(readingTime / 60) })}
-          </p>
-          {#if data.tags && data.tags.length > 0}
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-row flex-wrap items-center justify-start gap-y-2">
+            <Hoverable>
+              <button
+                class="focusOutline inline cursor-pointer rounded-sm font-mono text-base"
+                on:click={() => switchDate()}
+                tabindex="0"
+              >
+                {date ? date : $t('Unknown date')}
+              </button>
+            </Hoverable>
             <BulletPoint />
-            <Tags {model} data={data.tags} size="sm" />
+            <p class="cursor-default font-mono text-base">
+              {$t('{length} min read', { length: Math.floor(readingTime / 60) })}
+            </p>
+          </div>
+          {#if headings?.length}
+            <ArrowButton
+              class="text-right"
+              on:click={() => (summaryExpanded = !summaryExpanded)}
+            >
+              <span class="inline-block {summaryExpanded ? 'rotate-90' : '-rotate-90'}"
+                >&larr;</span
+              >
+              {$t(summaryExpanded ? 'Hide Contents' : 'Show Contents')}
+            </ArrowButton>
           {/if}
         </div>
       </svelte:fragment>
     </svelte:component>
   </div>
+  {#if headings?.length && summaryExpanded}
+    <SummaryItems {headings} />
+  {/if}
   <Divider />
 </div>
diff --git a/svelte-app/src/components/document/content/common/summary.svelte b/svelte-app/src/components/document/content/common/summary.svelte
index 8cc10affd..9e13b95f7 100644
--- a/svelte-app/src/components/document/content/common/summary.svelte
+++ b/svelte-app/src/components/document/content/common/summary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Heading from '$components/document/content/common/summary/heading.svelte';
-  import Items from '$components/document/content/common/summary/items.svelte';
+  import Heading from '$components/document/content/common/summary_old/heading.svelte';
+  import Items from '$components/document/content/common/summary_old/items.svelte';
 
   import type { DocumentHeadings } from '$types';
 
diff --git a/svelte-app/src/components/document/content/common/summary/heading.svelte b/svelte-app/src/components/document/content/common/summary/heading.svelte
deleted file mode 100644
index f608e2bea..000000000
--- a/svelte-app/src/components/document/content/common/summary/heading.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  import { t } from '$i18n';
-
-  import Hoverable from '$components/hoverable.svelte';
-  import Icon from '$components/icon.svelte';
-  import Tooltip from '$components/tooltip.svelte';
-
-  export let headingsExist = false;
-
-  const dispatch = createEventDispatcher();
-
-  let expanded = false;
-</script>
-
-<Hoverable class={headingsExist ? '' : 'not-allowed'}>
-  <Tooltip text={$t('Toggle summary')} fixed>
-    <div
-      class="focusOutline-sm flex flex-row items-center justify-between rounded-md px-4 py-4"
-      role="button"
-      tabindex="0"
-      on:click={(_) => {
-        if (headingsExist) {
-          expanded = !expanded;
-          dispatch('toggle');
-        }
-      }}
-      on:keydown={(e) => {
-        if (e.code === 'Enter' || e.code === 'Space') {
-          e.preventDefault();
-          if (headingsExist) {
-            expanded = !expanded;
-            dispatch('toggle');
-          }
-        }
-      }}
-    >
-      <div class="flex w-fit flex-row items-center justify-start gap-3">
-        <Icon icon="List" />
-        <h3 class="font-lg select-none font-bold">{$t('Summary')}</h3>
-      </div>
-      <Icon
-        icon="ChevronDown"
-        class="{expanded ? 'rotate-0' : 'rotate-90'} transition-all"
-      />
-    </div>
-  </Tooltip>
-</Hoverable>
diff --git a/svelte-app/src/components/document/content/common/summary/item.svelte b/svelte-app/src/components/document/content/common/summary/item.svelte
index 76b1b7959..dc39d5928 100644
--- a/svelte-app/src/components/document/content/common/summary/item.svelte
+++ b/svelte-app/src/components/document/content/common/summary/item.svelte
@@ -1,47 +1,19 @@
 <script lang="ts">
-  import BulletPoint from '$components/bullet-point.svelte';
-  import Hoverable from '$components/hoverable.svelte';
-
   import type { DocumentHeadings } from '$types';
 
   export let headings: DocumentHeadings[];
-
-  $: localHeadings = headings as (DocumentHeadings & { active: boolean })[];
 </script>
 
-<div
-  class="relative flex h-fit w-full flex-col items-start justify-start text-ellipsis {$$props.class ||
-    ''}"
->
-  {#each localHeadings as heading}
-    <Hoverable bind:hovered={heading.active}>
-      <a href={`#${heading.key}`} class="focusOutline-sm" class:active={heading.active}>
-        <BulletPoint />
-        {heading.text}
-      </a>
-    </Hoverable>
+<div class={$$props.class}>
+  {#each headings as heading}
+    <a
+      href={`#${heading.key}`}
+      class="focusOutline-sm block w-full select-none overflow-hidden text-ellipsis whitespace-nowrap rounded-sm py-2 text-base font-medium hover:text-accent-light dark:hover:text-accent-dark"
+    >
+      &bull;&nbsp;&nbsp;{heading.text}
+    </a>
     {#if heading.children?.length}
-      <svelte:self headings={heading.children} class="ml-6" />
+      <svelte:self headings={heading.children} class="ml-5" />
     {/if}
   {/each}
 </div>
-
-<style lang="scss">
-  a {
-    @apply ml-3 flex w-full select-none flex-row items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap rounded-sm py-[.65rem] text-[15px] text-sm font-medium text-dark/80 transition-[color];
-
-    &.active {
-      @apply text-dark;
-    }
-  }
-
-  :global(.dark) {
-    a {
-      @apply text-light/80;
-
-      &.active {
-        @apply text-light;
-      }
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/document/content/common/summary/items.svelte b/svelte-app/src/components/document/content/common/summary/items.svelte
index dc6c7bb6a..e28f9cd0c 100644
--- a/svelte-app/src/components/document/content/common/summary/items.svelte
+++ b/svelte-app/src/components/document/content/common/summary/items.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-  import { circInOut } from 'svelte/easing';
+  import { cubicInOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
 
-  import Divider from '$components/divider.svelte';
-  import Item from '$components/document/content/common/summary/item.svelte';
+  import SummaryItem from '$components/document/content/common/summary/item.svelte';
 
   import type { DocumentHeadings } from '$types';
 
-  export let headings: DocumentHeadings[],
-    headingsExist = false;
+  export let headings: DocumentHeadings[];
 </script>
 
 <div
-  class="mx-7 h-fit overflow-hidden px-1 pb-3"
-  transition:slide={{ duration: 200 + headings.length * 10, easing: circInOut }}
+  class="relative my-6 border-t border-dark/50 px-4 pt-4 dark:border-light/50"
+  transition:slide={{
+    duration: 250 + headings.length * 10,
+    easing: cubicInOut
+  }}
 >
-  <Divider classes="mb-3 mt-0" />
-
-  {#if headingsExist}
-    <Item {headings} />
-  {/if}
+  <SummaryItem {headings} />
 </div>
diff --git a/svelte-app/src/components/document/content/content.svelte b/svelte-app/src/components/document/content/content.svelte
index 156e1a898..40730bc1b 100644
--- a/svelte-app/src/components/document/content/content.svelte
+++ b/svelte-app/src/components/document/content/content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import Divider from '$components/divider.svelte';
   import Footer from '$components/document/content/common/footer.svelte';
   import Header from '$components/document/content/common/header.svelte';
-  import Summary from '$components/document/content/common/summary.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
 
@@ -20,13 +18,7 @@
     container: HTMLDivElement | undefined = undefined;
 </script>
 
-<Header {model} {data} />
-{#if headings && headings.length > 0}
-  <div>
-    <Summary {headings} />
-    <Divider />
-  </div>
-{/if}
+<Header {data} {headings} />
 <div class="mt-4 font-sans text-base" bind:this={container}>
   {#if data.body}
     <PortableText text={data.body} {routeFetch} />
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
index c28b15ace..7966ea31f 100644
--- a/svelte-app/src/components/document/route.svelte
+++ b/svelte-app/src/components/document/route.svelte
@@ -65,14 +65,6 @@
   <slot name="meta" />
 </svelte:head>
 
-<div data-test-route={model === 'post' ? 'blog' : 'work'}>
-  <ContentWrapper>
-    <Content {data} {headings} {routeFetch} />
-  </ContentWrapper>
-</div>
-
-<style lang="scss">
-  div {
-    @apply flex h-fit flex-row items-stretch justify-start;
-  }
-</style>
+<ContentWrapper>
+  <Content {data} {headings} {routeFetch} />
+</ContentWrapper>
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
index 758b1f24d..b3bf4b682 100644
--- a/svelte-app/src/components/layouts/scroll-container.svelte
+++ b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -3,21 +3,28 @@
 
   import { navigating } from '$app/stores';
 
+  import type { Navigation } from '@sveltejs/kit';
   import type { Unsubscriber } from 'svelte/store';
 
   export let element: HTMLDivElement;
 
-  let unsubscribe: Unsubscriber;
+  let unsubscribe: Unsubscriber,
+    navState: Navigation | null = null;
 
   onMount(() => {
     unsubscribe ||= navigating.subscribe((state) => {
+      state && (navState = state);
+
       if (state !== null) {
         return;
       }
-      element.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
+
+      if (navState) {
+        element.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      }
     });
   });
 
@@ -25,7 +32,7 @@
 </script>
 
 <div
-  class="relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll rounded-t-2xl bg-light p-8 duration-150 dark:bg-black lg:rounded-t-none lg:bg-transparent"
+  class="relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8"
   tabindex="-1"
   bind:this={element}
 >
diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
index 15689f569..3e25bd3af 100644
--- a/svelte-app/src/languages/en.json
+++ b/svelte-app/src/languages/en.json
@@ -35,6 +35,7 @@
   "Go to": "Go to",
   "Go to footnote source": "Go to footnote source",
   "Hi there, welcome to my little corner of the internet! Here you'll find": "Hi there, welcome to my little corner of the internet! Here you'll find",
+  "Hide Contents": "Hide Contents",
   "Home": "Home",
   "Index": "Index",
   "Just now": "Just now",
@@ -62,6 +63,7 @@
   "Post": "Post",
   "Project": "Project",
   "Projects & Talks": "Projects & Talks",
+  "Read more": "Read more",
   "Recent": "Recent",
   "Recent '{tag}' posts": "Recent '{tag}' posts",
   "Recent '{tag}' work": "Recent '{tag}' work",
@@ -75,6 +77,7 @@
   "Scroll to top": "Scroll to top",
   "Secret & work-in-progress features": "Secret & work-in-progress features",
   "See more": "See more",
+  "Show Contents": "Show Contents",
   "Sorry, something went wrong handling your login.": "Sorry, something went wrong handling your login.",
   "Sorry, something went wrong while logging you out.": "Sorry, something went wrong while logging you out.",
   "Summary": "Summary",
diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
index 7e75ae506..553b3783e 100644
--- a/svelte-app/src/languages/fr.json
+++ b/svelte-app/src/languages/fr.json
@@ -35,6 +35,7 @@
   "Go to": "Aller à",
   "Go to footnote source": "Aller à la source de la note de bas de page",
   "Hi there, welcome to my little corner of the internet! Here you'll find": "Salut, bienvenue dans mon petit coin d'internet! Ici vous trouverez",
+  "Hide Contents": "Masquer le Contenu",
   "Home": "Accueil",
   "Index": "Page d'accueil",
   "Just now": "À l'instant",
@@ -62,6 +63,7 @@
   "Post": "Article",
   "Project": "Projet",
   "Projects & Talks": "Projets & Conférences",
+  "Read more": "Lire la suite",
   "Recent": "Récent",
   "Recent '{tag}' posts": "Articles récents '{tag}'",
   "Recent '{tag}' work": "Travail récent '{tag}'",
@@ -75,6 +77,7 @@
   "Scroll to top": "Défiler vers le haut",
   "Secret & work-in-progress features": "Fonctionnalités secrètes et en cours de développement",
   "See more": "Voir plus",
+  "Show Contents": "Afficher le Contenu",
   "Sorry, something went wrong handling your login.": "Désolé, quelque chose s'est mal passé lors de votre connexion.",
   "Sorry, something went wrong while logging you out.": "Désolé, quelque chose s'est mal passé lors de votre déconnexion.",
   "Summary": "Sommaire",
diff --git a/svelte-app/src/lib/helpers/scrollTo.ts b/svelte-app/src/lib/helpers/scrollTo.ts
index 9cee67f63..bb1feec38 100644
--- a/svelte-app/src/lib/helpers/scrollTo.ts
+++ b/svelte-app/src/lib/helpers/scrollTo.ts
@@ -1,6 +1,6 @@
 import type { Page as PageStore } from '@sveltejs/kit';
 
-export default (url: PageStore['url'], scrollParams = {}) => {
+export default (url: PageStore['url'], scrollParams: ScrollIntoViewOptions = {}) => {
   const { hash } = url || { hash: '' };
 
   if (!hash.length) {
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 28e63163f..ad64373c7 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -134,7 +134,7 @@
 >
   <Nav loaded={appLoaded && !$loading} />
   <ScrollContainer bind:element={scrollContainer}>
-    <div class="relative mt-16 h-[calc(100%_-_4rem)] max-h-full w-full">
+    <div class="relative mt-16 max-h-full w-full">
       <PageTransition pathname={data.pathname}>
         <slot />
       </PageTransition>
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
index 2a428e668..b8b76d68c 100644
--- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import { linkTo, t } from '$i18n';
 
+  import ArrowButton from '$components/controls/arrow-button.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
   import ContentWrapper from '$components/layouts/content-wrapper.svelte';
@@ -47,12 +48,9 @@
             {/each}
             <div class="flex w-full flex-row items-start justify-start gap-2">
               <span class="block w-[72px] flex-shrink-0" />
-              <a
-                href={$linkTo('/blog')}
-                class="inline-block w-full font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
-              >
+              <ArrowButton class="w-full" href={$linkTo('/blog')} preload>
                 {$t('See more')} &rarr;
-              </a>
+              </ArrowButton>
             </div>
           </div>
         {:else}
@@ -75,12 +73,9 @@
             {/each}
             <div class="flex w-full flex-row items-start justify-start gap-2">
               <span class="block w-[72px] flex-shrink-0" />
-              <a
-                href={$linkTo('/work')}
-                class="inline-block w-full font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
-              >
+              <ArrowButton class="w-full" href={$linkTo('/work')} preload>
                 {$t('See more')} &rarr;
-              </a>
+              </ArrowButton>
             </div>
           </div>
         {:else}