From d25ccb070d76eb496e88d16776aea9e27de6e341 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Fri, 05 Jun 2026 16:50:19 +0000
Subject: [PATCH] =Switching to Northeh
---
all.css | 128 ++++++++++++++++++++++++++++++++++++------
1 files changed, 109 insertions(+), 19 deletions(-)
diff --git a/all.css b/all.css
index 37b5f0a..4160de9 100644
--- a/all.css
+++ b/all.css
@@ -27,6 +27,8 @@
--full: 100vw;
--offScreen: -200vw;
+ --aside: min(500px, calc(100vw - 2rem));
+
/*****************************
Sizing
*****************************/
@@ -621,6 +623,7 @@
line-height: 1.4;
position: relative;
max-width: 100vw;
+ overflow-x: clip;
}
body,
body * {
@@ -766,6 +769,9 @@
position: relative;
z-index: var(--z-7);
}
+ footer:empty {
+ display: none;
+ }
footer p {
margin: 0 auto;
}
@@ -844,10 +850,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 +1028,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 +1110,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 +1180,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 +1920,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 +2105,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 +2936,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 +2954,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 +3031,7 @@
}
ul.gallery li {
height: auto;
- width: 100%;
+ width: 46%;
}
ul.gallery figure {
width: 100%;
@@ -3056,7 +3086,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 +3200,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);
@@ -3315,11 +3345,26 @@
width: 100%;
}
-.callout a {
+.callout.callout button,
+.callout.callout .buttons a,
+.callout.callout a {
background-color: rgb(var(--action-contrast));
+ color: rgb(var(--action-0));
+ border: 1px solid transparent;
padding: 0 .125rem;
border-radius: 4px;
+ box-shadow: var(--shdw-none);
}
+ .callout.callout button:hover,
+ .callout.callout button:focus,
+ .callout.callout .buttons a:hover,
+ .callout.callout .buttons a:focus,
+ .callout.callout a:hover,
+ .callout.callout a:focus {
+ border-color: rgb(var(--action-contrast))!important;
+ color: rgb(var(--action-contrast));
+ background-color: transparent;
+ }
/********************************************************
WP BLOCKS
********************************************************/
@@ -3580,10 +3625,17 @@
touch-action: pan-x;
margin:0!important;
}
+ .loop.scroll li {
+ /*min-width: 40vw;*/
+ padding: 0;
+ }
a:has(img) {
display:block;
padding: .25rem;
}
+ .loop.scroll img {
+ max-height: 50vh;
+ }
.no-results p,
@@ -3598,10 +3650,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 +3685,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 +3693,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