desktop poc

argyleink · Sep 21, 2023 · 2016608 · 2016608
1 parent 61c3c54
commit 2016608
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git a/docsite/index.css b/docsite/index.css
@@ -27,13 +27,14 @@ body {
   display: grid;
   justify-items: flex-start;
   grid-template-columns:
-    var(--size-8) 
+    var(--size-3) 
+    var(--size-content-1) 
     calc(100% - 2 * var(--size-8)) 
     var(--size-8) 
   ;
 
   & > * {
-    grid-column: 2;
+    grid-column: 3;
   }
 
   & > .place-full {
@@ -47,6 +48,10 @@ body {
       calc(100% - 2 * var(--size-3))  
       var(--size-3) 
     ;
+
+    & > * {
+      grid-column: 2;
+    }
   }
 }
 
@@ -88,6 +93,7 @@ header {
 }
 
 nav {
+  grid-column: 2 / span 2;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -400,19 +406,20 @@ pre[class*="language-"] {
 }
 
 .module-list {
+  grid-column: 2;
+  grid-row: 2;
   position: sticky;
   z-index: var(--layer-1);
-  bottom: 0;
-  overflow-x: auto;
+  top: 0;
+  overflow-y: auto;
 
-  background-image: linear-gradient(to top, hsl(var(--gray-9-hsl) / 98%) 1ch, 75%, hsl(var(--gray-9-hsl) / 0%));
+  background-image: linear-gradient(to right, hsl(var(--gray-9-hsl) / 98%) 1ch, 75%, hsl(var(--gray-9-hsl) / 0%));
   margin-block-start: var(--size-8);
-  padding-block: var(--size-5) var(--size-2);
-  padding-inline: var(--size-2) var(--size-4);
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  gap: var(--size-4);
+  padding-block: var(--size-4) var(--size-2);
+  padding-inline: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--size-3);
 
   & a[href]:not(:hover,:focus-visible) {
     color: var(--text-1);

diff --git a/docsite/index.html b/docsite/index.html
@@ -174,6 +174,21 @@ <h1><span>CSS</span> <span>variables.</span></h1>
       </div>
     </section>
 
+    <ul id="scroll-nav" class="module-list">
+      <li><a href="#colors">Colors</a></li>
+      <li><a href="#gradients">Gradients</a></li>
+      <li><a href="#shadows">Shadows</a></li>
+      <li><a href="#aspect-ratio">Aspect Ratios</a></li>
+      <li><a href="#typography">Typography</a></li>
+      <li><a href="#easing">Easing</a></li>
+      <li><a href="#animations">Animations</a></li>
+      <li><a href="#sizes">Sizes</a></li>
+      <li><a href="#borders">Borders</a></li>
+      <li><a href="#z-index">Z-Index</a></li>
+      <li><a href="#media-queries">Media Queries</a></li>
+      <li><a href="#masks">Masks</a></li>
+    </ul>
+
     <section id="gallery">
       <header>
         <h2>Built with Open Props</h2>
@@ -3540,21 +3555,6 @@ <h5>Angles</h5>
       </div>
     </section>
 
-    <ul id="scroll-nav" class="module-list place-full">
-      <li><a href="#colors">Colors</a></li>
-      <li><a href="#gradients">Gradients</a></li>
-      <li><a href="#shadows">Shadows</a></li>
-      <li><a href="#aspect-ratio">Aspect Ratios</a></li>
-      <li><a href="#typography">Typography</a></li>
-      <li><a href="#easing">Easing</a></li>
-      <li><a href="#animations">Animations</a></li>
-      <li><a href="#sizes">Sizes</a></li>
-      <li><a href="#borders">Borders</a></li>
-      <li><a href="#z-index">Z-Index</a></li>
-      <li><a href="#media-queries">Media Queries</a></li>
-      <li><a href="#masks">Masks</a></li>
-    </ul>
-
     <footer class="place-full">
       <dl>
         <div>