From 1c8621b6f9909ea5eda7288709ba000e9d172a26 Mon Sep 17 00:00:00 2001
From: Niki Wix Skaarup <niki@skaarup.dev>
Date: Sat, 5 Apr 2025 23:04:13 +0200
Subject: [PATCH] sticky scroll fixes

---
 src/components/header.svelte         | 12 ++++--------
 src/components/main.svelte           |  5 ++++-
 src/components/progress-table.svelte |  2 +-
 src/index.css                        |  2 +-
 src/index.svelte                     |  6 ++++++
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/header.svelte b/src/components/header.svelte
index f3effc7..eb58b55 100644
--- a/src/components/header.svelte
+++ b/src/components/header.svelte
@@ -1,10 +1,6 @@
-<header class="content sticky top-0 z-20 grid bg-gray-950 py-2 font-mono drop-shadow sm:px-2">
-  <a
-    href="#main-content"
-    class="absolute top-0 left-0 z-50 rounded-b-sm bg-indigo-500 px-1 pt-0.5 text-xs text-gray-100 not-focus:sr-only"
-  >
-    Skip to main content
-  </a>
+<header
+  class="content sticky top-0 z-20 grid h-(--header-height) border-b border-gray-950 bg-gray-950 py-2 font-mono sm:px-2"
+>
   <div class="col-[content] grid grid-cols-3">
     <div class="flex items-center gap-8">
       <!--  -->
@@ -13,7 +9,7 @@
     <div class="flex items-center justify-center">
       <a
         href="/"
-        class="block text-center capitalize underline decoration-transparent decoration-1 transition-colors hover:decoration-pink-600"
+        class="block text-center underline decoration-transparent decoration-1 transition-colors hover:decoration-pink-600"
       >
         Progress tracker
       </a>
diff --git a/src/components/main.svelte b/src/components/main.svelte
index bade871..2158131 100644
--- a/src/components/main.svelte
+++ b/src/components/main.svelte
@@ -4,6 +4,9 @@
   const { children }: { children?: Snippet } = $props();
 </script>
 
-<main id="main-content" class="content grid min-h-(--main-min-height) py-4">
+<main
+  id="main-content"
+  class="content grid min-h-(--main-min-height) scroll-m-(--header-height) py-4"
+>
   {@render children?.()}
 </main>
diff --git a/src/components/progress-table.svelte b/src/components/progress-table.svelte
index 9a8d903..0539d30 100644
--- a/src/components/progress-table.svelte
+++ b/src/components/progress-table.svelte
@@ -77,7 +77,7 @@
         <div class="py-2 text-xs text-gray-400/50">{entry.id}</div>
         <a
           href={entry.href}
-          class="line-clamp-1 block px-2 py-1 text-nowrap text-ellipsis text-gray-200 capitalize transition-colors hover:text-pink-600 hover:underline"
+          class="line-clamp-1 block px-2 py-1 text-nowrap text-ellipsis text-gray-200 capitalize underline decoration-transparent decoration-1 transition-colors hover:decoration-pink-600"
           target="_blank"
           title={entry.name}
           referrerpolicy="no-referrer">{entry.name}</a
diff --git a/src/index.css b/src/index.css
index 1c0ea34..acc8c12 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,7 +9,7 @@
 }
 
 :root {
-  --header-height: calc(var(--spacing) * 16);
+  --header-height: --spacing(16);
   --main-min-height: calc(100dvh - var(--header-height));
 }
 
diff --git a/src/index.svelte b/src/index.svelte
index 75842cd..c0a66d6 100644
--- a/src/index.svelte
+++ b/src/index.svelte
@@ -7,6 +7,12 @@
   import { userstate } from './shared.svelte';
 </script>
 
+<a
+  href="#main-content"
+  class="absolute top-0 left-0 z-50 rounded-b-sm bg-pink-600 px-1 pt-0.5 text-xs text-gray-100 not-focus:sr-only focus:outline-none"
+>
+  Skip to main content
+</a>
 <Header></Header>
 <Main>
   {#if !userstate.isLoggedIn}