From c155de06a9e0f82e56446fefa1b39edb6b0542de Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 02 Jun 2026 00:47:55 +0000
Subject: [PATCH] =Minor tweaks to form status, finalizing the nav.always.fixed submenus
---
all.css | 104 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 86 insertions(+), 18 deletions(-)
diff --git a/all.css b/all.css
index 37b5f0a..cb19e07 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);
@@ -1022,6 +1024,12 @@
ul.terms li {
list-style: none;
}
+ ul.terms ul {
+ display: inline-flex;
+ margin: 0;
+ gap: .5rem;
+ flex-wrap: wrap;
+ }
.term-list.cloud {
display: flex;
@@ -1098,19 +1106,19 @@
}
@media (min-width: 768px){
.width-50 {
- max-width: 50%;
+ max-width: calc(49% - var(--gap,0));
}
.width-25 {
- max-width: 25%;
+ max-width: calc(24% - var(--gap,0));
}
.width-75 {
- max-width: 75%;
+ max-width: calc(74% - var(--gap,0));
}
.width-33 {
- max-width: 33.333%;
+ max-width: calc(32.333% - var(--gap,0));
}
.width-66 {
- max-width: 66.666%
+ max-width: calc(65.666% - var(--gap,0));
}
}
/** SPACING TODO: maybe scan our files for which we actually use? **/
@@ -1168,7 +1176,7 @@
.pb-7 { padding-bottom: var(--sp7); }
/** MARGIN **/
-.m-0 {margin: 0;}
+.m-0.m-0 {margin: 0;}
.m-1 {margin: var(--sp1);}
.m-2 {margin: var(--sp2);}
.m-3 {margin: var(--sp3);}
@@ -1908,6 +1916,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 +2101,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 +2932,7 @@
position: absolute;
width: 100%;
max-width: none;
- bottom: 0;
+ bottom: var(--btn_);
left: 0;
right: 0;
background: rgba(var(--base),var(--op-45));
@@ -2926,7 +2950,9 @@
cursor: pointer;
user-select: none;
}
-
+ dialog.gallery details[open] {
+ background: rgba(var(--base), var(--op-6));
+ }
dialog.gallery details[open] .item-info {
padding: 0.75rem 1rem 1rem;
font-size: var(--txt-x-small);
@@ -3001,7 +3027,7 @@
}
ul.gallery li {
height: auto;
- width: 100%;
+ width: 46%;
}
ul.gallery figure {
width: 100%;
@@ -3056,7 +3082,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 +3196,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 +3606,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 +3628,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 +3663,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 +3671,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