From 04852fe6dde9fcfdd801d7b10ecb0b742792e311 Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Fri, 3 Nov 2023 17:08:10 -0400
Subject: [PATCH] feat: Update styles

---
 .../src/components/about/timeline-item.svelte |  52 +++++++++
 .../components/about/timeline-section.svelte  |  67 ++++++++++++
 .../src/components/about/timeline.svelte      | 100 +++---------------
 svelte-app/src/components/bullet-point.svelte |  17 ++-
 .../controls/language-toggle.svelte           |   2 +-
 .../components/controls/menu-toggle.svelte    |   6 +-
 .../components/controls/theme-toggle.svelte   |   2 +-
 svelte-app/src/components/divider.svelte      |   2 +-
 .../document/content/common/footer.svelte     |   5 +-
 .../document/content/common/header.svelte     |  63 ++++-------
 .../document/content/common/sidebar.svelte    |  49 ---------
 .../document/content/common/summary.svelte    |  67 ------------
 .../src/components/document/route.svelte      |   7 +-
 .../components/layouts/content-wrapper.svelte |  32 +-----
 .../components/layouts/page-transition.svelte |  47 ++------
 .../layouts/scroll-container.svelte           |  52 ++-------
 svelte-app/src/components/nav.svelte          |  49 ++++-----
 svelte-app/src/components/nav/nav-link.svelte |  40 +------
 .../components/portable-text/footnote.svelte  |  33 +++---
 .../portable-text/portable-text.svelte        |  43 ++++----
 .../serializers/custom-heading.svelte         |  50 ---------
 svelte-app/src/languages/en.json              |   1 +
 svelte-app/src/languages/fr.json              |   1 +
 svelte-app/src/lib/helpers/navigation.ts      |   2 +-
 svelte-app/src/lib/icons.ts                   |  10 +-
 svelte-app/src/lib/summary.ts                 |  69 ------------
 svelte-app/src/routes/+layout.svelte          |  50 ++-------
 .../src/routes/[[lang=lang]]/+page.svelte     |   6 +-
 .../routes/[[lang=lang]]/blog/+page.svelte    |  60 +++++------
 .../routes/[[lang=lang]]/work/+page.svelte    |  82 +++++++-------
 svelte-app/src/styles/_colors.scss            |   4 +-
 svelte-app/tailwind.config.cjs                |   4 +-
 32 files changed, 362 insertions(+), 712 deletions(-)
 create mode 100644 svelte-app/src/components/about/timeline-item.svelte
 create mode 100644 svelte-app/src/components/about/timeline-section.svelte
 delete mode 100644 svelte-app/src/components/document/content/common/sidebar.svelte
 delete mode 100644 svelte-app/src/components/document/content/common/summary.svelte
 delete mode 100644 svelte-app/src/lib/summary.ts

diff --git a/svelte-app/src/components/about/timeline-item.svelte b/svelte-app/src/components/about/timeline-item.svelte
new file mode 100644
index 000000000..0c3363bb7
--- /dev/null
+++ b/svelte-app/src/components/about/timeline-item.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import BulletPoint from '$components/bullet-point.svelte';
+  // import Icon from '$components/icon.svelte';
+  import PortableText from '$components/portable-text/portable-text.svelte';
+
+  import type { AuthorTimelineItem } from '$types';
+
+  export let title: string | undefined, body: AuthorTimelineItem['body'], date: string;
+</script>
+
+<div class="item">
+  <div>
+    <!-- <Icon icon="ArrowRight" class="mr-4" /> -->
+    <BulletPoint />
+    <span>
+      <h2>{title}</h2>
+      <p>{date}</p>
+    </span>
+  </div>
+
+  {#if body}
+    <div class="body">
+      <PortableText text={body} />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .item {
+    @apply flex flex-col items-start justify-start;
+  }
+
+  h2 {
+    @apply text-lg font-bold text-white;
+  }
+
+  div {
+    @apply flex w-full flex-row items-center justify-start gap-x-2;
+
+    span {
+      @apply flex w-full flex-row items-center justify-between text-base;
+    }
+
+    p {
+      @apply font-mono text-base;
+    }
+  }
+
+  .body {
+    @apply -mt-1 pl-8 text-base;
+  }
+</style>
diff --git a/svelte-app/src/components/about/timeline-section.svelte b/svelte-app/src/components/about/timeline-section.svelte
new file mode 100644
index 000000000..e32caddc7
--- /dev/null
+++ b/svelte-app/src/components/about/timeline-section.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { derived } from 'svelte/store';
+
+  import { currentLang, t } from '$i18n';
+
+  import TimelineItem from './timeline-item.svelte';
+
+  import type { AuthorTimelineItem } from '$types';
+
+  export let section: AuthorTimelineItem[];
+
+  const title = section[0].title;
+
+  const dateDisplay = derived([currentLang, t], ([currentLang, t]) => {
+    return (start: string, end: string | undefined) => {
+      try {
+        const startDate = new Date(start),
+          endDate = end ? new Date(end) : undefined;
+
+        if (!endDate) {
+          return `${new Intl.DateTimeFormat(currentLang, {
+            month: 'short',
+            year: 'numeric'
+          }).format(startDate)} - ${t('present')}`;
+        }
+
+        return `${new Intl.DateTimeFormat(currentLang, {
+          month: 'short',
+          year: 'numeric'
+        }).format(startDate)} - ${new Intl.DateTimeFormat(currentLang, {
+          month: 'short',
+          year: 'numeric'
+        }).format(endDate)}`;
+      } catch (_) {
+        return t('Invalid date');
+      }
+    };
+  });
+</script>
+
+<section>
+  <h1>{title}</h1>
+
+  <div>
+    {#each section as item}
+      <TimelineItem
+        title={item.subtitle}
+        body={item.body}
+        date={$dateDisplay(item.range.start, item.range.end)}
+      />
+    {/each}
+  </div>
+</section>
+
+<style lang="scss">
+  h1 {
+    @apply mb-3 font-code text-2xl font-bold text-white;
+  }
+
+  section {
+    @apply my-6;
+
+    div {
+      @apply flex flex-col;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/about/timeline.svelte b/svelte-app/src/components/about/timeline.svelte
index b596ddac9..176b3aed5 100644
--- a/svelte-app/src/components/about/timeline.svelte
+++ b/svelte-app/src/components/about/timeline.svelte
@@ -1,23 +1,14 @@
 <script lang="ts">
-  import { circInOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
-
   import { currentLang, t } from '$i18n';
-  import { BASE_ANIMATION_DURATION } from '$lib/consts';
-  import Settings from '$stores/settings';
 
-  import BulletPoint from '$components/bullet-point.svelte';
-  import Hoverable from '$components/hoverable.svelte';
-  import Icon from '$components/icon.svelte';
-  import PortableText from '$components/portable-text/portable-text.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import TimelineSection from './timeline-section.svelte';
 
   import type { AuthorTimelineItem } from '$types';
 
-  let selected: number | null = null;
-
   export let data: AuthorTimelineItem[];
 
+  let sections: Record<string, AuthorTimelineItem[]> = {};
+
   const dateDisplay = (start: string, end: string | undefined) => {
     try {
       const startDate = new Date(start),
@@ -42,77 +33,18 @@
     }
   };
 
-  const { reduce_motion } = Settings;
+  $: {
+    sections = {};
+    for (const item of data) {
+      if (sections[item.title]) {
+        sections[item.title].push(item);
+      } else {
+        sections[item.title] = [item];
+      }
+    }
+  }
 </script>
 
-<div class="flex flex-col items-start justify-start gap-4">
-  {#each data as item, i}
-    <Hoverable bind:hovered={data[i].hovered}>
-      <Tooltip
-        text={selected === i ? $t('Click to hide details') : $t('Click to show details')}
-        position="bottom"
-        disable={!item.body}
-      >
-        <div
-          class="flex w-full flex-col items-start justify-start"
-          on:click={() => {
-            if (item.body) {
-              selected = selected === i ? null : i;
-            }
-          }}
-          on:keydown={(e) => {
-            if (item.body && (e.code === 'Enter' || e.code === 'Space')) {
-              selected = selected === i ? null : i;
-            }
-          }}
-          aria-expanded={selected === i}
-          tabindex={0}
-          role="button"
-        >
-          <div class="flex flex-row items-center justify-start gap-4">
-            <Icon
-              icon="ChevronDown"
-              class="{selected === i ? 'rotate-0' : '-rotate-90'} transition-all"
-            />
-            <div class="flex flex-row flex-wrap items-center justify-start gap-x-4">
-              <p
-                class="min-w-[10rem] select-none font-code text-base text-dark/90 dark:text-light/90"
-              >
-                {dateDisplay(item.range.start, item.range.end)}
-              </p>
-              <div class="flex flex-row items-center justify-start">
-                <h1
-                  class="text-lg font-bold decoration-accent-light decoration-[3px] underline-offset-4 dark:decoration-accent-dark"
-                  class:underline={data[i].hovered}
-                >
-                  {item.title}
-                </h1>
-                {#if item.subtitle}
-                  <BulletPoint />
-                  <p class="text-base">{item.subtitle}</p>
-                {/if}
-              </div>
-            </div>
-          </div>
-          {#if selected === i && item.body}
-            <div
-              class="mx-10 pb-2 font-sans text-base"
-              in:slide={{
-                duration: BASE_ANIMATION_DURATION,
-                easing: circInOut
-              }}
-              out:slide={{
-                duration: BASE_ANIMATION_DURATION / 2,
-                easing: circInOut
-              }}
-            >
-              <div class="-mb-5">
-                <PortableText text={item.body} />
-              </div>
-            </div>
-          {/if}
-        </div>
-      </Tooltip>
-    </Hoverable>
-  {/each}
-</div>
+{#each Object.keys(sections) as section}
+  <TimelineSection section={sections[section]} />
+{/each}
diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte
index e2f1c4d7e..dcb8a1c36 100644
--- a/svelte-app/src/components/bullet-point.svelte
+++ b/svelte-app/src/components/bullet-point.svelte
@@ -1,4 +1,13 @@
-<div
-  class="mx-2 h-1 w-1 rounded-full bg-dark/80 transition-all duration-150 dark:bg-light/90 {$$props.class ||
-    ''}"
-/>
+<div class={$$props.class || ''} />
+
+<style lang="scss">
+  div {
+    @apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-all duration-150;
+  }
+
+  :global(.dark) {
+    div {
+      @apply bg-light/80;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
index 73ba7931e..32989da8d 100644
--- a/svelte-app/src/components/controls/language-toggle.svelte
+++ b/svelte-app/src/components/controls/language-toggle.svelte
@@ -34,7 +34,7 @@
     fixed
   >
     <button
-      class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
+      class="focusOutline -m-1.5 flex h-[32px] w-[32px] items-center justify-center rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
         ''}"
       aria-label={$t(
         $currentLang === APP_LANGS[0] ? 'Switch to french' : 'Switch to english'
diff --git a/svelte-app/src/components/controls/menu-toggle.svelte b/svelte-app/src/components/controls/menu-toggle.svelte
index 3a3ba39b6..316477067 100644
--- a/svelte-app/src/components/controls/menu-toggle.svelte
+++ b/svelte-app/src/components/controls/menu-toggle.svelte
@@ -8,16 +8,16 @@
 
 <Hoverable>
   <button
-    class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
+    class="focusOutline -m-1.5 flex h-[32px] w-[32px] items-center justify-center rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
       ''}"
     aria-label="Toggle navigation"
     data-test-id="nav-toggle"
     on:click={() => navOpen.set(!$navOpen)}
   >
     {#if $navOpen}
-      <Icon icon="CloseBox" />
+      <Icon icon="BackBurger" height={24} width={24} />
     {:else}
-      <Icon icon="Menu" />
+      <Icon icon="ForwardBurger" height={24} width={24} />
     {/if}
   </button>
 </Hoverable>
diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte
index 77891e616..fffaef855 100644
--- a/svelte-app/src/components/controls/theme-toggle.svelte
+++ b/svelte-app/src/components/controls/theme-toggle.svelte
@@ -15,7 +15,7 @@
 <Hoverable>
   <Tooltip text={$t(tooltipText)} delay={150} fixed>
     <button
-      class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark"
+      class="focusOutline -m-1.5 flex h-[32px] w-[32px] items-center justify-center rounded-sm hover:text-accent-light dark:hover:text-accent-dark"
       aria-label={$t(tooltipText)}
       data-test-id="theme-toggle"
       data-test-state={$theme}
diff --git a/svelte-app/src/components/divider.svelte b/svelte-app/src/components/divider.svelte
index fcf1d003b..60db1e933 100644
--- a/svelte-app/src/components/divider.svelte
+++ b/svelte-app/src/components/divider.svelte
@@ -1,4 +1,4 @@
-<span />
+<span class={$$props.class || ''} />
 
 <style lang="scss">
   span {
diff --git a/svelte-app/src/components/document/content/common/footer.svelte b/svelte-app/src/components/document/content/common/footer.svelte
index e4af351a9..2910559d1 100644
--- a/svelte-app/src/components/document/content/common/footer.svelte
+++ b/svelte-app/src/components/document/content/common/footer.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { linkTo, t } from '$i18n';
+  import { isMobile } from '$lib/helpers/responsive';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Icon from '$components/icon.svelte';
@@ -17,7 +18,9 @@
     preload
   >
     <span class="flex items-center justify-start gap-2 text-base">
-      <Icon icon="ArrowLeft" class="mb-0.5" inline />
+      {#key $isMobile}
+        <Icon icon={$isMobile ? 'ArrowUp' : 'ArrowLeft'} class="mb-0.5" inline />
+      {/key}
       <p>{$t('Read more')}</p>
     </span>
   </ArrowButton>
diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/common/header.svelte
index 716c4a065..82b551cfe 100644
--- a/svelte-app/src/components/document/content/common/header.svelte
+++ b/svelte-app/src/components/document/content/common/header.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { formatDate, getReadingTime } from '$helpers/date';
   import { getTotalWords } from '$helpers/pt';
-  import { isDesktop } from '$helpers/responsive';
   import { currentLang, linkTo, t } from '$i18n';
-  import { summaryContents, summaryOffset, summaryVisible } from '$lib/summary';
+  import { isMobile } from '$lib/helpers/responsive';
 
   import BulletPoint from '$components/bullet-point.svelte';
   import ArrowButton from '$components/controls/arrow-button.svelte';
@@ -11,27 +10,21 @@
   import ProjectHeader from '$components/document/content/project/header.svelte';
   import Icon from '$components/icon.svelte';
 
-  import type { DocumentHeadings, PostDocument, ProjectDocument, PTBlock } from '$types';
+  import type { PostDocument, ProjectDocument, PTBlock } from '$types';
 
   export let data: PostDocument | ProjectDocument,
-    model = data._type,
-    headings: DocumentHeadings[] | undefined;
-
-  let titleRect: DOMRectReadOnly | undefined;
+    model = data._type;
 
   const readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[]));
 
   $: date = formatDate(data.date, 'full', $currentLang);
-  $: titleRect?.height && summaryOffset.set(titleRect.height);
 </script>
 
 <div data-test-id="{model}-header">
   <div class="flex flex-col">
     <svelte:component this={model === 'post' ? PostHeader : ProjectHeader}>
       <svelte:fragment slot="title">
-        <h1 bind:contentRect={titleRect}>
-          {data.title}
-        </h1>
+        <h1>{data.title}</h1>
       </svelte:fragment>
       <svelte:fragment slot="meta">
         <div class="flex flex-row flex-wrap items-center justify-between gap-4">
@@ -46,38 +39,18 @@
               {$t('{length} min read', { length: Math.floor(readingTime / 60) })}
             </p>
           </div>
-          {#if $isDesktop && headings?.length}
-            <ArrowButton
-              class="focusOutline-sm -mb-1 flex-1 whitespace-nowrap rounded-sm text-right"
-              on:click={() => {
-                $isDesktop &&
-                  $summaryContents?.length &&
-                  summaryVisible.set(!$summaryVisible);
-              }}
-            >
-              <span class="flex items-center justify-end gap-2 text-base">
-                {#key $summaryVisible}
-                  <Icon
-                    icon={$summaryVisible ? 'ArrowRight' : 'ArrowLeft'}
-                    class="mb-0.5"
-                    inline
-                  />
-                {/key}
-                <p>{$t($summaryVisible ? 'Hide Sidebar' : 'Show Sidebar')}</p>
-              </span>
-            </ArrowButton>
-          {:else}
-            <ArrowButton
-              class="focusOutline-sm -mb-1 flex-1 whitespace-nowrap rounded-sm text-right"
-              href={model === 'post' ? $linkTo('/blog') : $linkTo('/work')}
-              preload
-            >
-              <span class="flex items-center justify-end gap-2 text-base">
-                <Icon icon="ArrowLeft" class="mb-0.5" inline />
-                <p>{$t('Read more')}</p>
-              </span>
-            </ArrowButton>
-          {/if}
+          <ArrowButton
+            class="focusOutline-sm -mb-1 flex-1 whitespace-nowrap rounded-sm text-right"
+            href={model === 'post' ? $linkTo('/blog') : $linkTo('/work')}
+            preload
+          >
+            <span class="flex items-center justify-end gap-2 text-base">
+              {#key $isMobile}
+                <Icon icon={$isMobile ? 'ArrowUp' : 'ArrowLeft'} class="mb-0.5" inline />
+              {/key}
+              <p>{$t('Read more')}</p>
+            </span>
+          </ArrowButton>
         </div>
       </svelte:fragment>
     </svelte:component>
@@ -88,13 +61,13 @@
   @import '@styles/mixins';
 
   h1 {
-    @apply mb-4 mt-8 h-fit max-w-full font-display text-4xl font-bold text-black transition-[color];
+    @apply mb-4 mt-10 h-fit max-w-full font-display text-4xl font-bold text-black transition-[color];
 
     overflow-wrap: break-word;
     word-break: break-word;
 
     @include media(lg) {
-      @apply mt-10 text-6xl font-black;
+      @apply mt-12 text-6xl font-black;
     }
   }
 
diff --git a/svelte-app/src/components/document/content/common/sidebar.svelte b/svelte-app/src/components/document/content/common/sidebar.svelte
deleted file mode 100644
index d639d8508..000000000
--- a/svelte-app/src/components/document/content/common/sidebar.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { circIn, circOut } from 'svelte/easing';
-  import { fade } from 'svelte/transition';
-
-  import { t } from '$i18n';
-  import { summaryContents, summaryOffset } from '$lib/summary';
-
-  import Summary from '$components/document/content/common/summary.svelte';
-
-  export let element: HTMLDivElement;
-
-  $: headings = $summaryContents?.length ? $summaryContents : [];
-</script>
-
-<div
-  in:fade={{ duration: 300, delay: 50, easing: circOut }}
-  out:fade={{ duration: 200, easing: circIn }}
-  bind:this={element}
-  style="margin-top: {$summaryOffset + 27}px;"
->
-  <h1>{$t('Table of Contents')}</h1>
-  <span />
-  <Summary {headings} />
-</div>
-
-<style lang="scss">
-  div {
-    @apply sticky left-0 top-0 h-fit w-72 overflow-clip pl-8 pt-[6.4rem];
-  }
-
-  h1 {
-    @apply mt-2 w-full font-display text-lg font-bold transition-[color];
-
-    margin-bottom: 19px;
-  }
-
-  span {
-    @apply my-3 block w-full bg-dark/40 transition-[background-color];
-
-    height: 1px;
-    max-width: 75%;
-  }
-
-  :global(.dark) {
-    span {
-      @apply bg-light/40;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/document/content/common/summary.svelte b/svelte-app/src/components/document/content/common/summary.svelte
deleted file mode 100644
index 608ff5a76..000000000
--- a/svelte-app/src/components/document/content/common/summary.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-  import { firstVisibleHeading } from '$lib/summary';
-
-  import type { DocumentHeadings } from '$types';
-
-  export let headings: DocumentHeadings[];
-</script>
-
-<div class={$$props.class}>
-  {#each headings as heading}
-    <a
-      href={`#${heading.key}`}
-      class="focusOutline-sm"
-      class:active={heading.key === $firstVisibleHeading}
-    >
-      <span class="bar" />
-      <span class="indicator" />
-      <span class="sr-only">Jump to </span>
-      {heading.text}
-    </a>
-    {#if heading.children?.length}
-      <svelte:self headings={heading.children} class="ml-5" />
-    {/if}
-  {/each}
-</div>
-
-<style lang="scss">
-  a {
-    @apply relative block w-full select-none overflow-hidden text-ellipsis whitespace-nowrap rounded-sm py-2 pl-3 text-base font-medium text-dark;
-
-    &:hover,
-    &:focus-visible {
-      @apply text-accent-light;
-    }
-  }
-
-  .bar {
-    @apply absolute bottom-1.5 left-0 top-1.5 w-[2px] bg-accent-light/80;
-  }
-
-  .indicator {
-    @apply absolute bottom-1.5 left-0 top-1.5 w-full bg-accent-light/20 opacity-0 transition-opacity;
-
-    .active & {
-      @apply opacity-100;
-    }
-  }
-
-  :global(.dark) {
-    a {
-      @apply text-light;
-
-      &:hover,
-      &:focus-visible {
-        @apply text-accent-dark;
-      }
-    }
-
-    .bar {
-      @apply bg-accent-dark/80;
-    }
-
-    .indicator {
-      @apply bg-accent-dark/20;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
index 6001a37a0..acd5d3f43 100644
--- a/svelte-app/src/components/document/route.svelte
+++ b/svelte-app/src/components/document/route.svelte
@@ -5,7 +5,6 @@
   import scrollTo from '$helpers/scrollTo';
   import { t } from '$i18n';
   import { BASE_PAGE_TITLE } from '$lib/consts';
-  import { summaryContents } from '$lib/summary';
 
   import Content from '$components/document/content/content.svelte';
   import ContentWrapper from '$components/layouts/content-wrapper.svelte';
@@ -26,7 +25,6 @@
   let pageUnsubscriber: Unsubscriber;
 
   onMount(() => {
-    headings?.length && summaryContents.set(headings);
     scrollTo($page?.url);
 
     pageUnsubscriber = page.subscribe((state) => {
@@ -35,12 +33,11 @@
   });
 
   onDestroy(() => {
-    summaryContents.set(undefined);
     pageUnsubscriber?.();
   });
 
-  // $: $page?.url && scrollTo($page.url);
-  $: pageTitle = `${BASE_PAGE_TITLE} ~ ${data.title}`;
+  $: $page?.url && scrollTo($page.url);
+  $: pageTitle = `${data.title} | ${BASE_PAGE_TITLE}`;
   $: pageDescription = data?.desc
     ? data.desc.length > 160
       ? `${data.desc.slice(0, 160 - 3)}...`
diff --git a/svelte-app/src/components/layouts/content-wrapper.svelte b/svelte-app/src/components/layouts/content-wrapper.svelte
index e54c05b40..0def94be3 100644
--- a/svelte-app/src/components/layouts/content-wrapper.svelte
+++ b/svelte-app/src/components/layouts/content-wrapper.svelte
@@ -1,10 +1,4 @@
-<script lang="ts">
-  import { shouldShowSummary } from '$lib/summary';
-
-  export let wide = false;
-</script>
-
-<div id="content-wrapper" class:wide class:split={$shouldShowSummary}>
+<div id="content-wrapper">
   <slot />
 </div>
 
@@ -17,35 +11,17 @@
     --max-width: unset;
 
     @include media(lg) {
-      --max-width: 40rem;
+      --max-width: 46rem;
     }
     @include media(xl) {
-      @apply duration-300;
-      --max-width: 48rem;
-    }
-    @include media(2xl) {
       --max-width: 52rem;
     }
-
-    &.wide {
-      @include media(lg) {
-        --max-width: 48rem;
-      }
-      @include media(xl) {
-        --max-width: 56rem;
-      }
-      @include media(2xl) {
-        --max-width: 64rem;
-      }
+    @include media(2xl) {
+      --max-width: 56rem;
     }
 
     max-width: var(--max-width);
     margin-left: calc((100% - var(--max-width)) / 2);
     margin-right: calc((100% - var(--max-width)) / 2);
-
-    &.split {
-      margin-right: 0rem;
-      margin-left: calc(100% - var(--max-width));
-    }
   }
 </style>
diff --git a/svelte-app/src/components/layouts/page-transition.svelte b/svelte-app/src/components/layouts/page-transition.svelte
index 85962b488..c24882250 100644
--- a/svelte-app/src/components/layouts/page-transition.svelte
+++ b/svelte-app/src/components/layouts/page-transition.svelte
@@ -1,53 +1,22 @@
 <script lang="ts">
-  import { circIn, circOut } from 'svelte/easing';
-  import { derived } from 'svelte/store';
-  import { blur, fly } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
 
-  import { onNav } from '$helpers/navigation';
   import { BASE_ANIMATION_DURATION } from '$lib/consts';
-  import { isMobile } from '$lib/helpers/responsive';
-  import Settings from '$stores/settings';
 
   export let pathname: string | undefined;
-
-  const { reduce_motion } = Settings;
-
-  const dist = 26,
-    duration = BASE_ANIMATION_DURATION * 0.75,
-    transitionIn = derived(reduce_motion, (value) => {
-      return value
-        ? (node: Element) => blur(node, { duration, delay: duration, opacity: 0.2 })
-        : (node: Element) =>
-            fly(node, {
-              duration: duration * 2,
-              delay: duration,
-              easing: circOut,
-              x: (!$isMobile && (direction === 'backward' ? -dist : dist)) || undefined,
-              y: ($isMobile && (direction === 'backward' ? -dist : dist)) || undefined,
-              opacity: 0
-            });
-    }),
-    transitionOut = derived(reduce_motion, (value) => {
-      return value
-        ? (node: Element) => blur(node, { duration, opacity: 0.2 })
-        : (node: Element) =>
-            fly(node, {
-              duration,
-              easing: circIn,
-              x: (!$isMobile && (direction === 'backward' ? dist : -dist)) || undefined,
-              y: ($isMobile && (direction === 'backward' ? dist : -dist)) || undefined,
-              opacity: 0
-            });
-    });
-
-  $: direction = onNav(pathname || '');
 </script>
 
 <!-- TODO: This method is broken (& has been for a while), see https://github.com/sveltejs/svelte/issues/6152 -->
 <!-- For now, the alternative is to not use a Key block, and simply import this component -->
 <!-- in each individual subroute... which is Not happening, lol -->
 {#key pathname}
-  <div in:$transitionIn out:$transitionOut>
+  <div
+    in:fade={{
+      duration: BASE_ANIMATION_DURATION * 0.5,
+      delay: BASE_ANIMATION_DURATION * 0.5
+    }}
+    out:fade={{ duration: BASE_ANIMATION_DURATION * 0.5 }}
+  >
     <slot />
   </div>
 {/key}
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
index ea22b5818..ff9f1d451 100644
--- a/svelte-app/src/components/layouts/scroll-container.svelte
+++ b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -1,36 +1,17 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy } from 'svelte';
 
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
+  import { afterNavigate } from '$app/navigation';
   import { BASE_TRANSITION_DURATION } from '$lib/consts';
-  import { isDesktop } from '$lib/helpers/responsive';
-  import { shouldShowSummary, summaryVisible, visibleHeadings } from '$lib/summary';
-
-  import Sidebar from '$components/document/content/common/sidebar.svelte';
-
-  import type { Unsubscriber } from 'svelte/store';
 
   export let element: HTMLDivElement;
 
-  let timeout: ReturnType<typeof setTimeout> | undefined,
-    unsubscribe: Unsubscriber,
-    sidebarElement: HTMLDivElement;
-
-  onMount(
-    () =>
-      (unsubscribe = isDesktop.subscribe((state) => !state && summaryVisible.set(false)))
-  );
+  let timeout: ReturnType<typeof setTimeout> | undefined;
 
   onDestroy(() => {
     if (timeout) {
       clearTimeout(timeout);
     }
-    unsubscribe?.();
-  });
-
-  beforeNavigate(() => {
-    summaryVisible.set(false);
-    visibleHeadings.set(new Set());
   });
 
   afterNavigate(() => {
@@ -47,37 +28,18 @@
   });
 </script>
 
-<div
-  class:split={$shouldShowSummary}
-  tabindex="-1"
-  role="none"
-  data-test-id="scroll-container"
-  bind:this={element}
->
+<div tabindex="-1" role="none" data-test-id="scroll-container" bind:this={element}>
   <slot />
-  {#if $shouldShowSummary}
-    <Sidebar bind:element={sidebarElement} />
-  {/if}
 </div>
 
 <style lang="scss">
   @import '@styles/mixins';
 
   div {
-    @apply relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8 transition-[padding,grid-template-columns] duration-200;
-
-    @include media(xl) {
-      @apply duration-300;
-    }
-
-    @include media(lg) {
-      @apply grid;
-
-      grid-template-columns: 1fr minmax(0, 0fr);
+    @apply relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8 pt-16 transition-[padding-top] duration-300;
 
-      &.split {
-        grid-template-columns: 1fr minmax(0, 0.5fr);
-      }
+    @include media(md) {
+      @apply pt-24;
     }
   }
 </style>
diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
index e6ae53d58..289061d7d 100644
--- a/svelte-app/src/components/nav.svelte
+++ b/svelte-app/src/components/nav.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { circInOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
 
   import { afterNavigate } from '$app/navigation';
   import { linkTo } from '$i18n';
-  import { BASE_ANIMATION_DURATION, NAV_LINKS } from '$lib/consts';
-  import { isTablet } from '$lib/helpers/responsive';
+  import { NAV_LINKS } from '$lib/consts';
+  import { isMobile, isTablet } from '$lib/helpers/responsive';
   import { navOpen } from '$stores/navigation';
 
   import LanguageControls from '$components/controls/language-toggle.svelte';
@@ -34,14 +32,16 @@
 
 <div role="none">
   <nav aria-label="Main navigation" role="group">
-    <div class="flex w-full flex-row items-center justify-between">
-      <div class="flex flex-row items-center justify-start gap-4 md:gap-5">
-        <MenuToggle class="block md:hidden" />
-        <!-- <span
-          class="pointer-events-none mb-0.5 block select-none font-code text-3xl text-accent-light/70 transition-[color] dark:text-accent-dark/70 md:hidden"
-          aria-hidden="true">~</span
-        > -->
-        <span class="relative mt-0.5 h-fit w-fit lg:mt-0">
+    <MenuToggle class="inline-block md:hidden" />
+    {#if $isMobile && $navOpen}
+      <div class="flex w-full items-center justify-around">
+        {#each NAV_LINKS as link}
+          <NavLink {link} mobile />
+        {/each}
+      </div>
+    {:else}
+      <div class="flex flex-row items-center justify-start gap-4">
+        <span class="relative mt-0.5 h-fit w-fit">
           <a
             class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none transition-[color,opacity]"
             class:opacity-0={!loaded}
@@ -58,10 +58,10 @@
           </span>
         </span>
         <span
-          class="pointer-events-none mb-0.5 hidden select-none font-code text-3xl text-accent-light/70 transition-[color] dark:text-accent-dark/70 md:block"
-          aria-hidden="true">~</span
+          class="pointer-events-none mb-0.5 hidden select-none font-code text-2xl text-accent-light/80 transition-[color] dark:text-accent-dark/80 md:block"
+          aria-hidden="true">|</span
         >
-        <div class="hidden flex-row items-center justify-start gap-5 md:flex">
+        <div class="hidden flex-row items-center justify-start gap-6 md:flex" role="menu">
           {#each NAV_LINKS as link}
             <NavLink {link} />
           {/each}
@@ -71,19 +71,6 @@
         <ThemeToggle />
         <LanguageControls />
       </div>
-    </div>
-    {#if $navOpen}
-      <div
-        class="mt-3 flex w-full flex-col items-start justify-start text-2xl"
-        transition:slide|local={{
-          duration: BASE_ANIMATION_DURATION,
-          easing: circInOut
-        }}
-      >
-        {#each NAV_LINKS as link}
-          <NavLink {link} mobile />
-        {/each}
-      </div>
     {/if}
   </nav>
 </div>
@@ -95,15 +82,15 @@
     @apply fixed left-4 right-4 top-4 z-10 flex items-center justify-center;
 
     @include media(md) {
-      @apply left-6 right-6;
+      @apply left-6 right-6 top-6;
     }
   }
 
   nav {
-    @apply flex w-full max-w-5xl flex-col items-center justify-center rounded-lg border border-dark/40 bg-light/40 px-6 py-3 backdrop-blur-lg transition-[border,background-color];
+    @apply flex w-full max-w-5xl flex-row items-center justify-between gap-5 rounded-md border border-dark/40 bg-light/40 px-6 py-3 backdrop-blur-lg transition-[border,background-color];
 
     @include media(md) {
-      @apply py-2;
+      @apply flex py-2;
     }
     @include media(xl) {
       @apply max-w-6xl;
diff --git a/svelte-app/src/components/nav/nav-link.svelte b/svelte-app/src/components/nav/nav-link.svelte
index 234241996..0c5ad8d84 100644
--- a/svelte-app/src/components/nav/nav-link.svelte
+++ b/svelte-app/src/components/nav/nav-link.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-
   import { goto } from '$app/navigation';
   import { navigating, page } from '$app/stores';
   import { isLocalized, linkTo, t } from '$i18n';
-  import { BASE_ANIMATION_DURATION } from '$lib/consts';
 
   import Hoverable from '$components/hoverable.svelte';
 
@@ -56,24 +53,17 @@
     data-sveltekit-preload-code
     on:click={handleAction}
     on:keydown={(e) => {
-      if (e.code === 'Enter' || e.code === 'Space') {
+      if (e.code === 'Enter') {
         handleAction(e);
       }
     }}
   >
     <span>{$t(link.name)}</span>
-    {#if !mobile && (isActive || isHovered)}
+    {#if isActive || isHovered}
       <span
         class="absolute block rounded-md {isHovered
           ? 'bg-accent-light/60 dark:bg-accent-dark/60'
-          : 'bg-accent-light dark:bg-accent-dark'} bottom-2 left-0 right-0 h-[2px] transition-[background-color]"
-      />
-    {/if}
-    {#if mobile && (isActive || isHovered)}
-      <span
-        class="indicator"
-        class:hovered={isHovered}
-        transition:fade={{ duration: BASE_ANIMATION_DURATION / 3 }}
+          : 'bg-accent-light dark:bg-accent-dark'} -bottom-1 left-0 right-0 h-[2px] transition-[background-color] md:bottom-2"
       />
     {/if}
   </a>
@@ -87,21 +77,7 @@
       @apply text-dark;
     }
     &.mobile {
-      @apply ml-7 w-full;
-    }
-  }
-
-  .indicator {
-    @apply absolute rounded-full bg-accent-light transition-colors duration-150;
-    width: 6px;
-    height: 6px;
-    // Account for font leading :/
-    top: calc(50% + 1px);
-    left: -14px;
-    transform: translate(-50%, -50%);
-
-    &.hovered {
-      @apply bg-accent-light/60;
+      @apply my-[1px] w-fit p-0;
     }
   }
 
@@ -113,13 +89,5 @@
         @apply text-light;
       }
     }
-
-    .indicator {
-      @apply bg-accent-dark;
-
-      &.hovered {
-        @apply bg-accent-dark/60;
-      }
-    }
   }
 </style>
diff --git a/svelte-app/src/components/portable-text/footnote.svelte b/svelte-app/src/components/portable-text/footnote.svelte
index 01f7fa255..240eb0a97 100644
--- a/svelte-app/src/components/portable-text/footnote.svelte
+++ b/svelte-app/src/components/portable-text/footnote.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+  import { t } from '$lib/helpers/i18n';
+
+  import Tooltip from '$components/tooltip.svelte';
+
   import type { MarkComponentProps } from '@portabletext/svelte';
   import type {
     PortableTextBlock,
@@ -33,19 +37,22 @@
 </script>
 
 <span>
-  <slot />&nbsp;<sup
-    ><a
-      href={`#note-${portableText.value._key}`}
-      id="src-{portableText.value._key}"
-      aria-label="Go to footnote"
-      on:click={(e) => customScrollTo(e, `note-${portableText.value._key}`)}
-      on:keydown={(e) => {
-        if (e.code === 'Space' || e.code === 'Enter') {
-          customScrollTo(e, `note-${portableText.value._key}`);
-        }
-      }}>{number}</a
-    ></sup
-  >
+  <slot />&nbsp;
+  <Tooltip text={$t('Go to footnote')} delay={200}>
+    <sup
+      ><a
+        href={`#note-${portableText.value._key}`}
+        id="src-{portableText.value._key}"
+        aria-label={$t('Go to footnote')}
+        on:click={(e) => customScrollTo(e, `note-${portableText.value._key}`)}
+        on:keydown={(e) => {
+          if (e.code === 'Space' || e.code === 'Enter') {
+            customScrollTo(e, `note-${portableText.value._key}`);
+          }
+        }}>{number}</a
+      ></sup
+    >
+  </Tooltip>
 </span>
 
 <style lang="scss">
diff --git a/svelte-app/src/components/portable-text/portable-text.svelte b/svelte-app/src/components/portable-text/portable-text.svelte
index d8a708a80..fe046cc53 100644
--- a/svelte-app/src/components/portable-text/portable-text.svelte
+++ b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -6,7 +6,7 @@
   import Logger from '$lib/logger';
 
   import Icon from '$components/icon.svelte';
-  import Link from '$components/link.svelte';
+  import Tooltip from '$components/tooltip.svelte';
 
   import { PortableText } from '@portabletext/svelte';
 
@@ -42,19 +42,19 @@
 
   let ptContainer: HTMLElement;
 
-  // const customScrollTo = (event: Event, id: string) => {
-  //   event.preventDefault();
-  //   const element = document.querySelector(`#${id}`);
-  //   if (element) {
-  //     window.history.pushState(null, '', `#${id}`);
-  //     element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  //   }
-  // };
-
   onMount(() => {
     parseEmoji(ptContainer);
   });
 
+  const customScrollTo = (event: Event, id: string) => {
+    event.preventDefault();
+    const element = document.querySelector(`#${id}`);
+    if (element) {
+      window.history.pushState(null, '', `#${id}`);
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  };
+
   $: footnotes = ((text: (PortableTextBlock | ArbitraryTypedObject)[]) => {
     if (!text || typeof text === 'string') {
       return [] as FootnoteProps[];
@@ -78,7 +78,7 @@
   })(text);
 </script>
 
-<div bind:this={ptContainer}>
+<div bind:this={ptContainer} class={$$props.class ?? ''}>
   {#if text}
     {#if plainText}
       <PortableText
@@ -141,13 +141,20 @@
               <li class="list-item">
                 <span class="flex flex-row flex-wrap items-center break-all">
                   <svelte:self text={note.note} plaintext />
-                  <Link
-                    class="mb-0.5 ml-2 inline"
-                    id={`note-${note._key}`}
-                    href={`#src-${note._key}`}
-                    aria-label={$t('Go to footnote source')}
-                    ><Icon icon="arrow-bar-up" width={18} inline /></Link
-                  >
+                  <Tooltip text={$t('Go to footnote source')} delay={200}>
+                    <a
+                      class="ml-2"
+                      href={`#src-${note._key}`}
+                      id="note-{note._key}"
+                      aria-label="Go to footnote source"
+                      on:click={(e) => customScrollTo(e, `src-${note._key}`)}
+                      on:keydown={(e) => {
+                        if (e.code === 'Space' || e.code === 'Enter') {
+                          customScrollTo(e, `src-${note._key}`);
+                        }
+                      }}><Icon icon="arrow-bar-up" width={18} inline /></a
+                    >
+                  </Tooltip>
                 </span>
               </li>
             {/each}
diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
index b0d7f51c5..b364f2c99 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -1,59 +1,10 @@
 <script lang="ts">
-  import { getContext, onDestroy, onMount } from 'svelte';
-
-  import Logger from '$lib/logger';
-  import { headingElements, visibleHeadings } from '$lib/summary';
-
   import Icon from '$components/icon.svelte';
 
   import type { BlockComponentProps } from '@portabletext/svelte';
 
   export let portableText: BlockComponentProps;
 
-  let observer: IntersectionObserver, element: HTMLAnchorElement;
-
-  const scrollContainer = (getContext('getScrollContainer') as () => HTMLDivElement)();
-
-  onMount(() => {
-    headingElements.update((state) => {
-      state.add(element);
-      return state;
-    });
-
-    observer = new IntersectionObserver(
-      (entries) => {
-        if (!value._key?.length) {
-          Logger.warn("Heading is missing '_key' property");
-          return;
-        }
-
-        visibleHeadings.update((state) => {
-          if (entries[0]?.isIntersecting) {
-            state.add(value._key!);
-            return state;
-          } else {
-            state.delete(value._key!);
-            return state;
-          }
-        });
-      },
-      {
-        rootMargin: '-250px 0px 0px 0px',
-        root: scrollContainer,
-        threshold: [1]
-      }
-    );
-    observer.observe(element);
-  });
-
-  onDestroy(() => {
-    observer?.disconnect();
-    headingElements.update((state) => {
-      state.delete(element);
-      return state;
-    });
-  });
-
   $: ({ value, indexInParent } = portableText);
   $: ({ style } = value);
 </script>
@@ -63,7 +14,6 @@
   class:first={indexInParent === 0}
   id={`heading-${value._key}`}
   href={`#${value._key}`}
-  bind:this={element}
 >
   <Icon icon="link" class="link-icon" aria-hidden="true" />
   <svelte:element this={style}>
diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
index 4f575744b..47aae36f2 100644
--- a/svelte-app/src/languages/en.json
+++ b/svelte-app/src/languages/en.json
@@ -110,6 +110,7 @@
   "my blog": "my blog",
   "my work": "my work",
   "now": "now",
+  "present": "present",
   "to": "to",
   "what I'm up to right now": "what I'm up to right now",
   "{duration} ago": "{duration} ago",
diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
index eb36d37b1..05ae62dcb 100644
--- a/svelte-app/src/languages/fr.json
+++ b/svelte-app/src/languages/fr.json
@@ -110,6 +110,7 @@
   "my blog": "mon blog",
   "my work": "mon travail",
   "now": "maintenant",
+  "present": "présent",
   "to": "à",
   "what I'm up to right now": "ce que je fais a présent",
   "{duration} ago": "il y a {duration}",
diff --git a/svelte-app/src/lib/helpers/navigation.ts b/svelte-app/src/lib/helpers/navigation.ts
index 3587b1dff..c4543d2e6 100644
--- a/svelte-app/src/lib/helpers/navigation.ts
+++ b/svelte-app/src/lib/helpers/navigation.ts
@@ -55,6 +55,6 @@ export const pageTitle = derived([isLocalized, t, page], (vals) => {
     route = APP_ROUTES.find((r) => r.path === pathname);
 
   return route?.name?.length
-    ? `${BASE_PAGE_TITLE} ~ ${vals[1](route.name)}`
+    ? `${vals[1](route.name)} | ${BASE_PAGE_TITLE}`
     : BASE_PAGE_TITLE;
 });
diff --git a/svelte-app/src/lib/icons.ts b/svelte-app/src/lib/icons.ts
index 927d57541..5c9548ca5 100644
--- a/svelte-app/src/lib/icons.ts
+++ b/svelte-app/src/lib/icons.ts
@@ -4,16 +4,17 @@ import Alert from 'pixelarticons/svg/alert.svg';
 import ArrowBarUp from 'pixelarticons/svg/arrow-bar-up.svg';
 import ArrowLeft from 'pixelarticons/svg/arrow-left.svg';
 import ArrowRight from 'pixelarticons/svg/arrow-right.svg';
+import ArrowUp from 'pixelarticons/svg/arrow-up.svg';
+import BackBurger from 'pixelarticons/svg/backburger.svg';
 import Cast from 'pixelarticons/svg/cast.svg';
 import Check from 'pixelarticons/svg/check.svg';
 import ChevronDown from 'pixelarticons/svg/chevron-down.svg';
-import CloseBox from 'pixelarticons/svg/close-box.svg';
 import Code from 'pixelarticons/svg/code.svg';
 import Copy from 'pixelarticons/svg/copy.svg';
 import Downasaur from 'pixelarticons/svg/downasaur.svg';
+import ForwardBurger from 'pixelarticons/svg/forwardburger.svg';
 import Link from 'pixelarticons/svg/link.svg';
 import MailArrowRight from 'pixelarticons/svg/mail-arrow-right.svg';
-import Menu from 'pixelarticons/svg/menu.svg';
 import MoonStars from 'pixelarticons/svg/moon-stars.svg';
 import Open from 'pixelarticons/svg/open.svg';
 import Reload from 'pixelarticons/svg/reload.svg';
@@ -29,16 +30,17 @@ const icons = {
   'arrow-bar-up': ArrowBarUp,
   'arrow-left': ArrowLeft,
   'arrow-right': ArrowRight,
+  'arrow-up': ArrowUp,
+  'back-burger': BackBurger,
   cast: Cast,
   check: Check,
   'chevron-down': ChevronDown,
-  'close-box': CloseBox,
   code: Code,
   copy: Copy,
   downasaur: Downasaur,
+  'forward-burger': ForwardBurger,
   link: Link,
   'mail-arrow-right': MailArrowRight,
-  menu: Menu,
   'moon-stars': MoonStars,
   open: Open,
   reload: Reload,
diff --git a/svelte-app/src/lib/summary.ts b/svelte-app/src/lib/summary.ts
deleted file mode 100644
index 8228400c1..000000000
--- a/svelte-app/src/lib/summary.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { derived, writable } from 'svelte/store';
-
-import { page } from '$app/stores';
-import { isDesktop } from '$lib/helpers/responsive';
-
-import type { DocumentHeadings } from '$types';
-
-const recursiveFlattenHeadings = (headings: DocumentHeadings[]): DocumentHeadings[] => {
-  return headings.flatMap((heading) => {
-    return heading.children?.length
-      ? [heading, ...recursiveFlattenHeadings(heading.children)]
-      : [heading];
-  });
-};
-
-let previousFirstVisibleHeading: string | undefined;
-
-const summaryVisible = writable(false),
-  summaryContents = writable<DocumentHeadings[] | undefined>(undefined),
-  headingElements = writable<Set<HTMLElement>>(new Set()),
-  visibleHeadings = writable<Set<string>>(new Set()),
-  firstVisibleHeading = derived(
-    [visibleHeadings, summaryContents, page],
-    ([_visibleHeadings, _summaryContents, _page]) => {
-      if (!_summaryContents?.length || !_visibleHeadings?.size) {
-        return previousFirstVisibleHeading;
-      }
-
-      const flatSummaryContents = recursiveFlattenHeadings(_summaryContents),
-        pageHash = _page.url.hash,
-        pageHashHeading = flatSummaryContents.find((heading) => {
-          return heading.key === pageHash.slice(1);
-        });
-
-      let firstVisibleHeading = flatSummaryContents.find((heading) =>
-        _visibleHeadings.has(heading.key)
-      );
-
-      if (pageHashHeading && _visibleHeadings.has(pageHashHeading?.key)) {
-        const pageHashHeadingIndex = flatSummaryContents.indexOf(pageHashHeading),
-          firstVisibleHeadingIndex = firstVisibleHeading
-            ? flatSummaryContents.indexOf(firstVisibleHeading)
-            : -1;
-        if (pageHashHeadingIndex > firstVisibleHeadingIndex) {
-          firstVisibleHeading = pageHashHeading;
-        }
-      }
-
-      firstVisibleHeading?.key && (previousFirstVisibleHeading = firstVisibleHeading.key);
-      return firstVisibleHeading?.key ?? previousFirstVisibleHeading;
-    }
-  ),
-  summaryOffset = writable(0),
-  shouldShowSummary = derived(
-    [isDesktop, summaryVisible, summaryContents],
-    ([isDesktop, summaryVisible, summaryContents]) => {
-      return isDesktop && summaryVisible && summaryContents?.length;
-    }
-  );
-
-export {
-  firstVisibleHeading,
-  headingElements,
-  shouldShowSummary,
-  summaryContents,
-  summaryOffset,
-  summaryVisible,
-  visibleHeadings
-};
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index fbb5449b2..48918ac4f 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -2,9 +2,8 @@
   import '../app.scss';
 
   import { onDestroy, onMount, setContext } from 'svelte';
-  import { circInOut } from 'svelte/easing';
   import { get } from 'svelte/store';
-  import { fly, slide } from 'svelte/transition';
+  import { fly } from 'svelte/transition';
 
   import { classList } from 'svelte-body';
   import { useMediaQuery } from 'svelte-breakpoints';
@@ -13,10 +12,9 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { navigating, page } from '$app/stores';
   import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
-  import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
+  import { APP_LANGS, DEFAULT_APP_LANG } from '$lib/consts';
   import { ENV, SELF_BASE_URL } from '$lib/env';
   import { setState as setMenuState, state as menuState } from '$lib/helpers/menu';
-  import { navOpen } from '$stores/navigation';
   import Settings, { loading } from '$stores/settings';
 
   import ContextMenu from '$components/context-menu.svelte';
@@ -34,7 +32,7 @@
 
   const { theme, reduce_motion } = Settings,
     skipToContent = (e: KeyboardEvent) => {
-      if (e.code === 'Enter') {
+      if (e.code === 'Enter' || e.code === 'Space') {
         e.preventDefault();
         const content = document.getElementById('content-wrapper'),
           focusable = content?.querySelectorAll(
@@ -156,21 +154,9 @@
 >
   <Nav loaded={appLoaded && !$loading} />
   <ScrollContainer bind:element={scrollContainer}>
-    <!-- Janky but works for now lmao -->
-    {#if $navOpen}
-      <span
-        class="shim"
-        transition:slide={{
-          duration: BASE_ANIMATION_DURATION,
-          easing: circInOut
-        }}
-      />
-    {/if}
-    <div>
-      <PageTransition pathname={data.pathname}>
-        <slot />
-      </PageTransition>
-    </div>
+    <PageTransition pathname={data.pathname}>
+      <slot />
+    </PageTransition>
   </ScrollContainer>
 </div>
 
@@ -178,11 +164,7 @@
   @import '@styles/mixins';
   @import '@styles/variables';
 
-  .shim {
-    @apply block h-52 w-full;
-  }
-
-  span:not(.shim) {
+  span {
     @apply absolute left-1/2 top-0 z-50 -mt-14 -translate-x-1/2 cursor-pointer rounded-md bg-light px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color];
 
     @include focus-state(sm);
@@ -198,25 +180,11 @@
     @include media(lg) {
       @apply text-lg;
     }
-
-    div {
-      @apply relative mt-16;
-
-      width: calc(100% - 2rem);
-
-      @include media(md) {
-        @apply mt-20;
-      }
-
-      @include media(lg) {
-        @apply mt-16;
-      }
-    }
   }
 
   :global(.dark) {
-    span:not(.shim) {
-      @apply bg-dark text-light;
+    span {
+      @apply bg-black text-light;
 
       @include focus-state(sm, dark);
     }
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
index 0ace545f2..d98e9e015 100644
--- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -29,13 +29,13 @@
 </svelte:head>
 
 <ContentWrapper>
-  <HeadedBlock icon="User" heading={$t('About me')}>
+  <HeadedBlock heading={$t('About me')}>
     <PortableText text={data.about.bio} />
   </HeadedBlock>
 
   <Divider />
 
-  <HeadedBlock icon="list" heading={$t('Recent posts')}>
+  <HeadedBlock heading={$t('Recent posts')}>
     {#if data.posts.length}
       <div class="item-list" role="group" aria-label={$t('Posts')}>
         {#each data.posts as post}
@@ -60,7 +60,7 @@
     {/if}
   </HeadedBlock>
 
-  <HeadedBlock icon="list" heading={$t('Recent projects')}>
+  <HeadedBlock heading={$t('Recent projects')}>
     {#if data.projects.length}
       <div class="item-list" role="group" aria-label={$t('Projects')}>
         {#each data.projects as project}
diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
index d23bd70c1..616864ce2 100644
--- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -4,6 +4,7 @@
   import { pageTitle } from '$helpers/navigation';
 
   import EmptyContent from '$components/empty-content.svelte';
+  import HeadedBlock from '$components/headings/headed-block.svelte';
   import ContentWrapper from '$components/layouts/content-wrapper.svelte';
   import ListItem from '$components/lists/list-item.svelte';
 
@@ -27,34 +28,33 @@
   <meta property="twitter:description" content={description} />
 </svelte:head>
 
-<ContentWrapper wide>
-  <h1 class="mb-8 mt-10 font-code text-3xl font-black transition-[color]">
-    {$t('Recent posts')}
-  </h1>
-  {#if data.posts.length}
-    <div class="mt-12 flex flex-col gap-14">
-      {#each sortedPosts as yearObj}
-        <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
-          <h1 class="min-w-[6rem] font-code text-4xl font-black transition-[color]">
-            {yearObj.year}
-          </h1>
-          {#if yearObj.items.length}
-            <div
-              class="ml-1 mt-2 flex w-full flex-col items-start justify-start gap-4 md:ml-0"
-            >
-              {#each yearObj.items as item}
-                <ListItem document={item} />
-              {/each}
-            </div>
-          {:else}
-            <p class="p-4 font-code">{$t('No content')}</p>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {:else}
-    <div class="flex w-full flex-row items-center justify-center">
-      <EmptyContent />
-    </div>
-  {/if}
+<ContentWrapper>
+  <HeadedBlock heading={$t('Recent posts')}>
+    {#if data.posts.length}
+      <div class="mt-8 flex flex-col gap-10">
+        {#each sortedPosts as yearObj}
+          <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
+            <h1 class="min-w-[6rem] font-code text-4xl font-black transition-[color]">
+              {yearObj.year}
+            </h1>
+            {#if yearObj.items.length}
+              <div
+                class="ml-1 mt-2 flex w-full flex-col items-start justify-start gap-4 md:ml-0"
+              >
+                {#each yearObj.items as item}
+                  <ListItem document={item} />
+                {/each}
+              </div>
+            {:else}
+              <p class="p-4 font-code">{$t('No content')}</p>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="flex w-full flex-row items-center justify-center">
+        <EmptyContent />
+      </div>
+    {/if}
+  </HeadedBlock>
 </ContentWrapper>
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
index afb3d1ea7..b3b75fac2 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -3,8 +3,10 @@
   import { t } from '$i18n';
   import { sortDocumentsByYear } from '$lib/helpers/date';
 
-  import NewTimeline from '$components/about/timeline.svelte';
+  import Timeline from '$components/about/timeline.svelte';
+  import Divider from '$components/divider.svelte';
   import EmptyContent from '$components/empty-content.svelte';
+  import HeadedBlock from '$components/headings/headed-block.svelte';
   import ContentWrapper from '$components/layouts/content-wrapper.svelte';
   import ListItem from '$components/lists/list-item.svelte';
 
@@ -31,43 +33,45 @@
   <meta property="twitter:description" content={description} />
 </svelte:head>
 
-<ContentWrapper wide>
-  <h1 class="mb-8 mt-10 font-code text-3xl font-black transition-[color]">
-    {$t("Where I've worked")}
-  </h1>
-  {#if about.timeline?.length}
-    <NewTimeline data={about.timeline} />
-  {:else}
-    <div class="w-full">
-      <EmptyContent />
-    </div>
-  {/if}
+<ContentWrapper>
+  <HeadedBlock heading={$t("Where I've worked")}>
+    {#if about.timeline?.length}
+      <Timeline data={about.timeline} />
+    {:else}
+      <div class="w-full">
+        <EmptyContent />
+      </div>
+    {/if}
+  </HeadedBlock>
 
-  <h1 class="mb-8 mt-10 font-code text-3xl font-black transition-[color]">
-    {$t('Projects & Talks')}
-  </h1>
-  {#if projects.length}
-    <div class="flex flex-col gap-14">
-      {#each sortedProjects as yearObj}
-        <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
-          <h1 class="min-w-[6rem] font-code text-4xl font-black transition-[color]">
-            {yearObj.year}
-          </h1>
-          {#if yearObj.items.length}
-            <div class="ml-1 mt-2 flex flex-col items-start justify-start gap-4 md:ml-0">
-              {#each yearObj.items as item}
-                <ListItem document={item} />
-              {/each}
-            </div>
-          {:else}
-            <p class="p-4 font-code">{$t('No content')}</p>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {:else}
-    <div class="w-full">
-      <EmptyContent />
-    </div>
-  {/if}
+  <Divider class="!-mt-2" />
+
+  <HeadedBlock heading={$t('Projects & Talks')}>
+    {#if projects.length}
+      <div class="mt-8 flex flex-col gap-10">
+        {#each sortedProjects as yearObj}
+          <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
+            <h1 class="min-w-[6rem] font-code text-4xl font-black transition-[color]">
+              {yearObj.year}
+            </h1>
+            {#if yearObj.items.length}
+              <div
+                class="ml-1 mt-2 flex flex-col items-start justify-start gap-4 md:ml-0"
+              >
+                {#each yearObj.items as item}
+                  <ListItem document={item} />
+                {/each}
+              </div>
+            {:else}
+              <p class="p-4 font-code">{$t('No content')}</p>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="w-full">
+        <EmptyContent />
+      </div>
+    {/if}
+  </HeadedBlock>
 </ContentWrapper>
diff --git a/svelte-app/src/styles/_colors.scss b/svelte-app/src/styles/_colors.scss
index ef2d29ac8..9e7ca30a0 100644
--- a/svelte-app/src/styles/_colors.scss
+++ b/svelte-app/src/styles/_colors.scss
@@ -3,5 +3,5 @@ $white: #F5F5F5;
 $dark: #182542;
 $light: #EFEFEF;
 
-$accent-light: #2343CE;
-$accent-dark: #E7FE7D;
+$accent-light: #235bd3;
+$accent-dark: #d1fe7d;
diff --git a/svelte-app/tailwind.config.cjs b/svelte-app/tailwind.config.cjs
index 6b7ea7d16..cac97375b 100644
--- a/svelte-app/tailwind.config.cjs
+++ b/svelte-app/tailwind.config.cjs
@@ -12,8 +12,8 @@ module.exports = {
         dark: '#182542',
         light: '#EFEFEF',
         accent: {
-          light: '#2343CE',
-          dark: '#E7FE7D'
+          light: '#235bd3',
+          dark: '#d1fe7d'
         }
       },
       fontFamily: {