From 9379db6eeaa0fcf199544898bf160fa2e6c3289d Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 10 Feb 2026 20:35:23 +0000
Subject: [PATCH] =tattysoap latest
---
style.css | 307 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 302 insertions(+), 5 deletions(-)
diff --git a/style.css b/style.css
index d66ce27..36d573b 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,306 @@
/*
-Theme Name: Legacy
-Theme URI:
-Description: Jvb-theme child theme.
-Author: Me
-Author URI:
+Theme Name: Tatty Soap Theme
+Theme URI: https://tattysoap.ca
+Description: Jvb-theme child theme, for Tatty Soap.
+Author: Jake
+Author URI: https://jakevan.ca/
Template: jvb-theme
Version: 0.1.0
*/
+:root{
+ /* Layout */
+ --narrow: min(500px, 50vw);
+ --maxWidth: min(768px, 65vw);
+ --alignWide: min(1024px, 90vw);
+ --alignMed: min(962px, 82.5vw);
+ --full: 100vw;
+ /* Margin */
+ --mr: auto;
+ --ml: auto;
+ --mt: 1rem;
+ --mb: 1rem;
+ --setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
+ --insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
+ --height: 4rem;
+ --doubleHeight: 8rem;
+ --offHeight: 5rem;
+ --maxHeight: calc(100vh - var(--height) - var(--height));
+
+ --gap: .5rem;
+ --wrap: wrap;
+ --justify: center;
+ --align: center;
+ --dir: row;
+ /* Typography */
+ --w: 1.2em; /** Icon **/
+
+ --filter: grayscale(.3) sepia(.4);
+
+ /** Download your Fonts from: https://gwfh.mranftl.com/ **/
+ --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+ --heading: 'Noto Serif Hentaigana', var(--font-base);
+ --body: 'Playfair Display', var(--font-base);
+ --hWeight: 400;
+ --hlight: 200;
+ --hBold: 900;
+ --bWeight: 400;
+ --bBold: 900;
+ --bLight: 400;
+
+ /* Font sizes */
+ --enormous: calc(26vh - 4rem);
+ --xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
+ --xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
+ --xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
+ --large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
+ --xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
+ --medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
+ --small: clamp(.95rem, .879rem + .19vw, 1.05rem);
+ --extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
+ /* 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: #fdfcfc;
+ --light-50: #f7f4f3;
+ --light-100: #f0ebea;
+ --light-200: #eae3e2;
+ --dark-0: #241b1a;
+ --dark-50: #2c2220;
+ --dark-100: #352927;
+ --dark-200: #3e2f2d;
+ --action-0: #AD5B4B;
+ --action-50: #b7695a;
+ --action-100: #bf796c;
+ --action-200: #c78a7e;
+ --secondary-0: #DA993F;
+ --secondary-50: #dea454;
+ --secondary-100: #e2b06a;
+ --secondary-200: #e6bb7f;
+
+ --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);
+ --action-contrast: var(--light-0);
+ --secondary-contrast: var(--light-0);
+ --light-rgb: 239,239,239;
+ --dark-rgb: 21,21,21;
+ --action-rgb: 255,0,128;
+ --secondary-rgb: 252,185,0;
+
+ --rgba-subtle: rgba(var(--c),.5);
+ --rgba-subtle-hover: rgba(var(--c),.1);
+
+ --base: var(--light-0);
+ --base-50: var(--light-50);
+ --base-100: var(--light-100);
+ --base-200: var(--light-200);
+ --contrast: var(--dark-0);
+ --contrast-50: var(--dark-50);
+ --contrast-100: var(--dark-100);
+ --contrast-200: var(--dark-200);
+ --c: var(--light-rgb);
+ --base-rgb: var(--light-rgb);
+ --contrast-rgb: var(--dark-rgb);
+
+ /* Stacking */
+ --z-1: 5;
+ --z-2: 10;
+ --z-3: 15;
+ --z-4: 20;
+ --z-5: 50;
+ --z-6: 100;
+ --z-top: 999;
+ --zz-top: 999999;
+ /* Overlays */
+ --rgb-light: .25;
+ --rgb-medium: .66;
+ --rgb-heavy: .85;
+ --overlay-light: rgba(var(--c), .25);
+ --overlay-medium: rgba(var(--c), .66);
+ --overlay-heavy: rgba(var(--c), .85);
+ --shimmer: rgba(var(--dark-rgb),0) 0%,
+ rgba(var(--dark-rgb),.05) 50%,
+ rgba(var(--dark-rgb),0) 100%;
+ /* Shadows */
+ --shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
+ --shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
+ --shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
+ --shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
+ --shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
+ --subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
+ --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
+ --shadow-none: transparent 0px 0px 0px;
+ /* Rounding */
+ --innerRadius: 4px;
+ --outerPadding: 1rem;
+ --outerRadius: calc(var(--innerRadius) + var(--outerPadding));
+ /* Transitions */
+ --function:cubic-bezier(.47,.24,.07,.47);
+ --timing: .25s;
+ --transition-base: var(--timing) var(--function);
+ --transition-color: background-color var(--transition-base),
+ color var(--transition-base), border var(--transition-base);
+ --transition-transform: transform var(--transition-base);
+ --transition-size: width var(--transition-base),
+ height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
+
+ --offScreen: -200vw;
+
+
+ --scrollbar-width: 8px;
+ --scrollbar-track-color: var(--base-100);
+ --scrollbar-thumb-color: var(--action-0);
+ --scrollbar-thumb-hover-color: var(--action-50);
+ --scrollbar-thumb-border: 2px solid var(--base-50);
+ --scrollbar-border-radius: 4px;
+
+ --can-scroll: 0;
+}
+
+body:has(#theme-switcher:checked){
+ --action-50: #9b5243;
+ --action-100: #89483c;
+ --action-200: #783f34;
+ --secondary-50: #d68e2a;
+ --secondary-100: #c18025;
+ --secondary-200: #ab7121;
+ --contrast: var(--light-0);
+ --contrast-50: var(--light-50);
+ --contrast-100: var(--light-100);
+ --contrast-200: var(--light-200);
+ --base: var(--dark-0);
+ --base-50: var(--dark-50);
+ --base-100: var(--dark-100);
+ --base-200: var(--dark-200);
+ --c: var(--dark-rgb);
+ --base-rgb: var(--dark-rgb);
+ --contrast-rgb: var(--light-rgb);
+ --overlay-light: rgba(var(--c), .25);
+ --overlay-medium: rgba(var(--c), .5);
+ --overlay-heavy: rgba(var(--c), .85);
+ --shimmer: rgba(var(--c),0) 0%,
+ rgba(var(--c),.05) 50%,
+ rgba(var(--c),0) 100%;
+ --shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
+ --shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */
+ --shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */
+ --shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */
+ --shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */
+ --subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
+ --subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
+
+ --successBack: var(--successDark);
+ --successText: var(--successLight);
+ --warningBack: var(--warningDark);
+ --warningText: var(--warningLight);
+ --errorBack: var(--errorDark);
+ --errorText: var(--errorLight);
+
+}
+/*** FONTS START **/
+/** Download your Fonts from: https://gwfh.mranftl.com/
+use ./assets/fonts/ as a base
+
+**/
+
+/* playfair-display-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Playfair Display';
+ font-style: normal;
+ font-weight: 400;
+ src: url('./assets/fonts/playfair-display-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/playfair-display-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/* playfair-display-italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Playfair Display';
+ font-style: italic;
+ font-weight: 400;
+ src: url('./assets/fonts/playfair-display-v40-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/playfair-display-v40-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/* playfair-display-900 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Playfair Display';
+ font-style: normal;
+ font-weight: 900;
+ src: url('./assets/fonts/playfair-display-v40-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/playfair-display-v40-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/* playfair-display-900italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Playfair Display';
+ font-style: italic;
+ font-weight: 900;
+ src: url('./assets/fonts/playfair-display-v40-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/playfair-display-v40-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+
+/* noto-serif-hentaigana-200 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif Hentaigana';
+ font-style: normal;
+ font-weight: 200;
+ src: url('./assets/fonts/noto-serif-hentaigana-v17-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/noto-serif-hentaigana-v17-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/* noto-serif-hentaigana-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif Hentaigana';
+ font-style: normal;
+ font-weight: 400;
+ src: url('./assets/fonts/noto-serif-hentaigana-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/noto-serif-hentaigana-v17-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/* noto-serif-hentaigana-900 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif Hentaigana';
+ font-style: normal;
+ font-weight: 900;
+ src: url('./assets/fonts/noto-serif-hentaigana-v17-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('./assets/fonts/noto-serif-hentaigana-v17-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/*** FONTS END ***/
+
+
+.wp-site-blocks > header .title {
+ align-items: center;
+ font-size: var(--large);
+ font-family: var(--heading);
+ font-weight: var(--hBold);
+ text-transform: uppercase;
+}
+
+.intro {
+ padding: 1rem;
+}
+.intro h1 {
+ line-height: .75;
+ font-size: 25vw;
+ font-weight: var(--hBold);
+ font-family: var(--heading);
+ margin: 0 auto 3rem;
+}
+.intro p {
+ text-align: center;
+}
\ No newline at end of file
--
Gitblit v1.10.0