sticky scroll fixes

src/components/header.svelte

@@ -1,22 +1,22 @@
-<header class="content sticky top-0 z-20 grid bg-gray-950 py-2 font-mono drop-shadow sm:px-2">
+<header
-  <a
+  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"
-    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>
   <div class="col-[content] grid grid-cols-3">
     <div class="flex items-center gap-8">
       <!--  -->
     </div>
 
     <div class="flex items-center justify-center">
-      <a href="/" class="text-center"> Progress tracker </a>
+      <a
+        href="/"
+        class="block text-center underline decoration-transparent decoration-1 transition-colors hover:decoration-pink-600"
+      >
+        Progress tracker
+      </a>
     </div>
 
     <div class="flex items-center justify-end gap-2 py-2 md:gap-4">
       <a
-        class="uppercase"
         href="https://git.skaarup.dev/nikiskaarup/progress-tracker-v3"
         target="_blank"
         referrerpolicy="no-referrer"

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>

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

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));
 }
 

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}