From ea8cb8a6a7d6952ff61ef8d7a07600250c984f06 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Fri, 05 Jun 2026 16:51:20 +0000
Subject: [PATCH] =Exported templates in template editor. Will likely be following the JakeVan pattern of testing archive before changing output, instead of basically the same template repeated
---
source.css | 335 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 260 insertions(+), 75 deletions(-)
diff --git a/source.css b/source.css
index 36d9dd9..28bffb8 100644
--- a/source.css
+++ b/source.css
@@ -25,80 +25,78 @@
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: #efefef;
- --light-50: #e2e2e2;
- --light-100: #d5d5d5;
- --light-200: #c9c9c9;
- --light-rgb: 239,239,239;
+ --light-0: 239,239,239; /* #efefef; */
+ --light-50: 226,226,226; /* #e2e2e2; */
+ --light-100: 213,213,213; /* #d5d5d5; */
+ --light-200: 201,201,201; /* #c9c9c9; */
- --dark-0: #151515;
- --dark-50: #222222;
- --dark-100: #2e2e2e;
- --dark-200: #3b3b3b;
- --dark-rgb: 21,21,21;
+ --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: #ff0080;
- --action-50: #ff2492;
- --action-100: #ff47a4;
- --action-200: #ff6bb5;
- --action-rgb: 255,0,128;
+ --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);
- --secondary-0: #D69121;
- --secondary-50: #ffc421;
- --secondary-100: #ffcd44;
- --secondary-200: #ffd768;
- --secondary-rgb: 252,185,0;
+ --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);
- --success: #20D64E;
- --successLight: #DBFAE3;
- --successDark: #05230D;
- --successBack: var(--successLight);
- --successText: var(--successDark);
- --warning: #D69121;
- --warningLight: #F6E5CB;
- --warningDark: #231806;
- --warningBack: var(--warningLight);
- --warningText: var(--warningDark);
- --error: #CF1616;
- --errorLight: #F9C8C8;
- --errorDark: #4A0808;
- --errorBack: var(--errorLight);
- --errorText: var(--errorDark);
+ --success: 76,175,80; /* #4CAF50; */
+ --successLight: 234,246,235; /* #eaf6eb; */
+ --successDark: 14,33,15; /* #0e210f; */
+
+ --warning: 232,167,55; /* #E8A737; */
+ --warningLight: 253,247,238;/* #fdf7ee; */
+ --warningDark: 52,35,6; /* #342306; */
+
+ --error: 183,51,46; /* #B7332E; */
+ --errorLight: 250,235,234; /* #faebea; */
+ --errorDark: 40,11,10; /* #280b0a; */
+
--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: #db006e;
- --action-100: #b8005c;
- --action-200: #94004a;
- --secondary-50: #d89f00;
- --secondary-100: #b58500;
- --secondary-200: #916a00;
+ --action-50: 219,0,110; /* #db006e; */
+ --action-100: 184,0,92; /* #b8005c; */
+ --action-200: 148,0,74; /* #94004a; */
+
+ --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);
--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);
@@ -199,6 +197,7 @@
src: url('./assets/fonts/josefin-sans-v34-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('./assets/fonts/josefin-sans-v34-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
+
.home .video-cover.video-cover {
margin-top: 0;
}
@@ -209,15 +208,15 @@
.scroll-progress .bar {
background:
linear-gradient(90deg,
- rgba(var(--action-rgb),.8) 0%,
- rgba(var(--action-rgb),1) 40%,
- rgba(var(--action-rgb),.8) 100%);
+ rgba(var(--action-0),.8) 0%,
+ rgba(var(--action-0),1) 40%,
+ rgba(var(--action-0),.8) 100%);
position: relative;
box-shadow:
- 0 0 4px rgba(var(--action-rgb),.9),
- 0 0 8px rgba(var(--action-rgb),.7),
- 0 0 16px rgba(var(--action-rgb),.4);
+ 0 0 4px rgba(var(--action-0),.9),
+ 0 0 8px rgba(var(--action-0),.7),
+ 0 0 16px rgba(var(--action-0),.4);
}
#theme-switch#theme-switch {
position: absolute;
@@ -244,14 +243,14 @@
.eltrs {
min-height: 40vh;
width: 100vw;
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
--justify: center;
--align: center;
}
.eltrs h2 {
font-family: var(--body);
font-weight: var(--fw-h-bold);
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
text-align: center;
margin: 0;
font-size: var(--txt-large);
@@ -318,9 +317,9 @@
font-size: var(--txt-xxx-large);
height: var(--width);
width: var(--width);
- /*border: 1rem solid var(--base-200);*/
- background-color: var(--action-0);
- color: var(--action-contrast);
+ /*border: 1rem solid rgb(var(--base-200));*/
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
display: flex;
justify-content: center;
align-items: center;
@@ -331,7 +330,7 @@
border: 4px solid var(--action-200);
border-left: 0;
border-top: 0;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}
@media (min-width: 768px) {
@@ -370,7 +369,7 @@
/* width: 100%;*/
/*}*/
main > section:nth-of-type(even) {
- background-color: var(--base-100);
+ background-color: rgb(var(--base));
max-width: 100vw;
padding: 3rem 0;
}
@@ -385,8 +384,8 @@
section.pre-footer {
min-height: 25vh;
- background-color: var(--secondary-0);
- color: var(--secondary-contrast);
+ background-color: rgb(var(--secondary-0));
+ color: rgb(var(--secondary-contrast));
display: flex;
justify-content: center;
align-items: center;
@@ -402,19 +401,53 @@
margin-top: 0;
}
.pre-footer a {
- background-color: var(--secondary-contrast);
+ background-color: rgb(var(--secondary-contrast));
padding: 0 .125rem;
border-radius: 4px;
}
+a{
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ color: rgb(var(--action-0));
+}
+
+a::before {
+ content: '';
+ background-color: rgba(var(--action-0), .8);
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ pointer-events: none;
+ opacity: 0;
+ border-radius: 50%;
+}
+
+p a:hover {
+ text-shadow: 1px 0 10px rgb(var(--action-0));
+ background-color: transparent!important;
+ color: rgb(var(--action-contrast))!important;
+ border-color:transparent!important;
+}
+ p a:hover::before {
+ opacity: 1;
+ filter: blur(1.666em);
+ transition: var(--trans-color);
+ }
+
.triangle {
padding: 2rem 2rem 0;
--justify: flex-end;
position: relative;
- background-color: var(--action-0);
- color: var(--action-contrast);
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
}
.excerpt::after,
.triangle::after {
@@ -425,7 +458,7 @@
height: 0;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
- border-top: 32px solid var(--action-0);
+ border-top: 32px solid rgb(var(--action-0));
clear: both;
}
.excerpt::after {
@@ -449,7 +482,7 @@
position: relative;
margin-right: 1rem;
padding: 1rem 15vw 1rem 0;
- border-bottom: 4px solid var(--action-0);
+ border-bottom: 4px solid rgb(var(--action-0));
margin-bottom: 6rem;
grid-column: full;
max-width: var(--narrow);
@@ -462,11 +495,17 @@
vertical-align: bottom;
line-height: 1.4;
/*margin-right: .75rem;*/
- color: var(--action-0);
+ color: rgb(var(--action-0));
position: relative;
left: -2rem;
cursor: pointer;
}
+.tldr.term {
+ font-weight: var(--fw-b-light);
+ font-size: var(--txt-medium);
+ left: 0;
+ color: rgb(var(--contrast));
+}
.align-full.triangle:has(+.contact) {
margin-bottom: 0;
z-index: 1;
@@ -475,8 +514,8 @@
gap: 1.5rem;
margin-top: -.5rem;
padding-bottom: 2rem;
- background-color: var(--base-100);
- color: var(--contrast-200);
+ background-color: rgb(var(--base-100));
+ color: rgb(var(--contrast-200));
max-width: none;
}
@media (min-width: 768px) {
@@ -486,16 +525,16 @@
}
section.contact .buttons li a,
section.contact .socials a {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
section.contact .buttons li a:hover,
section.contact .buttons li a:focus,
section.contact .socials a:hover,
section.contact .socials a:focus {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
section.contact.triangle::after {
- border-top-color: var(--base-100);
+ border-top-color: rgb(var(--base-100));
}
section.contact h2 {
margin: 2rem 0 0;
@@ -511,7 +550,7 @@
section.contact h2::after {
content: '';
height: 2px;
- background-color: var(--contrast-200);
+ background-color: rgb(var(--contrast-200));
border-radius: 4px;
width: 100%;
position:relative;
@@ -549,17 +588,17 @@
}
span.logo .icon-logo-triangle {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
--w:4rem;
}
span.logo .icon-logo-text-only {
--w: 8rem;
}
a .icon-logo-text-only {
- background-color: var(--contrast);
+ background-color: rgb(var(--contrast));
}
a:hover .icon-logo-text-only {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
span.logo:hover .icon-logo-triangle {
@@ -594,3 +633,149 @@
width: 25vw;
}
}
+
+.feed.item[data-timeline] .images {
+ padding: 0;
+}
+.feed.item details summary {
+ position: relative;
+ top: 0;
+}
+
+.directory-list .image {
+ position: relative;
+}
+.directory-list .image .icon {
+ transform: rotate(90deg);
+ --w: 40px;
+ color: rgb(var(--action-0));
+ position: absolute;
+ left: calc(50% - 15px);
+}
+body.progress .term-list li {
+ display: flex;
+ gap: .5em;
+ align-items: center;
+}
+
+.timeline.terms {
+ width: 100%;
+}
+
+
+.loop .item-grid .progress {
+ aspect-ratio: 3/2;
+ position: relative;
+}
+
+.loop .item-grid .progress figure {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: .125rem;
+ background-color: rgb(var(--action-0));
+ position: relative;
+}
+
+.loop .item-grid .progress figure span {
+ position: absolute;
+ width: 50%;
+ text-transform: uppercase;
+ background-color: rgba(var(--action-0),var(--op-4));
+ color: rgb(var(--action-contrast));
+ padding: 0 .25rem;
+}
+
+.loop .progress figure img {
+ max-width: 50%;
+ object-fit: cover;
+}
+
+figure .after {
+ top: 0;
+ right:0;
+}
+
+figure .before {
+ bottom: 0;
+ left: 0;
+}
+
+[data-field="goal"] fieldset {
+ grid-template-columns: repeat(1, 1fr)!important;
+}
+
+
+blockquote {
+ max-width: min(648px, 90vw);
+ --background: rgb(var(--base-100));
+ --border: rgb(var(--action-0));
+ line-height: 1.2;
+ padding: var(--btn);
+ border-radius: 4rem;
+ background-color: var(--background);
+}
+ .gmb-reviews blockquote {
+ border-top: 0;
+ max-width: min(648px, 95vw);
+ }
+
+blockquote .content {
+ margin: 12px 0;
+ position: relative;
+ font-family: var(--heading);
+
+ padding: 1.5rem;
+ border-radius: var(--radius-outer);
+ border: 2px solid var(--border);
+}
+
+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 cite {
+ /*padding: 15px 0 0 12px;*/
+ padding: 0!important;
+ margin: 0 0 0 150px!important;
+ z-index: 1;
+}
+
+.gmb-reviews ul li {
+ padding: 1rem 1rem 2rem;
+}
+
+dialog .item-info header {
+ height: max-content;
+ text-align: left;
+}
+ dialog .item-info * {
+ font-size: var(--txt-medium)!important;
+ }
+ dialog .item-info header h2 .icon {
+ display: none;
+ }
+ dialog .item-info header ul {
+ margin: 0;
+ }
--
Gitblit v1.10.0