From b48d9986d1957f8c8aefc02f4d9b2f33f1f47662 Mon Sep 17 00:00:00 2001
From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com>
Date: Wed, 5 Jul 2023 05:24:25 +0700
Subject: [PATCH] ux: add sticky snippet titles

---
 index.html     |  6 +++++-
 src/App.svelte | 13 ++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index cd81ce1..91978d8 100644
--- a/index.html
+++ b/index.html
@@ -53,10 +53,14 @@
         font-display: swap;
       }
 
+      :root {
+        --bg-color: rgb(17 24 39);
+      }
+
       html {
         font-family: "Mona Sans" !important;
         /* bg-gray-900 */
-        background-color: rgb(17 24 39);
+        background-color: var(--bg-color);
         color: #fff;
       }
     </style>
diff --git a/src/App.svelte b/src/App.svelte
index 8cfc7e0..b2fa8bb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -128,7 +128,7 @@
   <Aside />
   <div class="pb-8 w-10 grow">
     <div
-      class="flex px-6 lg:px-20 py-2 sticky top-0 z-10 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto"
+      class="flex px-6 lg:px-20 py-2 sticky top-0 z-20 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto"
     >
       {#each frameworks as framework (framework.id)}
         <button
@@ -146,7 +146,10 @@
       {/each}
     </div>
 
-    <main id="main-content" class="px-6 md:px-14 lg:px-20 max-w-full pt-10">
+    <main
+      id="main-content"
+      class="relative px-6 md:px-14 lg:px-20 max-w-full pt-10"
+    >
       <div>
         {#if frameworkIdsSelected.size === 0}
           <div class="space-y-4">
@@ -188,7 +191,11 @@
                       "." +
                       snippet.snippetId}
                   >
-                    <h2 id={snippet.snippetId} class="header-anchor">
+                    <!-- bg-[var(--bg-color)] -->
+                    <h2
+                      id={snippet.snippetId}
+                      class="header-anchor sticky py-2 top-[2.9531rem] z-10 bg-[var(--bg-color)]"
+                    >
                       {snippet.title}
                       <a
                         href={"#" + snippet.snippetId}