some fixes

Author: kavinvalli

app/components/contributions.tsx

@@ -21,10 +21,8 @@ export async function Contributions({ login }: { login: string }) {
   return (
     <section className="section" data-reveal>
       <div className="flex flex-col gap-0 mb-4">
-        <div className={s.sectionHead}>
-          <p className="mb-0 flex items-baseline justify-between gap-4">
-            Contributions
-          </p>
+        <div className="mb-0 flex items-baseline justify-between gap-4">
+          <p className={s.sectionLabel}>Contributions</p>
           <a
             className={s.sectionAll}
             href={`https://github.com/${login}`}

app/components/nav.tsx

@@ -16,10 +16,10 @@ export function Nav() {
   const pathname = usePathname();
 
   return (
-    <nav
-      aria-label="Main"
-      className="sticky top-0 z-10 bg-background/80 backdrop-blur-md backdrop-saturate-150"
-    >
+    <nav aria-label="Main" className="sticky top-0 z-10">
+      {/* the frosted panel, on its own layer so it can fade in on scroll while
+          the links stay put — see .nav-surface in globals */}
+      <span aria-hidden="true" className="nav-surface" />
       <div className="mx-auto flex w-full max-w-(--width-wide) gap-6 px-gutter py-[1.1rem]">
         {items.map((item) => {
           const active =

app/globals.css

@@ -40,6 +40,12 @@
     scroll-behavior: smooth;
     color-scheme: dark;
     -webkit-tap-highlight-color: transparent;
+    /* `clip`, not `hidden`: hidden would make this a scroll container and
+       break the sticky nav. clip pairs with a visible vertical axis without
+       coercing it, so the page still scrolls down but can never scroll
+       sideways — whatever overhangs. The hover cards are centred on their
+       link and a link near the right edge pushes one past the edge. */
+    overflow-x: clip;
   }
 
   body {
@@ -51,10 +57,14 @@
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
+    /* Pools behind the page heading rather than sitting off the top edge —
+       every route puts its title in the same place, so one gradient anchored
+       to the top of the document lands behind all of them. The cursor glow
+       adds to this where the pointer is, which is where it came from. */
     background-image: radial-gradient(
-      60rem 30rem at 50% -12rem,
-      --alpha(var(--color-accent) / 8%),
-      transparent 70%
+      38rem 20rem at 38% 5rem,
+      --alpha(var(--color-accent) / 14%),
+      transparent 72%
     );
     background-repeat: no-repeat;
   }
@@ -371,6 +381,40 @@ dialog[open]::backdrop {
   }
 }
 
+/* The nav's frosted panel. Solid by default so that any browser without
+   scroll-driven animations keeps today's behaviour — legible links over a
+   backdrop — and only browsers that can do the fade get the transparent top.
+   Its own layer rather than a background on <nav>, because opacity is the one
+   property that fades a backdrop-filter cleanly. */
+.nav-surface {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: --alpha(var(--color-background) / 80%);
+  backdrop-filter: blur(12px) saturate(1.5);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: scroll()) {
+    .nav-surface {
+      animation: nav-surface-in linear both;
+      animation-timeline: scroll(root block);
+      /* fully solid within the first few rem of scrolling, so it isn't
+         still fading in halfway down the page */
+      animation-range: 0 4rem;
+    }
+  }
+}
+
+@keyframes nav-surface-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 /* Reading position, drawn straight from the scroll offset. No JS, no scroll
    listener — and in browsers without scroll-driven animations the bar simply
    stays at scaleX(0) and is never seen. */