From 73846815bb02a89180b148a38e30a03981028692 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 28 May 2026 19:16:59 +0000
Subject: [PATCH] =gitblit switch
---
all.css | 1255 +++++++++++++++++++++++------------------------------------
1 files changed, 485 insertions(+), 770 deletions(-)
diff --git a/all.css b/all.css
index 071a9f8..8429be1 100644
--- a/all.css
+++ b/all.css
@@ -21,122 +21,128 @@
--fw-b-bold: 900;
--fw-b-light: 200;
+ --txt-small: clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem);
+ --txt-x-small: clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem);
+ --txt-medium: clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem);
+ --txt-x-medium: clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem);
+ --txt-large: clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem);
+ --txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem);
+ --txt-xx-large: clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem);
+ --txt-xxx-large: clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem);
+ --txt-enormous: calc(26vh - 4rem);
+
/* Colours
For best results, generate colours from base colours using: https://uicolors.app/generate/
or sass darken/lighten by 5%: http://scg.ar-ch.org/
*/
- --light-0: #ededf4;
- --light-50: #e3e3ee;
- --light-100: #dadae8;
- --light-200: #d1d1e3;
- --light-rgb: 237,237,244;
+ --light-0: 237,237,244; /* #ededf4; */
+ --light-50: 227,227,238; /* #e3e3ee; */
+ --light-100: 218,218,232; /* #dadae8; */
+ --light-200: 209,209,227; /* #d1d1e3; */
- --dark-0: #2a2b2a;
- --dark-50: #2f302f;
- --dark-100: #393a39;
- --dark-200: #3e403e;
- --dark-rgb: 42,43,42;
+ --dark-0: 42,43,42; /* #2a2b2a; */
+ --dark-50: 47,48,47; /* #2f302f; */
+ --dark-100: 57,58,57; /* #393a39; */
+ --dark-200: 62,64,62; /* #3e403e; */
- --action-0: #ef767a;
- --action-50: #f28d90;
- --action-100: #f4a4a6;
- --action-200: #f7bbbd;
- --action-rgb: 239,118,122;
+ --action-0: 239,118,122; /* #ef767a; */
+ --action-50: 242,141,144; /* #f28d90; */
+ --action-100: 244,164,166; /* #f4a4a6; */
+ --action-200: 247,187,189; /* #f7bbbd; */
--action-contrast: var(--light-0);
- --secondary-0: #329dcb;
- --secondary-50: #5ab1d6;
- --secondary-100: #83c4e0;
- --secondary-200: #acd8ea;
- --secondary-rgb: 50,157,203;
+ --secondary-0: 50,157,203; /* #329dcb; */
+ --secondary-50: 90,177,214; /* #5ab1d6; */
+ --secondary-100: 131,196,224;/* #83c4e0; */
+ --secondary-200: 172,216,234;/* #acd8ea; */
--secondary-contrast: var(--light-0);
- --success: #22C55E;
- --successLight: #d4edda;
- --successDark: #155724;
- --successBack: var(--successLight);
- --successText: var(--successDark);
- --warning: #E8A737;
- --warningLight: #F6E5CB;
- --warningDark: #231806;
- --warningBack: var(--warningLight);
- --warningText: var(--warningDark);
- --error: #EF4444;
- --errorLight: #f8d7da;
- --errorDark: #721c24;
- --errorBack: var(--errorLight);
- --errorText: var(--errorDark);
+ --success: 34,197,94; /* #22C55E; */
+ --successLight: 212,237,218;/* #d4edda; */
+ --successDark: 21,87,36; /* #155724; */
+
+ --warning: 232,167,55; /* #E8A737; */
+ --warningLight: 246,229,203;/* #F6E5CB; */
+ --warningDark: 35,24,6; /* #231806; */
+
+ --error: 239,68,68; /* #EF4444; */
+ --errorLight: 248,215,218; /* #f8d7da; */
+ --errorDark: 114,28,36; /* #721c24; */
- --red-0: #ef767a;
- --red-50: #ec5f64;
- --red-100: #ea484e;
- --red-200: #e73238;
- --red-rgb: 239,118,122;
+ --red-0: 239,118,122; /* #ef767a; */
+ --red-50: 236,95,100; /* #ec5f64; */
+ --red-100: 234,72,78; /* #ea484e; */
+ --red-200: 231,50,56; /* #e73238; */
+ --red-contrast: var(--dark-0);
- --orange-0: #ef9e76;
- --orange-50: #f2ae8d;
- --orange-100: #f4bea4;
- --orange-200: #f7cfbb;
- --orange-rgb: 239,158,118;
+ --orange-0: 239,158,118; /* #ef9e76; */
+ --orange-50: 242,174,141; /* #f2ae8d; */
+ --orange-100: 244,190,164; /* #f4bea4; */
+ --orange-200: 247,207,187; /* #f7cfbb; */
+ --orange-contrast: var(--dark-0);
- --yellow-0: #E3BE39;
- --yellow-50: #e9cd66;
- --yellow-100: #f0db92;
- --yellow-200: #f6eabf;
- --yellow-rgb: 227,190,57;
+ --yellow-0: 227,190,57; /* #E3BE39; */
+ --yellow-50: 233,205,102; /* #e9cd66; */
+ --yellow-100: 240,219,146; /* #f0db92; */
+ --yellow-200: 246,234,191; /* #f6eabf; */
+ --yellow-contrast: var(--dark-0);
- --green-0: #32cb82;
- --green-50: #5ad69b;
- --green-100: #83e0b4;
- --green-200: #aceacc;
- --green-rgb: 50,203,130;
+ --green-0: 50,203,130; /* #32cb82; */
+ --green-50: 90,214,155; /* #5ad69b; */
+ --green-100: 131,224,180; /* #83e0b4; */
+ --green-200: 172,234,204; /* #aceacc; */
+ --green-contrast: var(--dark-0);
- --blue-0: #329dcb;
- --blue-50: #5ab1d6;
- --blue-100: #83c4e0;
- --blue-200: #acd8ea;
- --blue-rgb: 50,157,203;
+ --blue-0: 50,157,203; /* #329dcb; */
+ --blue-50: 90,177,214; /* #5ab1d6; */
+ --blue-100: 131,196,224; /* #83c4e0; */
+ --blue-200: 172,216,234; /* #acd8ea; */
+ --blue-contrast: var(--dark-0);
- --purple-0: #ba76ef;
- --purple-50: #c58df2;
- --purple-100: #d1a4f4;
- --purple-200: #dcbbf7;
- --purple-rgb: 186,118,239;
+ --purple-0: 186,118,239; /* #ba76ef; */
+ --purple-50: 197,141,242; /* #c58df2; */
+ --purple-100: 209,164,244; /* #d1a4f4; */
+ --purple-200: 220,187,247; /* #dcbbf7; */
+ --purple-contrast: var(--dark-0);
+
--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);
+
+ --successBack: var(--successLight);
+ --successText: var(--successDark);
+ --warningBack: var(--warningLight);
+ --warningText: var(--warningDark);
+ --errorBack: var(--errorLight);
+ --errorText: var(--errorDark);
}
body:has(#theme-switcher:checked){
- --action-50: #ec5f64;
- --action-100: #ea484e;
- --action-200: #e73238;
+ --action-50: 236,95,100; /* #ec5f64; */
+ --action-100: 234,72,78; /* #ea484e; */
+ --action-200: 231,50,56; /* #e73238; */
- --secondary-50: #287da2;
- --secondary-100: #1e5e79;
- --secondary-200: #143e50;
+ --secondary-50: 40,125,162; /* #287da2; */
+ --secondary-100: 30,94,121; /* #1e5e79; */
+ --secondary-200: 20,62,80; /* #143e50; */
--contrast: var(--light-0);
--contrast-50: var(--light-50);
--contrast-100: var(--light-100);
--contrast-200: var(--light-200);
- --contrast-rgb: 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);
--successBack: var(--successDark);
--successText: var(--successLight);
@@ -145,29 +151,39 @@
--errorBack: var(--errorDark);
--errorText: var(--errorLight);
- --red-50: #ec5f64;
- --red-100: #ea484e;
- --red-200: #e73238;
+ --red-50: 236,95,100; /* #ec5f64; */
+ --red-100: 234,72,78; /* #ea484e; */
+ --red-200: 231,50,56; /* #e73238; */
+ --red-contrast: var(--light-0);
- --orange-50: #ec8e5f;
- --orange-100: #ea7e48;
- --orange-200: #e76e32;
+ --orange-50: 236,142,95; /* #ec8e5f; */
+ --orange-100: 234,126,72; /* #ea7e48; */
+ --orange-200: 231,110,50; /* #e76e32; */
+ --orange-contrast: var(--light-0);
- --yellow-50: #cca61d;
- --yellow-100: #9f8217;
- --yellow-200: #735d10;
+ --yellow-50: 204,166,29; /* #cca61d; */
+ --yellow-100: 159,130,23; /* #9f8217; */
+ --yellow-200: 115,93,16; /* #735d10; */
+ --yellow-contrast: var(--light-0);
- --green-50: #28a268;
- --green-100: #1e794e;
- --green-200: #145033;
+ --green-50: 40,162,104; /* #28a268; */
+ --green-100: 30,121,78; /* #1e794e; */
+ --green-200: 20,80,51; /* #145033; */
+ --green-contrast: var(--light-0);
- --blue-50: #287da2;
- --blue-100: #1e5e79;
- --blue-200: #143e50;
+ --blue-50: 40,125,162; /* #287da2; */
+ --blue-100: 30,94,121; /* #1e5e79; */
+ --blue-200: 20,62,80; /* #143e50; */
+ --blue-contrast: var(--dark-0);
- --purple-50: #a348ea;
- --purple-100: #8c1be4;
- --purple-200: #7015b7;
+ --purple-50: 163,72,234; /* #a348ea; */
+ --purple-100: 140,27,228; /* #8c1be4; */
+ --purple-200: 112,21,183; /* #7015b7; */
+ --purple-contrast: var(--light-0);
+}
+
+body {
+ overflow-x: clip;
}
/*** FONTS START **/
/** Download your Fonts from: https://gwfh.mranftl.com/
@@ -265,42 +281,64 @@
url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/*** FONTS END ***/
+body.art.art, .art {
+ --action-0: var(--blue-0);
+ --action-50: var(--blue-50)!important;
+ --action-100: var(--blue-100)!important;
+ --action-200: var(--blue-200)!important;
+ --action-contrast: var(--blue-contrast)!important;
+}
+body.design.design, .design {
+ --action-0: var(--red-0);
+ --action-50: var(--red-50)!important;
+ --action-100: var(--red-100)!important;
+ --action-200: var(--red-200)!important;
+ --action-contrast: var(--red-contrast)!important;
+}
+body.development.development, .development {
+ --action-0: var(--orange-0);
+ --action-50: var(--orange-50)!important;
+ --action-100: var(--orange-100)!important;
+ --action-200: var(--orange-200)!important;
+ --action-contrast: var(--orange-contrast)!important;
+}
+body.strategy.strategy, .strategy {
+ --action-0: var(--green-0);
+ --action-50: var(--green-50)!important;
+ --action-100: var(--green-100)!important;
+ --action-200: var(--green-200)!important;
+ --action-contrast: var(--green-contrast)!important;
+}
+body.writing.writing, .writing {
+ --action-0: var(--purple-0);
+ --action-50: var(--purple-50)!important;
+ --action-100: var(--purple-100)!important;
+ --action-200: var(--purple-200)!important;
+ --action-contrast: var(--purple-contrast)!important;
+}
+body.project.project, .project {
+ --action-0: var(--yellow-0);
+ --action-50: var(--yellow-50)!important;
+ --action-100: var(--yellow-100)!important;
+ --action-200: var(--yellow-200)!important;
+ --action-contrast: var(--yellow-contrast)!important;
+}
-.design a, a.design{
- color: var(--red-0);
+a {
+ color: rgb(var(--action-0));
}
-.design a:hover, a.design:hover {
- background-color: var(--red-0);
- color: var(--red-200);
-}
-.development a, a.development {
- color: var(--orange-0);
-}
-.development a:hover, a.development:hover {
- background-color: var(--orange-0);
- color: var(--orange-200);
-}
-.strategy a, a.strategy {
- color: var(--green-0);
-}
-.strategy a:hover, a.strategy:hover {
- background-color: var(--green-0);
- color: var(--green-200);
-}
-.art a, a.art {
- color: var(--blue-0);
-}
-.art a:hover, a.art:hover {
- background-color: var(--blue-0);
- color: var(--blue-200);
-}
-.writing a, a.writing {
- color: var(--purple-0);
-}
-.writing a:hover, a.writing:hover {
- background-color: var(--purple-0);
- color: var(--purple-200);
-}
+ a:visited {
+ color: rgb(var(--action-100));
+ }
+ a.current.current,
+ a:hover,
+ a:focus,
+ a:visited:hover,
+ a:visited:focus {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-200));
+ }
+
li {
list-style: inside;
@@ -313,40 +351,27 @@
}
.condensed.condensed a {
- color: var(--contrast);
+ color: rgb(var(--contrast));
border-radius: 0;
- border-bottom: 2px solid var(--action-0);
+ border-bottom: 2px solid rgb(var(--action-0));
+ padding: .25rem 1rem;
}
-.condensed .design a {
- border-color: var(--red-0);
-}
-.condensed .development a {
- border-color: var(--orange-0);
-}
-.condensed .strategy a {
- border-color: var(--green-0);
-}
-.condensed .art a {
- border-color: var(--blue-0);
-}
-.condensed .writing a {
- border-color: var(--purple-0);
-}
+ .condensed.condensed a:hover,
+ .condensed.condensed a:focus {
+ color: var(--action-contrast);
+ }
.intro + nav {
grid-column: full;
+ margin: 0!important;
}
- .intro + nav ul {
- width: 100%;
- }
- .intro + nav li,
- .intro + nav a {
- min-height: var(--chip_);
- border-radius: 8px 0 8px 0!important;
- }
- .intro + nav li{
- width: 23%;
- }
+/* .intro + nav ul {*/
+/* width: 100%;*/
+/* }*/
+/* .intro + nav li,*/
+/* .intro + nav a {*/
+/* min-height: var(--chip_);*/
+/* }*/
:is(h1, h2, h3, h4, h5, h6) {
@@ -356,15 +381,15 @@
margin: 0 auto .25em 1.5rem;
}
.pre-footer {
- background: var(--base);
+ background: rgb(var(--base));
padding: 3rem 0 2rem;
}
.pre-footer p {
margin: 0 auto .25rem 1rem;
}
.pre-footer a {
- background-color: var(--action-0);
- color: var(--action-contrast);
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
}
footer {
@@ -385,8 +410,8 @@
margin-bottom: 1rem;
}
-header {
- justify-content: center;
+.wp-site-blocks.wp-site-blocks > header {
+ --justify: center;
gap: 1rem;
}
header .icon-logo {
@@ -435,25 +460,31 @@
font-size: var(--txt-x-large);
}
}
-@media (max-width: 768px) {
- footer, .pre-footer {
- padding-right: var(--btn_);
+footer {
+ z-index: var(--z-9);
+ padding: 1rem 2rem!important;
+}
+@media (min-width:768px) {
+ .w-50 {
+ max-width: calc(50% - 3rem)!important;
+ margin: 0 1rem!important;
}
}
-
-main > section:nth-of-type(even) {
- background-color: var(--base-100);
+main > * {
+ margin-left: var(--btn)!important;
+}
+main > section {
max-width: 100vw;
- padding: 3rem 0;
+ padding: 3rem var(--btn) 3rem 1.5rem;
+ margin-left: 0!important;
+}
+main > section:nth-of-type(even) {
+ background-color: rgb(var(--base-100));
}
main > section > * {
width: 100%;
max-width: var(--content);
- margin-left: 1.5rem;
- margin-right: auto;
-}
-main > section:nth-of-type(even) > * {
- max-width: var(--content);
+ margin-left: 1.5rem!important;
}
main > section.callout:last-of-type {
@@ -468,531 +499,70 @@
transition: var(--trans-size);
}
-.cover.alt {
- overflow: visible;
- height: 45vh;
- min-height: 45vh;
- padding:0;
+.cover {
+ padding: 0;
+ color: rgb(var(--action-0));
+ background-color: rgb(var(--action-200));
}
-.cover.alt::before {
- display: none;
-}
-
-.cover.alt + #top {
- max-width: 100%;
- margin: 0 var(--btn_) 0 0!important;
- width: 100%;
- z-index: var(--z-1);
-}
-
-.cover.alt + #top#top h1 {
- margin: 1rem 0 0;
- padding-right: 1rem;
- text-align: right;
-}
-
-.cover.alt img {
- object-fit: cover;
- width:100%;
- height: 100%;
- border-radius: 0 0 10rem 10rem;
- transition: var(--trans-transform);
-}
-.cover.alt div {
- max-width: none;
-}
-
-.cover.art {
- --color-0: var(--blue-0);
- --color-1: var(--blue-50);
- --color-2: var(--blue-100);
- --color-3: var(--blue-200);
-}
-.cover.design {
- --color-0: var(--red-0);
- --color-1: var(--red-50);
- --color-2: var(--red-100);
- --color-3: var(--red-200);
-}
-.cover.development {
- --color-0: var(--orange-0);
- --color-1: var(--orange-50);
- --color-2: var(--orange-100);
- --color-3: var(--orange-200);
-}
-.cover.strategy {
- --color-0: var(--green-0);
- --color-1: var(--green-50);
- --color-2: var(--green-100);
- --color-3: var(--green-200);
-}
-.cover.writing {
- --color-0: var(--purple-0);
- --color-1: var(--purple-50);
- --color-2: var(--purple-100);
- --color-3: var(--purple-200);
-}
-
-.cover.art >div:nth-of-type(4n+1) img,
-.cover.writing div:nth-of-type(4),
-.cover.design div:nth-of-type(4n+1) div,
-.cover.development div:nth-of-type(4n+1) div{
- background-color: var(--color-0);
- border-color: var(--color-2);
-}
-
-.cover.art >div:nth-of-type(4n+2) img,
-.cover.writing div:nth-of-type(3),
-.cover.writing div:nth-of-type(5),
-.cover.design div:nth-of-type(4n+2) div,
-.cover.strategy div:nth-of-type(3n+1),
-.cover.development div:nth-of-type(4n+2) div{
- background-color: var(--color-1);
- border-color: var(--color-3);
-}
-.cover.art >div:nth-of-type(4n+3) img,
-.cover.writing div:nth-of-type(2),
-.cover.writing div:nth-of-type(6),
-.cover.design div:nth-of-type(4n+3) div,
-.cover.strategy div:nth-of-type(3n+2) {
- background-color: var(--color-2);
- border-color: var(--color-0);
-}
-.cover.art >div:nth-of-type(4n+4) img,
-.cover.writing div:nth-of-type(1),
-.cover.writing div:nth-of-type(7),
-.cover.design div:nth-of-type(4n+4) div,
-.cover.strategy div:nth-of-type(3n+3) {
- background-color: var(--color-3);
- border-color: var(--color-1);
-}
-
-
-.cover.strategy div,
-.cover.development div div,
-.cover.art div {
- z-index: 0;
- overflow: hidden;
- background-color: var(--base);
- border: 1vw solid var(--base-100);
-}
-
-/*.cover.art {*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/* align-items: center;*/
-/* position: relative;*/
-/* --width: 48vh;*/
-/* --half: calc(var(--width) / 2);*/
-/* --quarter: calc(var(--half) / 2);*/
-/* --offHalf: calc(var(--half) - 3vw);*/
-/*}*/
-/* .cover.art .img {*/
-/* min-height: var(--width);*/
-/* width: var(--half);*/
-/* overflow: hidden;*/
-/* background-color: transparent!important;*/
-/* border: none;*/
-/* }*/
-/* .cover.art .img:nth-child(1) {*/
-
-/* }*/
-/* .cover.art .img div {*/
-/* aspect-ratio: 1;*/
-/* width: var(--width);*/
-/* border-radius: 50%;*/
-/* min-height: var(--width);*/
-/* }*/
-/* .cover.art > div:nth-child(2),*/
-/* .cover.art > div:nth-child(4) {*/
-/* border-radius: 50%;*/
-/* position: absolute;*/
-/* width: 25vw;*/
-/* min-height: 25vw;*/
-/* border-width: .5vw;*/
-/* }*/
-/* .cover.art > div:nth-child(2) {*/
-/* left: 10vw;*/
-/* top: 10vw;*/
-/* }*/
-/* .cover.art > div:nth-child(4) {*/
-/* right: var(--btn_);*/
-/* top: 48vh;*/
-/* }*/
-/* @media (min-width: 768px) {*/
-
-/* .cover.art > div:nth-child(2),*/
-/* .cover.art > div:nth-child(4) {*/
-/* width: 15vw;*/
-/* min-height: 15vw;*/
-/* }*/
-/* .cover.art > div:nth-child(2) {*/
-/* left: var(--half);*/
-/* top: var(--quarter);*/
-/* }*/
-/* .cover.art > div:nth-child(4) {*/
-/* right: calc(var(--quarter) + 6vw);*/
-/* top: calc(var(--half) + 12vw);*/
-/* }*/
-/* }*/
-/* .cover.art > div:nth-child(1),*/
-/* .cover.art > div:nth-child(3) {*/
-/* position:relative;*/
-/* }*/
-/* .cover.art > div:nth-child(1) {*/
-/* left: var(--quarter);*/
-/* }*/
-/* .cover.art > div:nth-child(1) div {*/
-/* position: absolute;*/
-/* right: 0;*/
-/* }*/
-/* .cover.art > div:nth-child(3) {*/
-/* top: calc(var(--half) * -1);*/
-/* right: var(--quarter);*/
-/* }*/
-/*.cover.art .halftone +.halftone {*/
-/* transform: rotate(180deg);*/
-/* top: var(--width);*/
-/* left: 0;*/
-/* right: unset;*/
-/*}*/
-
-/*.cover.art .img::before {*/
-/* content: '';*/
-/* filter: invert(1) brightness(0.75) invert(1) saturate(2);*/
-/* width:100%;*/
-/* height: 50%;*/
-/* position:absolute;*/
-/* bottom: 0;*/
-/*}*/
-/*.cover.art .img ~ .img::before {*/
-/* bottom: unset;*/
-/* top: 0;*/
-/*}*/
-/*.cover.art .halftone {*/
-/* width:50%;*/
-/* height: var(--half);*/
-/* position: absolute;*/
-/* top: 0;*/
-/* right: 0;*/
-/* background-color:transparent!important;*/
-/* border: 1px solid var(--base-50)!important;*/
-/* border-top-width: 0!important;*/
-/* border-right-width:0!important;*/
-/*}*/
-
-.cover.art.alt {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-template-rows: repeat(3, 25vw);
- gap: 0;
- height: max-content;
- padding: 2rem 0 0;
-}
-.cover.art div {
- background-color: transparent;
- border: none;
-}
-.cover.art img {
- border-radius: 50%;
- padding: .25rem;
- border: .36em solid var(--blue-0);
- position: relative;
-}
- .cover.art .has-img {
- grid-row: span 2;
- grid-column: span 2;
- overflow:hidden;
- position: relative;
- background: transparent!important;
+ .cover.alt {
+ min-height: 0;
}
-
- .cover.art .has-img:first-child {
- grid-row: 2 / span 2;
+ .cover > .content {
+ background-color: rgba(var(--base), var(--op-6));
+ width: 100%;
+ margin: 0 !important;
+ color: rgb(var(--contrast));
+ padding: 2rem var(--btn) 2rem 2rem;
+ }
+ .cover h1 {
+ margin: 0;
}
- .cover.art .has-img img {
- aspect-ratio:1;
- z-index: 0;
- mix-blend-mode: darken;
- }
- .cover.art .has-img:first-child img {
- left: 50%;
- }
- .cover.art .has-img:nth-child(3) img {
- left: -50%;
- }
- .has-img:nth-child(1) .halftone::before {
- background: radial-gradient(#fff 0%,#fff 15%, #888 65%) 0 0 / 1.2em 1.2em, radial-gradient(circle at top right, #fff, #000);
- }
- .has-img:nth-child(3) .halftone::before {
- background: radial-gradient(#fff 0%,#fff 15%, #888 65%) 0 0 / 1.2em 1.2em, radial-gradient(circle at bottom left, #fff, #000);
- }
- .cover.art img {
- border: .36em solid var(--blue-50);
- }
- .has-img:nth-child(1) .halftone::before,
- .has-img:nth-child(1) .halftone::after {
- top:50%;
- z-index: 1;
- }
- .has-img:nth-child(3) .halftone::before,
- .has-img:nth-child(3) .halftone::after {
- bottom:50%;
- z-index: 1;
- }
- .cover.art .has-img .img,
- .cover.art .halftone {
- /*position:absolute;*/
- /*inset: 0;*/
- /*left: 50%;*/
- /*min-width: 50vw;*/
- /*min-height: 50vw;*/
+ .cover > img {
+ margin-left: 0!important;
+ }
+ .cover.alt > svg {
+ max-width: none;
+ margin: 0 auto!important;
+ }
+.cover.alt + header#top {
+ margin: 0!important;
+ grid-column: full;
+ padding-right: var(--btn_);
+}
+ .cover.alt + header h1 {
+ line-height: .75;
+ margin: 0 0 0 .5rem;
+ }
+ .cover.alt + #top h1 small {
+ line-height: 1;
+ }
+
+ @media (min-width: 768px) {
+ .cover.alt > svg {
+ max-width: 40vw;
+ margin: 0!important;
}
-
- .cover.art > div:nth-child(2) {
- grid-column: 2;
- left:-2rem;
- bottom: -1.4rem;
- position: relative;
- aspect-ratio: 1;
- /*aspect-ratio: 1;*/
- }
- .cover.art > div:last-of-type {
- grid-column: 3;
- top: -1.6rem;
- right:-2rem;
- position: relative;
- aspect-ratio: 1;
- /*aspect-ratio: 1;*/
- }
-
-
-.cover.development {
- display: flex;
- flex-direction: column;
- align-items: center;
- --width: 75vh;
- --third: calc(var(--width) / 3);
- --half: calc(var(--width) / 2);
- --quarter: calc(var(--half) / 2);
-}
-
-.cover.development div div,
-.cover.development div {
- width: var(--third);
- height: var(--third);
- min-height: var(--third);
- aspect-ratio: 1;
- border-radius: 50%;
-}
-
-.cover.development div {
- background-color: transparent;
- border: 0;
-}
-.cover.development > div:nth-of-type(1),
-.cover.development > div:nth-of-type(2) {
- position: absolute;
- width: var(--quarter);
- height: var(--half);
- border-radius: 0;
- overflow: hidden;
-}
-
-
-.cover.development div:nth-of-type(3),
-.cover.development div:nth-of-type(4),
-.cover.development div:nth-of-type(5) {
- background-color: transparent;
- background-image: repeating-radial-gradient(circle, var(--base-50) 0, var(--base-50) 16px, var(--orange-200) 16px, var(--orange-200) 17px);
- border: 1px solid var(--orange-200);
-}
-
-.cover.development div div {
- width: var(--half);
- height: var(--half);
-}
-.cover.development div:nth-of-type(1) div {
- position: absolute;
- right: 0;
-}
-.cover.development > div:nth-of-type(1) {
- left: 50%;
-}
-.cover.development div:nth-of-type(2) {
- top:var(--half);
- right: 50%;
-}
-
-
-.cover.design {
- --width: 50vw;
- --half: calc(var(--width) / 2);
- --negHalf: calc(var(--half) * -1);
- display: flex;
- flex-direction: column;
- overflow:visible;
- padding-left:5vw;
- /*transform: rotate(30deg);*/
-}
-@media (min-width: 768px) {
- .cover.design {
- --width: 27vw;
- }
-}
- .cover.design::before {
- content: '';
- position: absolute;
- left: calc(var(--half) + 5vw); /* same as padding-left above */
- width: 2px;
- background-color: var(--base);
- display:block;
- top: 0;
- height: calc(var(--width) * 2.75);
- }
-.cover.design > div {
- min-height: var(--width);
- background:transparent;
- border: none;
- position:relative;
- mix-blend-mode:soft-light;
-}
- .cover.design > div:nth-of-type(2),
- .cover.design > div:nth-of-type(3) {
- width:var(--half);
- overflow:hidden;
- }
- .cover.design div:nth-of-type(3){
- margin-left: var(--half);
- }
- .cover.design > div:nth-of-type(3) div {
- position: absolute;
- right: 0;
- top:0;
- }
- .cover.design > div:nth-of-type(2){
- top: var(--negHalf);
- }
- .cover.design > div:nth-of-type(3){
- top: calc(var(--negHalf) * 2);
- }
- .cover.design > div:nth-of-type(4){
- top: calc(var(--negHalf) * 3);
- }
-.cover.design div div {
- aspect-ratio: 1;
- width: var(--width);
- border-radius:50%;
-}
-
-
-/*.cover.strategy {*/
-/* display: flex;*/
-/* flex-wrap: wrap;*/
-/* justify-content:space-evenly;*/
-/* align-items:flex-start;*/
-/*}*/
-/*.cover.strategy .item {*/
-/* width: 30vw;*/
-/* aspect-ratio: 1;*/
-/* border-radius: 0 50% 50%;*/
-/* transform: rotate(45deg);*/
-/* box-shadow: rgba(var(--base-rgb), var(--op-5)) var(--shdw);*/
-/*}*/
-/* .cover.strategy .item img {*/
-/* transform: rotate(-45deg);*/
-/* }*/
-
-/*.cover.strategy .crowd {*/
-/* width: 100%;*/
-/* padding: 3vw 0;*/
-/* display: flex;*/
-/* flex-wrap: nowrap;*/
-/* max-width:none;*/
-/* background-color:var(--base-50)!important;*/
-/* border: none;*/
-/* overflow:visible;*/
-/* margin-bottom: 5vw;*/
-/*}*/
-/* .cover.strategy .crowd div {*/
-/* aspect-ratio: 1;*/
-/* border-radius: 50%;*/
-/* !*border-radius: 0 50% 0 50%;*!*/
-/* !*transform: rotate(30deg);*!*/
-/* min-width: 8vw;*/
-/* }*/
-/* .cover.strategy .crowd div {*/
-/* background-color:var(--base-100);*/
-/* border-color: var(--base-50);*/
-/* mix-blend-mode: overlay;*/
-/* position:relative;*/
-/* flex: 1;*/
-/* margin: 0 -2vw;*/
-/* }*/
-/* .cover.strategy .crowd div:nth-of-type(odd){*/
-/* top: 1vw;*/
-/* }*/
-/* .cover.strategy .crowd div:nth-of-type(even){*/
-/* top: -3vw;*/
-/* }*/
-.cover.writing {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 40vh;
- --width: 33.3vw;
- --first: calc(var(--width) * .666);
- --second: calc(var(--first) * .666);
- --third: calc(var(--second) * .666);
-}
- .cover.writing div {
- width: var(--width);
- aspect-ratio: 1;
- transform: rotate(45deg);
- z-index: 4;
- margin: 0 -6vw;
- box-shadow: rgba(var(--base-rgb),var(--op-5)) var(--shdw);
- }
- .cover.writing div img {
- transform: rotate(-45deg);
+ .cover.alt + #top {
+ flex-direction: column;
+ position: absolute;
+ right: 0;
+ top: 35vw;
+ max-width: 60vw;
+ grid-column: narrow;
+ z-index: 10;
+ color: rgb(var(--action-contrast));
+ padding: 0 var(--btn_) 0 0!important;
}
-
- .cover.writing div:nth-of-type(3),
- .cover.writing div:nth-of-type(5) {
- width: var(--first);
- z-index: 3;
- margin: 0 -4vw;
+ .cover.alt + #top a {
+ background-color: rgba(var(--action-0),var(--op-5));
+ color: rgb(var(--action-contrast));
+ }
+ .cover.alt + #top a:hover,
+ .cover.alt + #top a:focus {
+ background-color: rgb(var(--action-contrast));
+ color: rgb(var(--action-0));
+ }
}
- .cover.writing div:nth-of-type(2),
- .cover.writing div:nth-of-type(6) {
- width: var(--second);
- z-index: 2;
- margin: 0 -3vw;
- }
- .cover.writing div:nth-of-type(1),
- .cover.writing div:nth-of-type(7) {
- width: var(--third);
- z-index: 1;
- margin: 0 -2vw;
- }
-
-/*.halftone {*/
-/* background: !* 1 *!*/
-/* var(--pattern,*/
-/* radial-gradient(closest-side, #777, #fff)*/
-/* .25rem/ 1em 1em space),*/
-/* var(--map,*/
-/* linear-gradient(0deg, #888, #fff));*/
-/* background-blend-mode: multiply !* 2 *!;*/
-/* filter: contrast(21) !* 3 *!*/
-/*}*/
-
-/*** THIS ONE WORKS WELL **/
-
-/*.halftone {*/
-/* background: linear-gradient(90deg, var(--blue-0), transparent);*/
-/* background-blend-mode: color;*/
-/*}*/
.halftone::before {
content: '';
@@ -1005,75 +575,13 @@
}
.halftone::after {
z-index: 1;
- background: var(--base-50);
+ background: rgb(var(--base-50));
mix-blend-mode: lighten;
content: '';
position:absolute;
inset:0;
}
/**** END THIS ONE WORKS WELL **/
-.cover.strategy {
- overflow:visible;
- display: flex;
- justify-content: center;
- --radi: 10vw 10vw;
-}
-.cover.strategy div {
- height: 30vh;
- min-width: 18vw;
- margin: 0 -.5vw;
- border-color: var(--green-0)!important;
-}
- .cover.strategy > div:first-of-type,
- .cover.strategy > div:last-of-type {
- display: none;
- }
- .cover.strategy div:nth-of-type(odd){
- border-radius: 0 0 var(--radi);
- border-top:0;
- z-index: 1;
- }
- .cover.strategy div:nth-of-type(even){
- z-index: 0;
- height:40vh;
- border-bottom: 0;
- position: relative;
- top: 19vh;
- border-radius: var(--radi) 0 0;
- }
-
-.cover.strategy div:nth-of-type(2) {
- height: 60vh;
-}
-.cover.strategy div:nth-of-type(6) {
- height: 30vh;
-}
-
-
-@media (min-width:768px) {
- .cover.writing {
- height: 55vh;
- }
- .cover.strategy {
- --radi: 7.5vw;
- }
- .cover.strategy div {
- min-width: 15vw;
- }
- .cover.strategy div:nth-of-type(even) {
- top: 15vh;
- }
-
- .cover.strategy > div:first-of-type,
- .cover.strategy > div:last-of-type {
- display: block;
- }
-}
-
-.feed-block .item-grid {
- max-width: none;
- padding-right: var(--btn);
-}
#top h1 small {
margin: 0;
@@ -1084,21 +592,6 @@
font-size:var(--txt-x-small);
}
-.cover {
- padding: 1rem;
-}
-.cover h1 {
- font-size: var(--txt-xxx-large);
- line-height: .75;
- mix-blend-mode: luminosity;
- margin: 0 0 .5rem;
-}
-.cover .content {
- padding: 1rem 0;
- text-align: right;
- margin-right: var(--btn);
-}
-
h2.subtitle {
font-weight: var(--fw-h-light);
text-transform: none;
@@ -1114,7 +607,7 @@
}
.loading[open] i.icon {
--w: var(--txt-enormous);
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
animation: spin .36s var(--trans-fn) infinite;
}
@@ -1128,3 +621,225 @@
margin: 1.5em 0 .25rem;
font-size: var(--txt-x-medium);
}
+
+section#gallery div {
+ max-width: var(--wide);
+ display: grid;
+ gap: 5px;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ grid-auto-rows: 200px;
+}
+#gallery div figure img {
+ width:100%;
+ height: 100%;
+ object-fit: cover;
+ transform: scale(1);
+ transition: var(--trans-transform);
+}
+ #gallery div figure:hover img {
+ transform: scale(1.05);
+ }
+
+#gallery div figure:nth-of-type(3n+1) {
+ padding: 15px;
+}
+#gallery div figure:nth-of-type(5n+1) {
+ padding: 25px;
+}
+/*section#gallery div img:nth-of-type(3n+1) {*/
+/* padding: 1rem;*/
+/*}*/
+
+#gallery div figure:nth-of-type(6n + 1),
+#gallery div figure:nth-of-type(6n + 5){
+ grid-row: span 2;
+}
+
+#gallery div figure:nth-of-type(6n + 0),
+#gallery div figure:nth-of-type(6n + 6){
+ grid-column: span 2;
+}
+#gallery div figure:nth-of-type(6n+4) {
+ grid-column: span 2;
+ grid-row: span 2;
+}
+
+/*#gallery div img:nth-of-type(3n+2) {*/
+/* grid-row: span 1;*/
+/* grid-column: span 2;*/
+/*}*/
+
+
+.needs-wants.needs-wants {
+ max-width: var(--wide);
+ margin: 0!important;
+}
+details.info {
+ max-width: var(--wider);
+}
+ .needs-wants .info{
+ max-width: var(--content);
+ }
+ .needs-wants li {
+ list-style: none;
+ padding:0;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ }
+ .needs-wants h3 {
+ margin: 4rem 0 2rem;
+ }
+ @media (min-width: 768px) {
+
+ .needs-wants img {
+ max-width: 45%;
+ margin-right: 4%;
+ position:sticky;
+ top: var(--btnbtn);
+ }
+ .needs-wants img + .info {
+ max-width: 50%;
+ display: inline-block;
+ }
+ }
+
+.term-list .title {
+ text-transform: none;
+ padding: 0;
+}
+
+#summary .summary {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ max-width: var(--wide);
+}
+#summary .summary .term-list {
+ height: var(--chipchip);
+}
+#summary .summary > li {
+ list-style: none;
+ height: var(--chipchip)
+}
+#summary .summary .icon {
+ --w: 1.5em;
+ margin-right: 1rem;
+}
+
+#summary .summary > li span:first-of-type {
+ margin-right: 1.5rem;
+}
+
+.project-list.item-grid.list-view img {
+ width: 100%;
+}
+.project-list h3 {
+ font-size: var(--txt-large);
+ margin: 0;
+}
+
+@media (min-width: 768px) {
+ #summary .summary {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+body:has(.on-this-page) .qtoggle {
+ bottom: calc(var(--btn_) + var(--btn_));
+}
+
+
+.index.open.open {
+ max-height: var(--maxHeight);
+ height: max-content;
+}
+
+.development .item-grid .item .images {
+ aspect-ratio: 16/9;
+}
+
+.main-actions.main-actions .buttons.buttons {
+ bottom: unset;
+ top: var(--btn_);
+ right: 0!important;
+}
+
+aside.main.right {
+ padding-bottom: 0;
+ padding-top: var(--btn);
+}
+ aside.main.right.expanded {
+ right: var(--btn);
+ }
+.main-actions button.expanded {
+ border-top-left-radius: var(--radius-outer);
+ border-bottom-left-radius: var(--radius);
+ right: var(--btn);
+}
+
+
+/****************************************************************
+CONTENT LIST
+****************************************************************/
+ul.content-term-list {
+ margin-left:0!important;
+ margin-right: 0!important;
+ grid-column: full;
+ max-width: var(--full);
+}
+ ul.content-term-list > li {
+ padding: var(--sp3) var(--btn_) var(--sp3) 0;
+ list-style: none;
+ }
+ ul.content-term-list > li:nth-of-type(even) {
+ background-color: rgb(var(--base-100));
+ }
+ ul.content-term-list img {
+ width: 40vw;
+ max-inline-size: none;
+ }
+
+ .content-term-list .cover {
+ padding-bottom: 0;
+ min-height: 40vh;
+ }
+ .content-term-list .cover::before {
+ display: none;
+ }
+ .content-term-list .cover .content {
+ background-color: rgba(var(--base), var(--op-6));
+ width: 100%;
+ border-radius: 1rem 1rem 0 0;
+ padding: 1rem;
+ }
+ .content-term-list .cover h2 {
+ margin: 0;
+ }
+
+
+.feed-block .item-grid {
+ padding-right: var(--btnbtn);
+}
+
+
+div.poster {
+ height: 20vh;
+ grid-column: full;
+ max-width: 100vw;
+ margin: 0!important;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+@media (min-width: 768px) {
+ div.poster {
+ height: 35vh;
+ background-size: cover;
+ }
+}
+
+.cover.cover {
+ padding: 0;
+}
--
Gitblit v1.10.0