patx/afterdarklabs

fix responsive portfolio layout

Commit 23b0360 · patx · 2026-08-31T21:26:35-04:00

Changeset

23b036089c67d8d30ba504029aaede932310c295

Parents

ff5d15359df90d890c1ccf5b74b22a39cb42c7c8

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/docs/index.html b/docs/index.html
index 8690e56..6f2a7a3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,11 +37,16 @@
             --neon: #ccff00;
             --page-bg: #17212b;
             --page-bg-rgb: 23, 33, 43;
+            --site-nav-height: 5.75rem;
         }
 
         html { scroll-behavior: smooth; }
 
         @media (min-width: 1024px) {
+            :root {
+                --site-nav-height: 5.5rem;
+            }
+
             html {
                 font-size: 125%;
             }
@@ -352,7 +357,7 @@
 
         .portfolio-cover-title {
             padding: clamp(1.5rem, 4vw, 3rem);
-            font-size: clamp(3rem, 9vw, 6rem);
+            font-size: clamp(2.75rem, 6vw, 4rem);
             font-weight: 700;
             line-height: 0.86;
             letter-spacing: -0.07em;
@@ -379,8 +384,19 @@
         }
 
         @media (min-width: 768px) {
+            .work-scroll-ready .work-stage {
+                top: var(--site-nav-height);
+                height: calc(100svh - var(--site-nav-height));
+                min-height: 0;
+                padding-block: clamp(1rem, 3svh, 2rem);
+            }
+
+            .work-scroll-ready #work-scroller {
+                padding-bottom: 0;
+            }
+
             #work-scroller > article {
-                width: 38rem;
+                width: clamp(25rem, calc(125svh - 12rem), 38rem);
             }
         }
 
@@ -391,6 +407,7 @@
 
             .work-scroll-ready .work-stage {
                 position: relative;
+                top: auto;
                 height: auto;
                 min-height: 0;
                 overflow: visible;