From 92e80666d516de64e488e04911c09e65a32e2a05 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 23 May 2026 18:48:30 +0000
Subject: [PATCH] =Base Styles overhaul. MAJOR NOTE: colour vars changed from hex codes to the rgb numbers (ex: 0,0,0) - this makes setting colour opacity much easier throughout. Likely breaking for most existing themes though
---
all.css | 1386 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 1,033 insertions(+), 353 deletions(-)
diff --git a/all.css b/all.css
index fde497e..ddcdbc2 100644
--- a/all.css
+++ b/all.css
@@ -79,51 +79,79 @@
--mix-blend-mode: darken;
--coverBlend: overlay;
--coverIndex: 2;
- --light-0: #fafafa;
- --light-50: #fcfbfb;
- --light-100: #f1eded;
- --light-200: #e6dfdf;
- --light-rgb: 250,250,250;
- --dark-0: #201313;
- --dark-50: #261717;
- --dark-100: #2d1b1b;
- --dark-200: #331e1e;
- --dark-rgb: 16,4,4;
- --action-0: #B7332E;
- --action-50: #a32d29;
- --action-100: #8e2824;
- --action-200: #7a221f;
- --action-contrast: var(--light-0);
- --action-rgb: 183,51,46;
- --secondary-0: #E8A737;
- --secondary-50: #e59d20;
- --secondary-100: #d48f18;
- --secondary-200: #bd7f16;
- --secondary-contrast: var(--light-0);
- --secondary-rgb: 232,167,55;
+ --light-0: 239,239,239; /* #efefef; */
+ --light-50: 226,226,226; /* #e2e2e2; */
+ --light-100: 213,213,213; /* #d5d5d5; */
+ --light-200: 201,201,201; /* #c9c9c9; */
- --success: #22C55E;
- --successBack: #d4edda;
- --successText:#155724;
- --warning: #E8A737;
- --error: #EF4444;
- --errorBack: #f8d7da;
- --errorText: #721c24;
+ --dark-0: 21,21,21; /* #151515; */
+ --dark-50: 34,34,34; /* #222222; */
+ --dark-100: 46,46,46; /* #2e2e2e; */
+ --dark-200: 59,59,59; /* #3b3b3b; */
+
+ --action-0: 255,0,128; /* #ff0080; */
+ --action-50: 255,38,146; /* #ff2492; */
+ --action-100: 255,71,164; /* #ff47a4; */
+ --action-200: 255,107,181; /* #ff6bb5; */
+ --action-contrast: var(--light-0);
+
+ --action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);
+ --action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
+ --action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);
+ --secondary-0: 214,145,33; /* #D69121; */
+ --secondary-50: 255,196,33; /* #ffc421; */
+ --secondary-100: 255,205,68;/* #ffcd44; */
+ --secondary-200: 255,215,104;/* #ffd768; */
+ --secondary-contrast: var(--light-0);
+ --secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);
+ --secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
+ --secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);
+
+ --success: 76,175,80; /* #4CAF50; */
+ --successLight: 234,246,235; /* #eaf6eb; */
+ --successDark: 14,33,15; /* #0e210f; */
+ --successBack: var(--successLight);
+ --successText: var(--successDark);
+ --warning: 232,167,55; /* #E8A737; */
+ --warningLight: 253,247,238;/* #fdf7ee; */
+ --warningDark: 52,35,6; /* #342306; */
+ --warningBack: var(--warningLight);
+ --warningText: var(--warningDark);
+ --error: 183,51,46; /* #B7332E; */
+ --errorLight: 250,235,234; /* #faebea; */
+ --errorDark: 40,11,10; /* #280b0a; */
+ --errorBack: var(--errorLight);
+ --errorText: var(--errorDark);
--base: var(--light-0);
--base-50: var(--light-50);
--base-100: var(--light-100);
--base-200: var(--light-200);
- --base-rgb: var(--light-rgb);
+
--contrast: var(--dark-0);
--contrast-50: var(--dark-50);
--contrast-100: var(--dark-100);
--contrast-200: var(--dark-200);
- --contrast-rgb: var(--dark-rgb);
- --shimmer: rgba(var(--dark-rgb),0) 0%,
- rgba(var(--dark-rgb),.05) 50%,
- rgba(var(--dark-rgb),0) 100%;
+
+
+ --contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);
+ --contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));
+ --contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);
+ --base-comp: oklch(from rgb(var(--base)) .8 .26 h);
+ --base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));
+ --base-mono: oklch(from rgb(var(--base)) .3 .04 h);
+
+
+ --tone-a: rgb(var(--contrast));
+ --tone-b: rgb(var(--base));
+
+ --duo-dark: oklch(from var(--tone-a) .22 c h);
+ --duo-light: oklch(from var(--tone-b) .78 c h);
+
+ --shimmer: rgba(var(--contrast),0) 0%,
+ rgba(var(--contrast),.05) 50%,
+ rgba(var(--contrast),0) 100%;
--op-1: .05;
--op-2: .15;
@@ -196,10 +224,10 @@
Scrollbar
*****************************/
--sb-width: 8px;
- --sb-track: var(--base-100);
- --sb-thumb: var(--action-0);
- --sb-thumb-hover: var(--action-50);
- --sb-thumb-border: 2px solid var(--base-50);
+ --sb-track: rgb(var(--base-100));
+ --sb-thumb: rgb(var(--action-0));
+ --sb-thumb-hover: rgb(var(--action-50));
+ --sb-thumb-border: 2px solid rgb(var(--base-50));
--sb-radius: 4px;
--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
@@ -215,34 +243,37 @@
--coverBlend: multiply;
--coverIndex: 0;
- --action-50: #cb3933;
- --action-100: #d14c47;
- --action-200: #d6605c;
+ --action-50: 219,0,110; /* #db006e; */
+ --action-100: 184,0.92; /* #b8005c; */
+ --action-200: 148,0,74; /* #94004a; */
- --secondary-50: #ebb14e;
- --secondary-100: #edbb65;
- --secondary-200: #f0c57c;
+ --secondary-50: 216,159,0; /* #d89f00; */
+ --secondary-100: 181,133,0; /* #b58500; */
+ --secondary-200: 145,106,0; /* #916a00; */
--contrast: var(--light-0);
--contrast-50: var(--light-50);
--contrast-100: var(--light-100);
--contrast-200: var(--light-200);
- --contrast-rgb: var(--light-rgb);
+ --contrast: var(--light-rgb);
--base: var(--dark-0);
--base-50: var(--dark-50);
--base-100: var(--dark-100);
--base-200: var(--dark-200);
- --base-rgb: var(--dark-rgb);
+ --base: var(--dark-rgb);
- --successBack: #155724;
- --successText:#d4edda;
- --errorBack: #721c24;
- --errorText: #f8d7da;
- --shimmer: rgba(var(--c),0) 0%,
- rgba(var(--c),.05) 50%,
- rgba(var(--c),0) 100%;
+ --successBack: var(--successDark);
+ --successText: var(--successLight);
+ --warningBack: var(--warningDark);
+ --warningText: var(--warningLight);
+ --errorBack: var(--errorDark);
+ --errorText: var(--errorLight);
+
+ --shimmer: rgba(var(--light-0),0) 0%,
+ rgba(var(--light-0),.05) 50%,
+ rgba(var(--light-0),0) 100%;
}
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@layer reset {
@@ -352,6 +383,9 @@
figcaption {
contain: inline-size;
font-size: 90%;
+ background-color: rgba(var(--base),var(--op-3));
+ text-align: center;
+ font-style: italic;
}
input,
@@ -426,13 +460,70 @@
padding: 1.5rem;
}
+ hr.logo::after,
hr {
+ --margin: 12.5%; /* Half of the remaining 25% */
+ --baseWidth: 75%;
border-style: solid;
border-width: 1px 0 0;
+ border-color: rgb(var(--contrast));
color: inherit;
- height: 0;
+ height: 1px;
overflow: visible;
margin-block: 2.5rem;
+ width: var(--baseWidth);
+ }
+
+ hr.logo {
+ --width: calc((rgb(var(--baseWidth)) / 2) - var(--half));
+ --half: calc(var(--btn) / 2);
+ width: var(--width);
+ position: relative;
+ margin-left: var(--margin);
+ }
+ hr.logo::before {
+ content: '';
+ --circ: calc(var(--btn) + (var(--btn) / 2));
+ --rad: calc(var(--circ) / 2);
+ background-color: rgb(var(--contrast-100));
+ mask-image: var(--icon);
+ -webkit-mask-image: var(--icon);
+ mask-size: var(--btn);
+ -webkit-mask-size: contain;
+ mask-repeat: no-repeat;
+ -webkit-mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-position: center;
+ display: block;
+ width: var(--circ);
+ height: var(--circ);
+ position: absolute;
+ border-radius: 50%;
+ right: calc(-1 * (var(--circ)));
+ top: 0;
+ transform: translateY(-50%);
+
+ }
+ hr.logo::after {
+ content: '';
+ display: block;
+ width: 100%;
+ position: absolute;
+ z-index: 0;
+ top: 0;
+ transform: translateY(050%);
+ background-color: rgb(var(--contrast));
+ height: 1px;
+ right: calc((100% + var(--btn_) + 1rem) * -1);
+ margin: 0;
+ }
+ hr.dots {
+ border-color: transparent;
+ display:flex;
+ }
+ hr.dots::before {
+ content: '.\2003.\2003.';
+ margin: 0 auto;
}
:target {
@@ -518,8 +609,8 @@
BASE
*************************************************************/
body {
- background-color: var(--base-50);
- color: var(--contrast);
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
margin: 0;
font-family: var(--body);
font-weight: var(--fw-b);
@@ -558,19 +649,23 @@
/*}*/
main {
+ --gapNarrow: calc((var(--content) - var(--narrow)) / 2);
+ --gapContent: calc((var(--wider) - var(--content)) / 2);
+ --gapWide: calc((var(--wide) - var(--wider)) / 2);
+
display: grid;
grid-template-columns:
[full-start] minmax(1rem, 1fr)
- [wide-start] minmax(0, calc((100% - var(--content)) / 2))
- [wider-start] minmax(0, calc((var(--wide) - var(--wider)) / 2))
- [content-start] minmax(0, calc((var(--wider) - var(--content)) / 2))
- [narrow-start] min(100% - 2rem, var(--narrow)) [narrow-end]
- minmax(0, calc((var(--content) - var(--narrow)) / 2)) [content-end]
- minmax(0, calc((var(--wider) - var(--content)) / 2)) [wider-end]
- minmax(0, calc((var(--wide) - var(--wider)) / 2)) [wide-end]
- minmax(0, calc((100% - var(--content)) / 2))
- minmax(1rem, 1fr) [full-end];
+ [wide-start] minmax(0, var(--gapWide))
+ [wider-start] minmax(0, var(--gapContent))
+ [content-start] minmax(0, var(--gapNarrow))
+ [narrow-start] min(calc(100% - 2rem), var(--narrow)) [narrow-end]
+ minmax(0, var(--gapNarrow)) [content-end]
+ minmax(0, var(--gapContent)) [wider-end]
+ minmax(0, var(--gapWide)) [wide-end]
+ minmax(1rem, 1fr) [full-end];
min-height: var(--maxHeight);
+ grid-auto-rows: max-content;
}
main > * {
grid-column: content;
@@ -584,8 +679,13 @@
max-width: var(--content);
margin: var(--sp1) auto;
}
-main > section > ul {
+ul {
max-width: var(--narrow);
+ margin: 1rem auto 1rem 3rem;
+}
+ul ul {
+ padding: .25rem 0 .25rem 1rem;
+ margin: 0;
}
/* Nested items can use any width */
@@ -599,10 +699,12 @@
main .align-wider {
grid-column: wider;
+ width: 100%;
}
main .align-wide {
grid-column: wide;
+ width: 100%;
}
main .align-full {
@@ -620,8 +722,8 @@
position: sticky;
top: 0;
z-index: var(--z-8);
- background-color: var(--base);
- box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-down);
+ background-color: rgb(var(--base));
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down);
transition: top var(--trans-base);
}
header a[rel="home"] {
@@ -629,6 +731,7 @@
align-items: center;
max-height:var(--btn);
overflow:hidden;
+ margin: 0 auto;
}
.scroll-progress {
position: absolute;
@@ -639,7 +742,7 @@
align-items: center;
pointer-events: none;
z-index: var(--z-3);
- background-color: var(--base-200);
+ background-color: rgb(var(--base-200));
overflow: hidden;
}
@@ -648,13 +751,13 @@
height: 1px;
transform-origin: left center;
transform: scaleX(0);
- background: var(--action-0);
+ background: rgb(var(--action-0));
}
footer {
padding: 1rem;
- background-color: var(--base);
- color: var(--contrast-200);
+ background-color: rgb(var(--base));
+ color: rgb(var(--contrast-200));
text-align: center;
margin: 4rem 0 0;
position: relative;
@@ -675,8 +778,8 @@
*:target {
scroll-snap-margin-top: var(--btnbtn);
scroll-margin-top: var(--btnbtn);
- outline: double var(--action-200);
- background-color: var(--base);
+ outline: double rgb(var(--action-200));
+ background-color: rgb(var(--base));
}
/***********************
@@ -687,7 +790,7 @@
padding: 0 1rem;
font-size: var(--txt-x-small);
z-index: var(--z-7);
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
aside.header {
height: var(--chip_);
@@ -699,9 +802,9 @@
}
aside.footer {
--dir: column;
- background-color:var(--base-50);
+ background-color:rgb(var(--base-50));
padding: 1rem;
- border-top: 1px solid var(--base-200);
+ border-top: 1px solid rgb(var(--base-200));
}
aside.footer + footer {
margin-top: 0;
@@ -738,6 +841,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%;
+ }
:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
font-weight: var(--fw-h-bold);
@@ -794,6 +901,23 @@
p {
line-height: 1.6;
}
+ .drop-cap::first-letter {
+ font-family: var(--heading);
+ font-size: var(--btn);
+ line-height: 1;
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ float: left;
+ font-weight: var(--fw-h-bold);
+ margin: 0.1em 0.1em 0.2em 0;
+ padding: 0.1em;
+ }
+ :not(.row >) p:has(+p) {
+ margin-bottom: 0;
+ }
+ :not(.row >) p + p {
+ margin-top: 0;
+ }
.hint {
line-height: 1.2;
@@ -801,28 +925,43 @@
font-size: var(--txt-small);
}
+mark {
+ background-color: rgba(var(--action-0), var(--op-45))!important;
+ color: rgb(var(--action-contrast))!important;
+ border-top-left-radius: .5em;
+ border-bottom-right-radius: .5em;
+ padding: 0 .5em;
+ corner-shape: bevel;
+}
+
/******************************************************
LINKS
******************************************************/
a {
- color: var(--action-0);
+ color: rgb(var(--action-0));
border-radius: 4px;
padding: .125rem;
}
a:visited {
- color: var(--action-100);
+ color: rgb(var(--action-100));
}
a:hover,
a:visited:hover {
- color: var(--contrast-50);
+ color: rgb(var(--contrast-50));
text-decoration: none;
}
:is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
color: var(--action-contrast);
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
+ a.logo {
+ display: inline-flex;
+ }
+ .logo img {
+ max-width: 150px;
+ }
/*****************************************************
ICONS
*****************************************************/
@@ -880,6 +1019,39 @@
ul.terms li {
list-style: none;
}
+
+.term-list.cloud {
+ display: flex;
+ gap: .25rem;
+ margin: var(--sp2) auto;
+}
+ .term-list.cloud a {
+ border-radius: var(--radius);
+ background-color: transparent;
+ color: rgb(var(--action-0));
+ border: 2px solid rgb(var(--action-0));
+ padding: 4px 8px;
+ position: relative;
+ }
+ .term-list.cloud a:hover,
+ .term-list.cloud a:focus {
+ color: var(--action-contrast);
+ background-color: rgb(var(--action-0));
+ }
+ .term-list a:has(.count) {
+ padding-right: 1rem;
+ }
+ .term-list .count {
+ position: absolute;
+ top: .25rem;
+ right: .25rem;
+ /*border-radius: 50%;*/
+ /*aspect-ratio: 1;*/
+ font-size: var(--txt-small);
+ /*background-color: rgb(var(--action-0));*/
+ /*color: var(--action-contrast);*/
+ }
+
.term-list li {
list-style: none;
}
@@ -890,14 +1062,19 @@
/******************************************************
UTILITY
******************************************************/
+.rounded { border-radius: var(--radius-outer); }
.font-small { font-size: var(--txt-x-small); }
.font-medium { font-size: var(--txt-medium); }
.font-large { font-size: var(--txt-large); }
.font-x-large { font-size: var(--txt-x-large); }
-.align-center { text-align: center; }
-.align-left { text-align: left; }
-.align-right { text-align: right; }
+.text-center {text-align: center;}
+.text-right {text-align: right;}
+.text-left {text-align: left;}
+.align-center { text-align: center; margin: 0 auto;}
+.align-left { text-align: left; margin: 0 auto 0 0;}
+.align-right { text-align: right; margin: 0 0 0 auto;}
+
*[hidden] { display: none!important; }
@@ -905,6 +1082,8 @@
.hide-small { display: none; }
}
+.width-33,
+.width-66,
.width-50,
.width-25,
.width-75 {
@@ -916,13 +1095,19 @@
}
@media (min-width: 768px){
.width-50 {
- width: calc(50% - .3em);
+ max-width: 50%;
}
.width-25 {
- width: calc(25% - .3em);
+ max-width: 25%;
}
.width-75 {
- width: calc(75% - .3em);
+ max-width: 75%;
+ }
+ .width-33 {
+ max-width: 33.333%;
+ }
+ .width-66 {
+ max-width: 66.666%
}
}
/** SPACING TODO: maybe scan our files for which we actually use? **/
@@ -1034,7 +1219,183 @@
.ml-7 { margin-left: var(--sp7); }
.mb-7 { margin-bottom: var(--sp7); }
+/******************************************************
+COLORS
+******************************************************/
+.base {
+ --color: rgb(var(--base));
+}
+ .base-50 {
+ --color: rgb(var(--base-50));
+ }
+ .base-100 {
+ --color: rgb(var(--base-100));
+ }
+ .base-200 {
+ --color: rgb(var(--base-200));
+ }
+.contrast {
+ --color: rgb(var(--contrast));
+}
+ .contrast-50 {
+ --color: rgb(var(--contrast-50));
+ }
+ .contrast-100 {
+ --color: rgb(var(--contrast-100));
+ }
+ .contrast-200 {
+ --color: rgb(var(--contrast-200));
+ }
+.action {
+ --color: rgb(var(--action-0));
+}
+ .action-50 {
+ --color: rgb(var(--action-50));
+ }
+ .action-100 {
+ --color: rgb(var(--action-100));
+ }
+ .action-200 {
+ --color: rgb(var(--action-200));
+ }
+ .action-comp {
+ --color: oklch(from rgb(var(--action-0)) l c calc(h + 180));
+ }
+ .action-tri {
+ --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
+ }
+ .action-tri-alt {
+ --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h + 120));
+ }
+.secondary {
+ --color: rgb(var(--secondary-0));
+}
+ .secondary-50 {
+ --color: rgb(var(--secondary-50));
+ }
+ .secondary-100 {
+ --color: rgb(var(--secondary-100));
+ }
+ .secondary-200 {
+ --color: rgb(var(--secondary-200));
+ }
+ .secondary-comp {
+ --color: oklch(from rgb(var(--secondary-0)) l c calc(h + 180));
+ }
+ .secondary-tri {
+ --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
+ }
+ .secondary-tri-alt {
+ --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h + 120));
+ }
+.hvr-bck:hover,
+.hvr-bck:focus,
+.bck {
+ background-color: var(--color);
+}
+ .bck:not(.overlay).op-1 {
+ background-color: rgba(var(--color), var(--op-1));
+ }
+ .bck:not(.overlay).op-2 {
+ background-color: rgba(var(--color), var(--op-2));
+ }
+ .bck:not(.overlay).op-3 {
+ background-color: rgba(var(--color), var(--op-3));
+ }
+ .bck:not(.overlay).op-4 {
+ background-color: rgba(var(--color), var(--op-4));
+ }
+ .bck:not(.overlay).op-45 {
+ background-color: rgba(var(--color), var(--op-45));
+ }
+ .bck:not(.overlay).op-5 {
+ background-color: rgba(var(--color), var(--op-5));
+ }
+ .bck:not(.overlay).op-6 {
+ background-color: rgba(var(--color), var(--op-6));
+ }
+.hvr-clr:hover,
+.hvr-clr:focus,
+.clr {
+ color: var(--color);
+}
+.hvr-brdr:hover,
+.hvr-brdr:focus,
+.brdr {
+ border-color: var(--color);
+}
+
/******************************************************************
+DUOTONE
+*****************************************************************//******************************************************************/
+.duotone {
+ isolation: isolate;
+ position: relative;
+ overflow: hidden;
+ background: rgb(var(--contrast));
+}
+
+.cover img,
+.cover video,
+.duotone img,
+.duotone video {
+ filter: grayscale(1) sepia(1) contrast(1.1) brightness(1.05);
+ mix-blend-mode: multiply;
+ z-index: 1;
+ position: relative;
+}
+ /*.duotone::after,*/
+ .duotone::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ z-index: 2;
+ }
+ .duotone::before {
+ mix-blend-mode: color;
+ background-color: var(--duo-dark);
+ opacity: var(--op-5);
+ /*z-index: 1;*/
+ }
+ .duotone:not(.cover)::after {
+ mix-blend-mode: screen;
+ background-color: var(--duo-light);
+ /*z-index: 2;*/
+ }
+
+
+ .duotone.action {
+ --tone-a: rgb(var(--action-0));
+ --duo-dark: oklch(from rgb(var(--base)) .18 .02 h);
+ --duo-light: oklch(from rgb(var(--action-0)) .72 .28 h);
+ }
+
+ .duotone.secondary {
+ --tone-a: rgb(var(--secondary-0));
+ --duo-dark: oklch(from rgb(var(--base)) .2 .03 h);
+ --duo-light: oklch(from rgb(var(--secondary-0)) .82 .18 h);
+ }
+
+ .duotone.complement {
+ --duo-dark: oklch(from var(--tone-a) .22 .08 calc(h + 180));
+ --duo-light: oklch(from var(--tone-a) .8 .26 h);
+ }
+ .duotone.triadic {
+ --duo-dark: oklch(from var(--tone-a) .24 .1 calc(h + 120));
+ --duo-light: oklch(from var(--tone-a) .82 .2 calc(h - 120));
+ }
+ .duotone.monochrome {
+ --duo-dark: oklch(from var(--tone-a) .3 .04 h);
+ --duo-light: oklch(from var(--tone-a) .88 .08 h);
+ }
+ .duotone.film {
+ --duo-dark: oklch(from var(--tone-a) .35 .1 h);
+ --duo-light: oklch(from var(--dark-0) .96 .02 h);
+ }
+
+
+/******************************************************************//******************************************************************
LAYOUT UTILITIES
******************************************************************/
/** Buttons **/
@@ -1053,8 +1414,9 @@
aside.header,
aside.footer,
/** Defaults, of course **/
-.row,
-.col {
+
+.row.row,
+.col.col {
display: flex;
justify-content: var(--justify);
align-items: var(--align);
@@ -1065,12 +1427,16 @@
--justify: center;
--gap: .5rem;
--wrap: wrap;
+ width: 100%;
+}
+.stretch.stretch > * {
+ flex: 1;
}
-.col { --dir: column; }
-.row { --dir: row; }
-.col.rev { --dir: column-reverse; }
-.row.rev { --dir: row-reverse; }
+.col.col { --dir: column; }
+.row.row { --dir: row; }
+.col.col.rev.rev { --dir: column-reverse; }
+.row.row.rev.rev { --dir: row-reverse; }
.nowrap.nowrap { --wrap: nowrap; }
.nowrap.nowrap.stack-small { --wrap: wrap;}
@@ -1078,24 +1444,35 @@
.nowrap.nowrap.stack-small { --wrap: nowrap;}
}
-.col.start,
-.row.a-start { --align: flex-start; }
-.col.end,
-.row.a-end { --align: flex-end; }
+.row.row.top,
+.col.col.left { --align: flex-start; }
+.col.col.top,
+.row.row.left { --justify: flex-start; }
-.col.a-start,
-.row.start { --justify: flex-start; }
-.col.a-end,
-.row.end { --justify: flex-end; }
+.row.row.btm,
+.col.col.right { --align: flex-end; }
+.col.col.btm,
+.row.row.right { --justify: flex-end; }
-.col.btw,
-.row.btw {
- --justify: space-between;
- width: 100%;
-}
+.row.row.x-mid,
+.col.col.y-mid { --justify: center; }
+.row.row.y-mid,
+.col.col.x-mid { --align: center; }
-.col.even,
-.row.even { --justify: space-evenly; }
+.row.row.x-btw,
+.col.col.y-btw { --justify: space-between; }
+.row.row.y-btw,
+.col.col.x-btw { --align: space-between; }
+
+.row.row.x-even,
+.col.col.y-even { --justify: space-evenly; }
+.row.row.y-even,
+.col.col.x-even { --align: space-evenly; }
+
+.row.row.x-around,
+.col.col.y-around { --justify: space-around; }
+.row.row.y-around,
+.col.col.x-around { --align: space-around; }
/*************************************************
POSITION UTILITIES
@@ -1137,14 +1514,14 @@
position: relative;
width: var(--chipchip);
height: var(--chip);
- background-color: var(--base-200);
+ background-color: rgb(var(--base-200));
border-radius: .75rem;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
border: 4px solid transparent;
- box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
+ box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset;
cursor: pointer;
margin: 5px;
transition: var(--trans-color);
@@ -1157,18 +1534,18 @@
position: absolute;
top: 0;
left: 0;
- background-color: var(--base);
+ background-color: rgb(var(--base));
transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */
border-radius: .75rem;
transition: var(--trans-transform);
- box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
+ box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125);
}
.switch :checked ~ .slider::before {
transform: translateX(1.5rem);
- box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
+ box-shadow: 0 0 .25rem 3px rgba(var(--base), .25);
}
.switch :checked ~ .slider {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
.switch :active ~ .slider::before {
@@ -1203,7 +1580,7 @@
margin-top: 0;
}
:not(:checked) ~ .slider .icon-sun-dim {
- color: var(--action-0);
+ color: rgb(var(--action-0));
}
/************************************************
@@ -1216,11 +1593,15 @@
grid-template-columns: var(--columns);
gap: 10px;
}
+.item-grid:empty {
+ display: none;
+}
+ .no-results,
.item-grid .empty {
height: 15vh;
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
border-radius: var(--radius);
- border: 2px dashed var(--base-200);
+ border: 2px dashed rgb(var(--base-200));
font-style: italic;
}
.item-grid.stats {
@@ -1231,6 +1612,30 @@
--width: 250px;
--columns: repeat(auto-fill, minmax(var(--width), 1fr));
}
+ .item-grid.split-2 {
+ --columns: repeat(2, 1fr);
+ }
+ .item-grid.split-3 {
+ --columns: repeat(3, 1fr);
+ }
+ .item-grid.split-4 {
+ --columns: repeat(4, 1fr);
+ }
+ .item-grid.split-5 {
+ --columns: repeat(5, 1fr);
+ }
+ .item-grid.split-6 {
+ --columns: repeat(6, 1fr);
+ }
+ .item-grid.split-7 {
+ --columns: repeat(7, 1fr);
+ }
+ .item-grid.split-8 {
+ --columns: repeat(8, 1fr);
+ }
+ .item-grid.split-9 {
+ --columns: repeat(9, 1fr);
+ }
}
.item-grid .item {
@@ -1280,7 +1685,7 @@
padding: 1rem 0;
}
.list-view .item:nth-of-type(even) {
- background-color: var(--base);
+ background-color: rgb(var(--base));
}
.list-view img {
width: 20%;
@@ -1299,8 +1704,8 @@
text-align: center;
margin: 1rem auto;
max-width: 66%;
- background-color: var(--base-100);
- border: 2px dashed var(--base-50);
+ background-color: rgb(var(--base-100));
+ border: 2px dashed rgb(var(--base-50));
padding: 1rem;
}
@@ -1310,10 +1715,11 @@
table {
white-space: nowrap;
width: 100%;
- display: block;
+ display: table;
margin: 0 0 2rem;
border-radius: 4px;
- height: var(--maxHeight);
+ height: min(100%, var(--maxHeight));
+ color: rgb(var(--contrast));
overflow: auto;
position: relative;
}
@@ -1321,7 +1727,7 @@
thead,tfoot {
position: sticky;
z-index: 10;
- background-color: var(--base);
+ background-color: rgb(var(--base));
text-transform: uppercase;
padding: .5rem 0;
line-height: 2;
@@ -1329,7 +1735,7 @@
}
tr:nth-of-type(even){
- background-color: var(--base-200);
+ background-color: rgb(var(--base-200));
}
tfoot th {
@@ -1341,16 +1747,16 @@
}
thead tr, tfoot tr {
- background-color: rgba(var(--base-rgb),var(--op-6));
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ background-color: rgba(var(--base),var(--op-6));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}
thead tr {
- border-bottom: 1px solid var(--contrast-200);
+ border-bottom: 1px solid rgb(var(--contrast-200));
}
tfoot tr {
- border-top: 1px solid var(--contrast-200);
+ border-top: 1px solid rgb(var(--contrast-200));
}
thead {
@@ -1403,16 +1809,16 @@
}
tbody tr:focus-within {
- background-color: var(--base-100);
- border-color: var(--action-50)
+ background-color: rgb(var(--base-100));
+ border-color: rgb(var(--action-50))
}
[data-stuck] {
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
position: sticky;
left: -1rem;
z-index: 15;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);
}
tbody [data-stuck] {
@@ -1421,9 +1827,12 @@
thead [data-stuck],
tfoot [data-stuck] {
- background: var(--base);
+ background: rgb(var(--base));
}
-
+figure:has(table) {
+ width: 100%;
+ height: max-content;
+}
/***********************************************
BUTTONS
***********************************************/
@@ -1440,9 +1849,9 @@
width: fit-content;
text-transform: uppercase;
text-decoration: none;
- background-color: var(--base-100);
- color: var(--contrast-50);
- border: 1px solid var(--base-200);
+ background-color: rgb(var(--base-100));
+ color: rgb(var(--contrast-50));
+ border: 1px solid rgb(var(--base-200));
border-radius: var(--radius);
padding: .25rem 1rem;
font-family: var(--heading);
@@ -1451,14 +1860,26 @@
min-height: var(--btn);
display: inline-flex;
position: relative;
- box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
+ box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset);
}
+ .btn.chip {
+ min-height: var(--chip);
+ }
+ .buttons.left a {
+ --justify: flex-start;
+ }
+ .buttons.right a {
+ --justify: flex-end;
+ }
+ .buttons.x-btw a {
+ --justify: space-between;
+ }
button.outline,
[type=submit].outline,
a.btn.outline,
.filters .btn + label,
.buttons .outline a {
- --color: var(--contrast);
+ --color: rgb(var(--contrast));
background-color: transparent;
color: var(--color);
border: 1px solid var(--color);
@@ -1479,7 +1900,7 @@
.buttons a:hover,
.buttons a:visited:hover,
.buttons a:focus {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
box-shadow: var(--shdw-none);
}
@@ -1496,9 +1917,9 @@
.buttons .outline a:hover,
.buttons .outline a:visited:hover,
.buttons .outline a:focus {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
- border-color: var(--action-0);
+ border-color: rgb(var(--action-0));
}
button:disabled,
@@ -1512,8 +1933,8 @@
.btn:disabled:focus + label {
opacity: .5;
cursor: not-allowed;
- background-color: var(--base-200);
- color: var(--contrast-200);
+ background-color: rgb(var(--base-200));
+ color: rgb(var(--contrast-200));
}
[type=submit] {
@@ -1525,13 +1946,13 @@
min-height:var(--chip);
}
.filters .btn + label {
- background-color: var(--base-100);
- border: 1px solid var(--base-200);
- color: var(--contrast-200);
+ background-color: rgb(var(--base-100));
+ border: 1px solid rgb(var(--base-200));
+ color: rgb(var(--contrast-200));
}
.filters .btn:checked + label {
- border-color: var(--contrast);
- color: var(--contrast);
+ border-color: rgb(var(--contrast));
+ color: rgb(var(--contrast));
}
/**** WP BLOCK BUTTONS ****/
@@ -1578,9 +1999,9 @@
button.sticky {
width: var(--btn);
height: var(--btn);
- background-color: rgba(var(--base-rgb),var(--op-4));
- color: var(--contrast);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ background-color: rgba(var(--base),var(--op-4));
+ color: rgb(var(--contrast));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
transition: var(--trans-size), var(--trans-color);
}
.main-actions .buttons button:hover,
@@ -1589,7 +2010,7 @@
a.sticky:focus,
button.sticky:hover,
button.sticky:focus {
- background-color: rgba(var(--action-rgb),var(--op-6));
+ background-color: rgba(var(--action-0),var(--op-6));
color: var(--action-contrast);
}
.main-actions .buttons button:disabled,
@@ -1599,8 +2020,8 @@
button.sticky:disabled:hover,
button.sticky:disabled:focus {
opacity: .5;
- background-color: rgba(var(--base-rgb),var(--op-3));
- color: var(--contrast);
+ background-color: rgba(var(--base),var(--op-3));
+ color: rgb(var(--contrast));
}
.qtoggle {
@@ -1610,16 +2031,16 @@
.main .m-actions .refresh {
width: var(--btn);
border-radius: 0;
- background-color: var(--base-50);
- color: var(--contrast);
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
}
.main .m-actions .refresh:hover,
.main .m-actions .refresh:focus {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
}
.main .refresh .indicator {
- background-color: rgba(var(--base-rgb), var(--op-3));
+ background-color: rgba(var(--base), var(--op-3));
top: 0;
right: 0;
height: 1.1em;
@@ -1677,9 +2098,9 @@
input[type=radio]:focus-visible + label,
input:focus,
input:focus-within {
- outline: 2px solid var(--action-0) !important;
+ outline: 2px solid rgb(var(--action-0)) !important;
outline-offset: 2px !important;
- box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
+ box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;
}
[aria-busy="true"] {
@@ -1740,7 +2161,7 @@
[type=radio]:focus + label,
[type=checkbox] + label:hover,
[type=checkbox]:focus + label {
- color: var(--action-0);
+ color: rgb(var(--action-0));
}
[type=radio] + label::before,
@@ -1772,7 +2193,7 @@
left: .3em;
width: .75rem;
height: .75rem;
- border: 2px solid var(--contrast-200);
+ border: 2px solid rgb(var(--contrast-200));
background-color: transparent;
border-radius: var(--radius);
}
@@ -1781,16 +2202,16 @@
}
[type=checkbox]:checked + label::before {
- background-color: var(--action-0);
- border-color: var(--base-50);
+ background-color: rgb(var(--action-0));
+ border-color: rgb(var(--base-50));
}
[type=checkbox]:checked + label::after {
display: block;
}
[type=radio]:checked + label::before {
- background-color: var(--action-0);
- box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-inset);
+ background-color: rgb(var(--action-0));
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-inset);
}
/** Button checkboxes and radios **/
input.btn + label::before,
@@ -1806,13 +2227,13 @@
[type=datetime-local], [type=time]) {
font-family: var(--body);
font-size: var(--txt-medium);
- color: var(--contrast);
+ color: rgb(var(--contrast));
padding: var(--p-y) var(--p-x);
border-radius: var(--radius);
- background-color: var(--base);
+ background-color: rgb(var(--base));
outline: 0;
- border: 1px solid var(--base-100);
- border-bottom: 2px solid var(--contrast-200);
+ border: 1px solid rgb(var(--base-100));
+ border-bottom: 2px solid rgb(var(--contrast-200));
width: 100%;
max-width: 100%;
margin: 0 4px;
@@ -1822,14 +2243,14 @@
input:is([type=date], [type=number], [type=text], [type=url],
[type=email], [type=tel], [type=password], [type=search],
[type=datetime-local], [type=time]):focus {
- outline: var(--action-50);
- background-color: var(--base-100);
- color: var(--contrast);
+ outline: rgb(var(--action-50));
+ background-color: rgb(var(--base-100));
+ color: rgb(var(--contrast));
}
textarea::placeholder,
input::placeholder {
font-family: var(--body);
- color: var(--base-200);
+ color: rgb(var(--base-200));
}
.field > label {
@@ -1839,7 +2260,7 @@
top: .75em;
left: 1em;
padding: 0 .5em;
- background-color:var(--base);
+ background-color:rgb(var(--base));
font-size:var(--txt-small);
font-weight: var(--fw-b-light);
text-transform:uppercase;
@@ -1854,7 +2275,7 @@
padding: 0;
}
.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
- background-color:var(--action-0);
+ background-color:rgb(var(--action-0));
color: var(--action-contrast);
border-radius: 4px;
}
@@ -1870,10 +2291,10 @@
SELECT
******************************************************************/
select {
- background: var(--base);
- border: 2px solid var(--base-100);
+ background: rgb(var(--base));
+ border: 2px solid rgb(var(--base-100));
border-radius: var(--radius);
- color: var(--contrast);
+ color: rgb(var(--contrast));
cursor: pointer;
font-family: var(--body);
font-size: var(--txt-small);
@@ -1882,15 +2303,15 @@
}
select:disabled {
- background-color: var(--base-50);
- border-color: var(--base-100);
- color: var(--base-200);
+ background-color: rgb(var(--base-50));
+ border-color: rgb(var(--base-100));
+ color: rgb(var(--base-200));
cursor: not-allowed;
}
select option {
- background: var(--base);
- color: var(--contrast);
+ background: rgb(var(--base));
+ color: rgb(var(--contrast));
padding: var(--sp1);
}
@@ -1898,22 +2319,22 @@
select option:focus,
select option:active,
select option:checked {
- background: var(--action-0);
- color: var(--base);
- box-shadow: 0 0 0 100px var(--action-0) inset;
+ background: rgb(var(--action-0));
+ color: rgb(var(--base));
+ box-shadow: 0 0 0 100px rgb(var(--action-0)) inset;
}
select option:checked {
- background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
- color: var(--base);
+ background: rgb(var(--action-0)) linear-gradient(0deg, rgb(var(--action-0)) 0%, rgb(var(--action-0)) 100%);
+ color: rgb(var(--base));
}
select:hover {
- border-color: var(--action-0);
+ border-color: rgb(var(--action-0));
}
select:focus {
- border-color: var(--action-0);
+ border-color: rgb(var(--action-0));
}
/******************************************************************
@@ -1927,11 +2348,24 @@
.search-container .clear-search {
opacity: 0;
cursor: default;
+ max-width: 0;
+ padding: 0;
+ flex-shrink: 0;
+ transition: width var(--trans-base), flex-shrink var(--trans-base);
+}
+ .search-container [type="search"]:focus + .clear-search {
+ max-width: unset;
+ padding: .25rem 1rem;
+ flex-shrink: unset;
+ }
+
+.search-container.open.open [hidden] {
+ display: block!important;
}
.search-container .icon.search {
padding: 4px 8px;
- color: var(--contrast-200);
+ color: rgb(var(--contrast-200));
--w: 3rem;
}
@@ -1981,9 +2415,9 @@
margin: 1rem 0;
}
.card {
- background-color: var(--base-100);
+ background-color: rgb(var(--base-100));
border-radius: var(--radius);
- box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
aspect-ratio: 3/2;
display: flex;
flex-direction: column;
@@ -1998,7 +2432,7 @@
.stat-number {
font-family: var(--heading);
font-weight: var(--fw-h-bold);
- color: var(--action-0);
+ color: rgb(var(--action-0));
font-size: var(--txt-xx-large);
}
/**************************************************
@@ -2012,25 +2446,25 @@
display: block;
border-radius: 6px;
overflow: hidden;
- background: var(--base-200);
+ background: rgb(var(--base-200));
position: relative;
}
.progress .fill {
height: 100%;
- background: var(--action-0);
+ background: rgb(var(--action-0));
border-radius: 6px;
width: 0;
transition: width .3s ease;
}
.completed .fill {
- background: var(--action-200);
+ background: rgb(var(--action-200));
}
.progress .details {
margin-top: 5px;
font-size: var(--txt-x-small);
- color: var(--contrast);
+ color: rgb(var(--contrast));
text-align: center;
padding: .25rem 0;
}
@@ -2062,11 +2496,11 @@
**************************************************************/
details {
padding: .25rem 0;
- border-top: 1px solid var(--base-200);
- border-bottom: 1px solid var(--base-200);
+ border-top: 1px solid rgb(var(--base-200));
+ border-bottom: 1px solid rgb(var(--base-200));
}
details[open] {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
details summary {
@@ -2079,19 +2513,19 @@
gap: .5rem;
}
details summary:hover {
- background-color: var(--base-100);
- border-color: var(--base-100);
- color: var(--contrast);
+ background-color: rgb(var(--base-100));
+ border-color: rgb(var(--base-100));
+ color: rgb(var(--contrast));
}
details[open] > summary {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
details summary::after {
content: '';
position: absolute;
right: .5rem;
top: .5rem;
- background-color: var(--contrast-100);
+ background-color: rgb(var(--contrast-100));
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-image: var(--icon);
@@ -2104,10 +2538,10 @@
transition: var(--trans-color), var(--trans-transform);
}
details summary:hover::after {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
details[open]:not(.all-filters) > summary::after {
- background-color: var(--contrast);
+ background-color: rgb(var(--contrast));
transform: rotate(-540deg);
transition: background-color var(--trans-base);
transition-property: background-color, transform;
@@ -2141,20 +2575,20 @@
user-select: all;
text-align: center;
border-radius: 4px;
- background-color: var(--base-200);
+ background-color: rgb(var(--base-200));
}
/********************************************************
OVERLAYS
********************************************************/
dialog[open],
aside.expanded {
- background-color: var(--base);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ background-color: rgb(var(--base));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
z-index: var(--z-5);
}
dialog::backdrop {
backdrop-filter: blur(5px);
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
}
dialog[open],
aside.main {
@@ -2170,9 +2604,9 @@
height: fit-content;
max-height: 90vh;
padding: var(--padding);
- background-color: var(--base-50);
- color: var(--contrast);
- border: 1px solid var(--base-200);
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
+ border: 1px solid rgb(var(--base-200));
}
dialog:is(.create,.edit,.bulkEdit)[open] {
width: 98vw;
@@ -2212,14 +2646,14 @@
height: var(--btn);
width: 100%;
z-index: var(--z-6);
- background-color: var(--action-100);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
+ background-color: rgb(var(--action-100));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up);
}
.m-actions button {
--wrap: nowrap;
box-shadow: none;
width: 100%;
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
--gap: .75rem;
font-size: var(--txt-x-small);
@@ -2228,8 +2662,8 @@
}
.m-actions button:hover,
.m-actions button:focus {
- background-color: var(--base);
- color: var(--contrast);
+ background-color: rgb(var(--base));
+ color: rgb(var(--contrast));
}
.m-actions button:first-of-type {
border-bottom-left-radius: 1rem;
@@ -2260,55 +2694,106 @@
max-height: var(--max);
max-width: var(--max);
border-radius: 0;
- background-color: rgba(var(--base-rgb), var(--op-6));
+ /*background-color: rgba(var(--base), var(--op-6));*/
+ background-color: transparent;
}
- .gallery > .wrap {
+ dialog.gallery > .wrap {
--wrap: nowrap;
- }
- .gallery .controls {
- position: absolute;
- bottom: 0;
- left: var(--btn_);
- right: 0;
+ position: relative;
+ overflow: hidden;
+ max-height: none;
+ margin: 0;
+ padding: 0;
+ height: 100%;
width: 100%;
- --wrap: nowrap;
- --gap: 0;
+ inset: 0;
}
- .gallery button.nav {
- width: 100%;
+ .gallery .hint {
+ position: absolute;
+ top: 1rem;
+ left: 50%;
+ transform: translateX(-50%);
+ letter-spacing: .12em;
+ pointer-events: none;
+ z-index: 2;
+ animation: hint-fade 3s ease forwards;
+ }
+ @keyframes hint-fade {
+ 0% { opacity: 1; }
+ 60% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
+ .gallery .controls {
+ --wrap: nowrap;
+ --align: flex-end;
+ --justify: space-between;
+ --gap: 0;
+ position: absolute;
+ inset: 0;
+ padding: 1rem;
+ z-index: 3;
+ pointer-events: none;
+ }
+ .gallery .controls button {
+ min-height: var(--chipchip);
+ pointer-events: all;
+ background: rgba(var(--base), var(--op-45));
+ border: 1px solid rgba(var(--contrast), var(--op-1));
+ color: rgba(var(--contrast), var(--op-5));
}
+ .gallery .controls button:hover,
+ .gallery .controls button:focus {
+ background: rgba(var(--base), var(--op-5));
+ color: rgb(var(--contrast));
+ }
+ .gallery .controls .cancel {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ }
+
dialog.gallery .cancel:focus,
dialog.gallery .cancel:hover {
- background: rgba(var(--base-rgb),var(--op-4));
+ background: rgba(var(--base),var(--op-4));
}
dialog.gallery .content {
position: relative;
- flex: 1 1 auto;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
overflow: hidden;
+ flex: 1;
+ display: flex;
}
-
- dialog.gallery .content .image {
- max-width: 90vw;
- max-height: 85vh;
- object-fit: contain;
- transition: transform 0.15s ease-out;
- touch-action: none;
- }
-
dialog.gallery .image-left,
dialog.gallery .image-right {
position: absolute;
+ width: 0;
+ height: 0;
opacity: 0;
pointer-events: none;
+ left: var(--offScreen);
}
+
+ dialog.gallery .content .image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ display: block;
+ transform-origin: center center;
+ will-change: transform;
+ transition: transform 0.15s ease-out;
+ touch-action: none;
+ user-select: none;
+ -webkit-user-drag: none;
+ cursor: default;
+ }
+ .gallery .image[style*="scale(1)"],
+ .gallery .image:not([style]) {
+ cursor: default;
+ }
+
dialog.gallery details {
position: absolute;
width: 100%;
@@ -2316,11 +2801,11 @@
bottom: 0;
left: 0;
right: 0;
- background: rgba(var(--base-rgb),var(--op-45));
- color: var(--contrast);
+ background: rgba(var(--base),var(--op-45));
+ color: rgb(var(--contrast));
border-radius: 4px;
overflow: hidden;
- z-index: 10;
+ z-index: 3;
}
dialog.gallery details:has(.item-info:empty) {
display: none;
@@ -2333,26 +2818,29 @@
}
dialog.gallery details[open] .item-info {
- padding: 1rem;
+ padding: 0.75rem 1rem 1rem;
+ font-size: var(--txt-x-small);
}
dialog.gallery .counter {
position: absolute;
- bottom: 1rem;
- left: 1rem;
- background: rgba(var(--base-rgb),var(--op-4));
- color: var(--contrast);
- padding: 0.4rem 0.8rem;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(var(--base),var(--op-4));
+ color: rgba(var(--contrast), var(--op-3));
+ padding: .4rem .8rem;
border-radius: 3px;
- font-size: 0.85rem;
- z-index: 10;
+ font-size: var(--txt-small);
+ letter-spacing: .1em;
+ z-index: 3;
}
dialog.gallery .favourite {
position: absolute;
- top: 1rem;
- left: 1rem;
- z-index: 10;
+ top: 0;
+ left: 0;
+ z-index: 3;
}
dialog.gallery .image {
@@ -2364,6 +2852,60 @@
opacity: 1;
}
+ul.gallery {
+ display: flex;
+ flex-wrap: wrap;
+ margin: .2em;
+ padding: 0;
+ list-style-type: none;
+}
+ ul.gallery::after {
+ content: '';
+ display: block;
+ flex-grow: 10;
+ }
+
+ ul.gallery li {
+ flex-grow: 1;
+ height: 40vh;
+ margin: .2em;
+ overflow: hidden;
+ }
+
+ ul.gallery figure {
+ min-width: 100%;
+ height: 100%;
+ }
+ ul.gallery figure.duotone img {
+ mix-blend-mode: multiply;
+ }
+
+
+
+ @media (max-aspect-ratio: 1/1) and (max-width: 480px) {
+ ul.gallery {
+ flex-direction: row;
+ }
+ ul.gallery li {
+ height: auto;
+ width: 100%;
+ }
+ ul.gallery figure {
+ width: 100%;
+ max-height: 75vh;
+ min-width: 0;
+ }
+ }
+ @media (max-aspect-ratio: 1/1) {
+ ul.gallery li {
+ height: 30vh;
+ }
+ }
+ @media (max-height: 480px) {
+ ul.gallery li {
+ height: 80vh;
+ }
+ }
/*** POPUPS: notifications, cart, queue ***/
aside.main.main {
--wrap: nowrap;
@@ -2401,7 +2943,7 @@
}
aside.main header {
--w: 2em;
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
padding: 1rem;
}
@@ -2422,7 +2964,7 @@
--dir: row;
--align: center;
margin: 0;
- border-bottom: 1px solid var(--base-200);
+ border-bottom: 1px solid rgb(var(--base-200));
}
nav.share ul,
nav.share li,
@@ -2430,7 +2972,7 @@
height: var(--chipchip);
}
nav.share a:hover {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
}
aside.main h4,
@@ -2449,7 +2991,7 @@
padding: 1rem;
}
.main section + section {
- border-top: 1px solid var(--base-200);
+ border-top: 1px solid rgb(var(--base-200));
}
.qtoggle .count,
@@ -2472,17 +3014,17 @@
font-size: var(--txt-small);
}
#queue.synced + .qtoggle .indicator {
- background-color: var(--success);
+ background-color: rgb(var(--success));
}
#queue.pending + .qtoggle .indicator {
- background-color: var(--warning);
+ background-color: rgb(var(--warning));
animation: pulse 2s infinite;
}
.refresh.fetching .icon,
#queue.pending:not(.expanded) + .qtoggle .icon {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
animation: spin 1s var(--trans-fn) infinite;
}
.main.expanded + .qtoggle {
@@ -2523,15 +3065,15 @@
}
.btn + label .indicator:not(:empty) {
font-size: var(--txt-small);
- background-color: var(--base);
- border: 1px solid var(--contrast);
+ background-color: rgb(var(--base));
+ border: 1px solid rgb(var(--contrast));
width: 1.75em;
height: 1.75em;
padding: .3em;
}
.main > .header {
- border-bottom: 1px solid var(--base-200);
+ border-bottom: 1px solid rgb(var(--base-200));
padding: 1rem 0;
flex-shrink: 0;
}
@@ -2544,14 +3086,14 @@
}
.queue-actions {
flex-shrink: 0;
- border-top: 1px solid var(--base-200);
+ border-top: 1px solid rgb(var(--base-200));
}
.queue-actions button {
width: 100%;
}
.main .item {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
padding: 15px;
border-radius: var(--radius);
box-shadow: var(--shdw-none);
@@ -2572,7 +3114,7 @@
.main .item .time {
padding: .5rem 0;
font-size: var(--txt-small);
- border: 1px solid var(--base-200);
+ border: 1px solid rgb(var(--base-200));
border-width: 1px 0;
margin: .25rem 0;
}
@@ -2614,12 +3156,12 @@
}
.callout.callout {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
color: var(--action-contrast);
}
.callalt.callalt {
- background-color: var(--secondary-0);
+ background-color: rgb(var(--secondary-0));
color: var(--secondary-contrast);
}
@@ -2639,33 +3181,78 @@
/********************************************************
WP BLOCKS
********************************************************/
+/** MEDIA TEXT **/
+.media-text > * {
+ flex: 1;
+}
/** COVER **/
.cover {
+ --color: rgba(var(--action-0), var(--op-5));
position: relative;
overflow: hidden;
min-height: 60vh;
padding: var(--btn);
}
- .cover::before {
- content: '';
- z-index: var(--coverIndex);
- background-color: var(--action-0);
- mix-blend-mode: var(--coverBlend);
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- }
-.cover::before,
+ .cover:not(.duotone)::before {
+ content: '';
+ /*z-index: var(--coverIndex);*/
+ background-color: var(--dark-0);
+ /*mix-blend-mode: var(--coverBlend);*/
+ /*background-position: center;*/
+ /*background-repeat: no-repeat;*/
+ /*background-size: cover;*/
+ }
+ .cover .overlay {
+ background-color: var(--dark-0);
+ }
+ .overlay.op-1 {
+ opacity: var(--op-1);
+ }
+ .overlay.op-2 {
+ opacity: var(--op-2);
+ }
+ .overlay.op-3 {
+ opacity: var(--op-3);
+ }
+ .overlay.op-4 {
+ opacity: var(--op-4);
+ }
+ .overlay.op-45 {
+ opacity: var(--op-45);
+ }
+ .overlay.op-5 {
+ opacity: var(--op-5);
+ }
+ .overlay.op-6 {
+ opacity: var(--op-6);
+ }
+ .cover:has(.overlay)::before {
+ display: none;
+ }
+.cover .overlay,
+.cover:not(.duotone)::before,
.cover > video,
.cover > img {
position: absolute;
inset: 0;
width: 100%;
- max-width: 100%;
+ max-width: none!important;
height: 100%;
margin: 0;
}
+.cover > img,
+.cover > video {
+ mix-blend-mode: luminosity;
+ max-width: none!important;
+ width: 100%!important;
+}
+.cover .overlay,
+.cover:not(.duotone)::before {
+ z-index: 2;
+ background-color: var(--color);
+ mix-blend-mode: color;
+}
.cover .content {
@@ -2679,62 +3266,123 @@
}
.cover > img {
- z-index: 1;
- opacity: .5;
- mix-blend-mode: luminosity;
+ /*z-index: 1;*/
+ /*opacity: .5;*/
+ /*mix-blend-mode: luminosity;*/
object-fit: cover;
}
@media (min-width: 768px) {
.cover > img {
- opacity: .33;
+ /*opacity: .33;*/
}
}
+/** IMAGE **/
+figure {
+ overflow: hidden;
+ position: relative;
+}
+figure:is(.op-1,.op-2,.op-3,.op-4,.op-5,.op-6,.op-45)::before {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ content: '';
+}
+ figure.op-1::before {
+ opacity: var(--op-1);
+ }
+ figure.op-2::before {
+ opacity: var(--op-2);
+ }
+ figure.op-3::before {
+ opacity: var(--op-3);
+ }
+ figure.op-45::before {
+ opacity: var(--op-45);
+ }
+ figure.op-4::before {
+ opacity: var(--op-4);
+ }
+ figure.op-5::before {
+ opacity: var(--op-5);
+ }
+ figure.op-6::before {
+ opacity: var(--op-6);
+ }
+
+ figure.action-0::before {
+ background-color: rgb(var(--action-0));
+ }
+ figure.action-50::before {
+ background-color: rgb(var(--action-50));
+ }
+ figure.action-100::before {
+ background-color: rgb(var(--action-100));
+ }
+ figure.action-200::before {
+ background-color: rgb(var(--action-200));
+ }
+ figure.secondary-0::before {
+ background-color: rgb(var(--secondary-0));
+ }
+ figure.secondary-50::before {
+ background-color: rgb(var(--secondary-50));
+ }
+ figure.secondary-100::before {
+ background-color: rgb(var(--secondary-100));
+ }
+ figure.secondary-200::before {
+ background-color: rgb(var(--secondary-200));
+ }
+ figure.base::before {
+ background-color: rgb(var(--base));
+ }
+ figure.base-50::before {
+ background-color: rgb(var(--base-50));
+ }
+ figure.base-100::before {
+ background-color: rgb(var(--base-100));
+ }
+ figure.base-200::before {
+ background-color: rgb(var(--base-200));
+ }
+ figure.contrast::before {
+ background-color: rgb(var(--contrast));
+ }
+ figure.contrast-50::before {
+ background-color: rgb(var(--contrast-50));
+ }
+ figure.contrast-100::before {
+ background-color: rgb(var(--contrast-100));
+ }
+ figure.contrast-200::before {
+ background-color: rgb(var(--contrast-200));
+ }
+
+.bg-fixed {
+ background-attachment: fixed;
+}
+.bg-repeat.bg-repeat {
+ background-repeat: repeat;
+ background-size: 33vw;
+}
+[data-bg-img] {
+ background-size: cover;
+ background-repeat: no-repeat;
+}
/** BLOCKQUOTE **/
blockquote {
- --background: var(--base-100);
- --border: var(--action-0);
- line-height: 1.2;
- padding: var(--btn);
- border-radius: 4rem;
- background-color: var(--background);
-}
-
-blockquote .content {
- margin: 12px auto;
- max-width: min(680px, 80vw);
+ margin-left: 10vw;
position: relative;
- font-family: var(--heading);
- font-weight: var(--fw-h-bold);
- padding: 3rem 2.5rem;
- border-radius: var(--radius-outer);
- border: 2px solid var(--border);
+ padding: var(--btn);
}
-
-blockquote .content::before,
-blockquote .content::after {
- position: absolute;
- content: '';
- left: 50px;
-}
-
-blockquote .content::before {
- width: 80px;
- border: 6px solid var(--background);
- bottom: -3px;
- z-index: 2;
-}
-
-blockquote .content::after {
- border: 2px solid var(--border);
- border-radius: 0 100% 0 0;
- width: 60px;
- height: 60px;
- bottom: -60px;
- border-bottom: 0;
- border-left: 0;
- z-index: 3;
-}
+ blockquote .icon {
+ position: absolute;
+ top: var(--btn);
+ left: calc((10vw + var(--btn)) * -1);
+ --w: 10vw;
+ opacity: var(--op-1);
+ }
blockquote cite {
padding: 15px 0 0 12px;
@@ -2747,21 +3395,49 @@
border-radius: 0;
margin: 4rem auto;
padding: 3rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);;
}
blockquote.pull cite {
margin: 0;
}
/** QUERY **/
-.loop .item-grid {
- grid-template-columns: repeat(1, 1fr);
+.loop {
+ padding: var(--sp4) var(--sp1);
}
-@media (min-width: 768px) {
- .loop .item-grid {
- grid-template-columns: repeat(2, 1fr);
+.loop :is(h1,h2,h3,h4,h5,h6) {
+ margin: .5em 0;
+}
+.loop :is(h1,h2,h3,h4,h5,h6):has(+ time) {
+ margin-bottom: 0;
+}
+ .loop :is(h1,h2,h3,h4,h5,h6) + time {
+ font-size: var(--txt-x-small);
+ margin-top: 0;
}
+.loop li {
+ list-style: none;
}
+.loop p:has(.read-more) {
+ text-align: right;
+}
+
+.loop li > figure {
+ float: left;
+ margin-right: var(--chip_);
+ margin-top: 0;
+ max-width: 30%;
+ aspect-ratio: 1;
+}
+
+.no-results p,
+.no-results {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
/** TODO: LIST OVERRIDES **/
/*********************************************************
DIRECTORY
@@ -2786,8 +3462,8 @@
width: 100%;
top: var(--btn);
left: 0;
- color: var(--base);
- text-shadow: var(--base-200) 1px 1px 0;
+ color: rgb(var(--base));
+ text-shadow: rgb(var(--base-200)) 1px 1px 0;
user-select: none;
}
.directory-list >ul > li {
@@ -2795,7 +3471,7 @@
align-items: flex-start;
}
.directory-list >ul > li:nth-of-type(even) {
- background-color: var(--base-100);
+ background-color: rgb(var(--base-100));
}
/** The letter's list **/
@@ -2806,10 +3482,10 @@
padding: .35rem .5rem;
}
.directory-list ul ul li:nth-of-type(even) {
- background-color: var(--base-100);
+ background-color: rgb(var(--base-100));
}
.directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
@media (min-width: 768px) {
.directory-list h3 {
@@ -2855,9 +3531,9 @@
height: fit-content;
width: min(400px, 60vw);
border-radius: var(--radius-outer);
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
padding: 2rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
position: relative;
}
@@ -2872,7 +3548,7 @@
}
.loading[open] i.icon {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
dialog.loading[open] i.icon {
@@ -2880,7 +3556,7 @@
}
dialog.loading[open] h3 {
- color: var(--contrast);
+ color: rgb(var(--contrast));
margin: 2rem 1rem auto !important;
font-size: var(--txt-large);
width: -moz-fit-content;
@@ -2904,7 +3580,7 @@
width: 12px;
height: 12px;
border: 2px solid transparent;
- border-top: 2px solid var(--action-50);
+ border-top: 2px solid rgb(var(--action-50));
border-radius: 50%;
animation: spin 1s var(--trans-fn) infinite;
}
@@ -2924,13 +3600,13 @@
@keyframes pulse-color {
0% {
- box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
+ box-shadow: 0 0 0 0 rgba(var(--action-0), .4);
}
30% {
- box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
+ box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);
}
100% {
- box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
+ box-shadow: 0 0 0 0 rgba(var(--action-0), 0);
}
}
@@ -2970,3 +3646,7 @@
}
}
+/*.group {*/
+/* background-color: rgb(var(--base));*/
+/* margin: 1rem 0;*/
+/*}*/
\ No newline at end of file
--
Gitblit v1.10.0