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 | 340 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 293 insertions(+), 47 deletions(-)
diff --git a/all.css b/all.css
index bb8df98..4160de9 100644
--- a/all.css
+++ b/all.css
@@ -27,6 +27,8 @@
--full: 100vw;
--offScreen: -200vw;
+ --aside: min(500px, calc(100vw - 2rem));
+
/*****************************
Sizing
*****************************/
@@ -76,6 +78,8 @@
Colours
*****************************/
--filter: grayscale(.3) sepia(.4);
+ --filterNone: grayscale(0) sepia(0);
+
--mix-blend-mode: darken;
--coverBlend: overlay;
--coverIndex: 2;
@@ -375,6 +379,7 @@
inline-size: fit-content;
margin-inline: auto;
}
+ a > img,
figure img {
width: 100%;
height: 100%;
@@ -618,6 +623,7 @@
line-height: 1.4;
position: relative;
max-width: 100vw;
+ overflow-x: clip;
}
body,
body * {
@@ -628,7 +634,7 @@
*************************************************************/
html {
scroll-behavior: smooth;
- overflow-x: hidden;
+ overflow-x: clip;
}
@media(prefers-reduced-motion){
@@ -763,6 +769,9 @@
position: relative;
z-index: var(--z-7);
}
+ footer:empty {
+ display: none;
+ }
footer p {
margin: 0 auto;
}
@@ -841,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);
@@ -952,7 +961,7 @@
}
:is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
background-color: rgb(var(--action-0));
}
@@ -1019,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;
@@ -1035,7 +1050,7 @@
}
.term-list.cloud a:hover,
.term-list.cloud a:focus {
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
background-color: rgb(var(--action-0));
}
.term-list a:has(.count) {
@@ -1049,7 +1064,7 @@
/*aspect-ratio: 1;*/
font-size: var(--txt-small);
/*background-color: rgb(var(--action-0));*/
- /*color: var(--action-contrast);*/
+ /*color: rgb(var(--action-contrast));*/
}
.term-list li {
@@ -1095,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? **/
@@ -1165,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);}
@@ -1480,10 +1495,10 @@
.abs { position: absolute; }
*:has(>.abs) { position: relative; }
-.top { top: 0; right: 0; left: 0; }
+.abs.top { top: 0; right: 0; left: 0; }
.top-right { top: 0; right: 0; }
.top-left { top: 0; left: 0; }
-.btm { bottom: 0; left: 0; right: 0; }
+.abs.btm { bottom: 0; left: 0; right: 0; }
.btm-right { bottom: 0; right: 0; }
.btm-left { bottom: 0; left: 0; }
.edges { inset: 0; }
@@ -1901,10 +1916,21 @@
.buttons a:visited:hover,
.buttons a:focus {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
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,
@@ -1918,7 +1944,7 @@
.buttons .outline a:visited:hover,
.buttons .outline a:focus {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
border-color: rgb(var(--action-0));
}
@@ -2011,7 +2037,7 @@
button.sticky:hover,
button.sticky:focus {
background-color: rgba(var(--action-0),var(--op-6));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
.main-actions .buttons button:disabled,
.main-actions .buttons button:disabled:hover,
@@ -2037,7 +2063,7 @@
.main .m-actions .refresh:hover,
.main .m-actions .refresh:focus {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
.main .refresh .indicator {
background-color: rgba(var(--base), var(--op-3));
@@ -2076,6 +2102,22 @@
body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
bottom: calc(var(--btn) + var(--chip_));
}
+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 {
+ width: max-content;
+ min-height: var(--chip_);
+ --w: var(--txt-small);
+ padding: .25rem .5rem;
+}
/******************************************************************
ACCESSIBILITY
******************************************************************/
@@ -2136,6 +2178,8 @@
[type=radio] + label,
[type=checkbox] + label {
cursor: pointer;
+ position: relative;
+ padding-left: 1.5rem;
}
.field:is(.radio,.checkbox) fieldset {
display: grid;
@@ -2164,6 +2208,11 @@
color: rgb(var(--action-0));
}
+ [type=radio].btn + label:hover,
+ [type=radio].btn:checked + label:hover {
+ color: rgb(var(--action-contrast));
+ }
+
[type=radio] + label::before,
[type=radio] + label::after,
[type=checkbox] + label::before,
@@ -2182,7 +2231,7 @@
transform: rotate(45deg);
width: .25em;
height: .75em;
- border: solid var(--action-contrast);
+ border: solid rgb(var(--action-contrast));
border-width: 0 2px 2px 0;
display: none;
}
@@ -2276,7 +2325,7 @@
}
.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
background-color:rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
border-radius: 4px;
}
@@ -2586,6 +2635,9 @@
box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
z-index: var(--z-5);
}
+aside.expanded {
+ margin: 0!important;
+}
dialog::backdrop {
backdrop-filter: blur(5px);
background-color: rgba(var(--base),var(--op-4));
@@ -2599,7 +2651,7 @@
dialog[open] {
z-index: var(--z-10);
--padding: 0;
- top: 5vh;
+ margin: auto!important;
width: min(500px, 95vw);
height: fit-content;
max-height: 90vh;
@@ -2613,9 +2665,11 @@
max-height: 98vh;
top: 1vh;
}
- dialog > .wrap {
+ dialog > .wrap.wrap {
max-height: var(--maxHeight);
overflow: hidden auto;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
margin: 0 0 0 1.5rem;
padding-right: 1.5rem;
padding-bottom: var(--btn);
@@ -2654,7 +2708,7 @@
box-shadow: none;
width: 100%;
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
--gap: .75rem;
font-size: var(--txt-x-small);
border-radius: 0;
@@ -2671,14 +2725,98 @@
.m-actions button:last-of-type {
border-bottom-right-radius: 1rem;
}
- dialog ul {
+ dialog li {
list-style: none;
+ padding: 0;
}
dialog .search-container {
padding-top: 1rem;
width: 100%;
gap: .5rem;
}
+ dialog header {
+ width: 100%;
+ text-align: center;
+ font-size: var(--txt-x-medium);
+ height: var(--chipchip);
+ }
+ dialog header h2 {
+ margin: 0;
+ }
+ /** SELECTOR **/
+ .selected-items {
+ width: 100%;
+ padding: .5rem;
+ border-radius: var(--radius);
+ background-color: rgb(var(--base));
+ --justify: flex-start;
+ --gap: .5rem;
+ margin-bottom: .5rem;
+ }
+ .selected-items button {
+ width: max-content;
+ padding: .125rem .5rem;
+ font-size: var(--txt-x-small);
+ min-height: var(--chip_);
+ }
+ .selected-items button .icon-x {
+ --w: var(--txt-small);
+ align-self: flex-start;
+ }
+ .selected-items.selected-items:empty {
+ padding: 0;
+ background-color: transparent;
+ margin: 0;
+ }
+ .selected-item.selected-item {
+ padding: .25rem .5rem;
+ margin: .125em;
+ background-color: rgb(var(--base-100));
+ border-radius: .25rem;
+ font-size: var(--txt-medium);
+ border: 1px solid rgb(var(--base-200));
+ position: relative;
+ width: max-content;
+ }
+ .selected-item button {
+ min-height: 0;
+ height: var(--chip);
+ width: var(--chip);
+ padding: 0;
+ --w: var(--txt-small);
+ }
+ .clear-filters {
+ margin-left: auto;
+ border: 1px solid var(--base-200);
+ }
+ #jvb-selector .message {
+ width: 100%;
+ text-align: center;
+ }
+ #jvb-selector .items-wrap {
+ width: 100%;
+ padding: 1rem 0;
+ border: 1px solid rgb(var(--base-200));
+ border-width: 1px 0;
+ }
+ #jvb-selector .items-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ margin: 0;
+ }
+
+ .autocomplete-dropdown {
+ width: 100%;
+ background-color: var(--base-100);
+ padding: .5rem;
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
+ }
+ li.autocomplete {
+ list-style: none;
+ display: inline-flex;
+ margin: .25rem;
+ min-height: var(--chip);
+ }
/** GALLERY **/
img[data-gallery] {
@@ -2798,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));
@@ -2816,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);
@@ -2855,9 +2995,9 @@
ul.gallery {
display: flex;
flex-wrap: wrap;
- margin: .2em;
- padding: 0;
- list-style-type: none;
+ margin: .2em!important;
+ padding: 0!important;
+ max-width: 100vw;
}
ul.gallery::after {
content: '';
@@ -2867,9 +3007,12 @@
ul.gallery li {
flex-grow: 1;
+ list-style: none;
height: 40vh;
margin: .2em;
overflow: hidden;
+ padding: 0;
+ max-width:49%;
}
ul.gallery figure {
@@ -2888,7 +3031,7 @@
}
ul.gallery li {
height: auto;
- width: 100%;
+ width: 46%;
}
ul.gallery figure {
width: 100%;
@@ -2906,6 +3049,35 @@
height: 80vh;
}
}
+
+ ul.gallery.cut {
+ --gap: var(--txt-small);
+ display: grid;
+ max-width: var(--narrow);
+ grid: auto-flow 1fr/repeat(3, 1fr);
+ gap: var(--gap);
+ }
+ ul.gallery.cut img {
+ filter: var(--filterNone);
+ }
+ ul.gallery.cut:hover img {
+ filter: var(--filter);
+ }
+ ul.gallery.cut:hover img:hover {
+ filter: var(--filterNone);
+ }
+ ul.gallery.cut li:nth-of-type(4n +2) {
+ grid-area: 1/2/span 2/span 2;
+ clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4));
+ }
+ ul.gallery.cut li:nth-of-type(4n +3) {
+ grid-area: 2/1/span 2/span 2;
+ clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
+ }
+
+
+
+
/*** POPUPS: notifications, cart, queue ***/
aside.main.main {
--wrap: nowrap;
@@ -2914,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 {
@@ -2944,7 +3116,7 @@
aside.main header {
--w: 2em;
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
padding: 1rem;
}
.tab-content header {
@@ -2973,7 +3145,7 @@
}
nav.share a:hover {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
aside.main h4,
aside.main .hint {
@@ -3028,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);
@@ -3157,7 +3329,7 @@
.callout.callout {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
.callalt.callalt {
@@ -3173,11 +3345,26 @@
width: 100%;
}
-.callout a {
- background-color: var(--action-contrast);
+.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
********************************************************/
@@ -3376,7 +3563,7 @@
position: relative;
padding: var(--btn);
}
- blockquote .icon {
+ blockquote .icon-quotes-fi {
position: absolute;
top: var(--btn);
left: calc((10vw + var(--btn)) * -1);
@@ -3424,13 +3611,33 @@
}
.loop li > figure {
- float: left;
- margin-right: var(--chip_);
- margin-top: 0;
- max-width: 30%;
+ /*float: left;*/
+ /*margin-right: var(--chip_);*/
+ /*margin-top: 0;*/
+ /*max-width: 30%;*/
aspect-ratio: 1;
}
+.loop.scroll {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ 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,
.no-results {
display: flex;
@@ -3443,8 +3650,27 @@
/*********************************************************
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;
@@ -3459,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;
@@ -3467,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