From 1d877d76881ffa55d4f94405e807d5e64364f7a4 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 31 May 2026 15:24:50 +0000
Subject: [PATCH] =jakevan finished

---
 all.css |   82 +++++++++++++++++++++++++++++++++++-----
 1 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/all.css b/all.css
index 37b5f0a..8da0204 100644
--- a/all.css
+++ b/all.css
@@ -27,6 +27,8 @@
     --full: 100vw;
     --offScreen: -200vw;
 
+    --aside: min(500px, calc(100vw - 2rem));
+
     /*****************************
     Sizing
     *****************************/
@@ -844,10 +846,10 @@
 :is(h1,h2,h3,h4,h5,h6), p {
     width: 100%;
 }
-    .group :is(h1,h2,h3,h4,h5,h6), p {
-        width: max-content;
-        max-width: 100%;
-    }
+    /*.group :is(h1,h2,h3,h4,h5,h6), p {*/
+    /*    width: max-content;*/
+    /*    max-width: 100%;*/
+    /*}*/
 
 :is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
     font-weight: var(--fw-h-bold);
@@ -1908,6 +1910,17 @@
     box-shadow: var(--shdw-none);
 }
 
+.btn.action {
+    background-color: rgb(var(--action-0));
+    color: rgb(var(--action-contrast));
+    border: 1px solid var(--action-0);
+}
+    .btn.action:hover,
+    .btn.action:focus {
+        background-color: transparent;
+        color: rgb(var(--action-0));
+    }
+
     button.outline:hover,
     button.outline:focus,
     [type=submit].outline:hover,
@@ -2082,6 +2095,11 @@
 body:has(.fixed.bottom):has(nav.index.on-this-page).scroll-up.scroll-up #back-to-top {
     bottom: calc(var(--btn) + var(--chipchip));
 }
+@media(max-width:787px) {
+    body:has(.fixed.bottom):has(nav.letters.on-this-page).scroll-up.scroll-up #back-to-top {
+        bottom: calc(var(--btn) + var(--chipchip) + .25rem);
+    }
+}
 
 button[data-action=refresh],
 button.clear-filters {
@@ -2908,7 +2926,7 @@
             position: absolute;
             width: 100%;
             max-width: none;
-            bottom: 0;
+            bottom: var(--btn_);
             left: 0;
             right: 0;
             background: rgba(var(--base),var(--op-45));
@@ -3001,7 +3019,7 @@
             }
             ul.gallery li {
                 height: auto;
-                width: 100%;
+                width: 46%;
             }
             ul.gallery figure {
                 width: 100%;
@@ -3056,7 +3074,7 @@
     position: fixed;
     top: var(--btnbtn);
     bottom: var(--btn_);
-    width: min(500px, calc(100vw - 2rem));
+    width: var(--aside);
     padding: 0 0 var(--btn);
 }
     aside.main.left {
@@ -3170,11 +3188,11 @@
         animation: spin 1s var(--trans-fn) infinite;
     }
 .main.expanded + .qtoggle {
-    width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
+    width: calc(var(--aside) - var(--btn));
 }
 
 .main-actions .buttons:has(.expanded) {
-    width: calc(min(500px, calc(100vw - 2rem)));
+    width: var(--aside);
 }
 .main.expanded + .qtoggle {
     left: var(--btn);
@@ -3580,6 +3598,10 @@
     touch-action: pan-x;
     margin:0!important;
 }
+    .loop.scroll li {
+        min-width: 40vw;
+        padding: 0;
+    }
     a:has(img) {
         display:block;
         padding: .25rem;
@@ -3598,10 +3620,28 @@
 /*********************************************************
 DIRECTORY
 *********************************************************/
+.is-directory main {
+    padding-top: var(--btnbtn);
+}
+    .is-directory main > details {
+        grid-column: wide;
+        max-width: 100%;
+        margin: 1rem 0;
+        padding-right: var(--chipchip);
+    }
+        .is-directory main> details ul {
+            --justify: flex-start;
+        }
+        .is-directory main > details li::before {
+            display: none;
+        }
 .directory-list > ul {
     max-width: none;
     margin-left: 0!important;
 }
+.directory-list {
+    padding: 0!important;
+}
 .directory-list .image {
     display: flex;
     flex-wrap: nowrap;
@@ -3615,7 +3655,7 @@
     text-align: center;
     font-weight: var(--fw-h-bold);
     position: sticky;
-    font-size: var(--txt-enormous);
+    font-size: var(--txt-xx-large);
     width: 100%;
     top: var(--btn);
     left: 0;
@@ -3623,14 +3663,34 @@
     text-shadow: rgb(var(--base-200)) 1px 1px 0;
     user-select: none;
 }
-    .directory-list >ul > li {
+    .directory-list >ul > li.nowrap {
         padding: 2rem;
         align-items: flex-start;
+        flex-wrap: wrap!important;
+    }
+    .directory-list > ul > li h3 {
+        background-color: rgb(var(--base-50));
+    }
+        .directory-list > ul > li:nth-of-type(even) h3 {
+            background-color: rgb(var(--base-100));
+        }
+    @media (min-width: 768px) {
+        .directory-list h3 {
+            background-color: transparent!important;
+            font-size: var(--txt-enormous);
+        }
+
+        .directory-list >ul > li.nowrap {
+            flex-wrap: nowrap!important;
+        }
     }
     .directory-list >ul > li:nth-of-type(even) {
         background-color: rgb(var(--base-100));
     }
 
+    .directory-list > ul > li {
+        padding: 3rem var(--btn) 3rem 1.5rem;
+    }
     /** The letter's list **/
     .directory-list ul ul {
         width: 100%;

--
Gitblit v1.10.0