vowel 0.6.2 → 0.6.4

package/stylesheets/DefaultStyles.css

@@ -5,387 +5,400 @@
 
 @layer reset, typography, default;
 
+body {
+	border: 4px solid var(--success-13);
+}
 
 
 @layer default {
 	:root {
-		--accent-00: oklch(1 0.030170139248992922 90.24115342246611);
-		--accent-01: oklch(0.9536456092315344 0.030170139248992922 90.24115342246611);
-		--accent-02: oklch(0.8924089806120152 0.08826670827983002 90.24115342246611);
-		--accent-03: oklch(0.844618 0.14828222329121668 90.24115342246611);
-		--accent-04: oklch(0.7854571400878614 0.18029922017024758 90.24115342246611);
-		--accent-05: oklch(0.7110252520511524 0.16670758498691426 90.24115342246611);
-		--accent-06: oklch(0.6307554338482158 0.15012908092125463 90.24115342246611);
-		--accent-07: oklch(0.5558748958282139 0.12696710517027307 90.24115342246611);
-		--accent-08: oklch(0.4945 0.09203251189041753 90.24115342246611);
-		--accent-09: oklch(0.38727951482578865 0.05695363236371703 90.24115342246611);
-		--accent-10: oklch(0.24916012628129958 0.03201699687903088 90.24115342246611);
-		--accent-11: oklch(0.11046170738630641 0.01528852137867617 90.24115342246611);
-		--danger-00: oklch(1 0.037138530373020395 -25.754653176550182);
-		--danger-01: oklch(0.9536456092315344 0.037138530373020395 -25.754653176550182);
-		--danger-02: oklch(0.8924089806120152 0.0908858065656466 -25.754653176550182);
-		--danger-03: oklch(0.844618 0.15656415898125758 -25.754653176550182);
-		--danger-04: oklch(0.7854571400878614 0.2115084537674326 -25.754653176550182);
-		--danger-05: oklch(0.7110252520511524 0.250891532499265 -25.754653176550182);
-		--danger-06: oklch(0.6307554338482158 0.22556107485827934 -25.754653176550182);
-		--danger-07: oklch(0.5558748958282139 0.1952478556703251 -25.754653176550182);
-		--danger-08: oklch(0.4945 0.15069063355165543 -25.754653176550182);
-		--danger-09: oklch(0.38727951482578865 0.1036689817070561 -25.754653176550182);
-		--danger-10: oklch(0.24916012628129958 0.058004850702477094 -25.754653176550182);
-		--danger-11: oklch(0.11046170738630641 0.02748297973358925 -25.754653176550182);
-		--info-00: oklch(1 0.032559707682643824 244.1900622367698);
-		--info-01: oklch(0.9536456092315344 0.032559707682643824 244.1900622367698);
-		--info-02: oklch(0.8924089806120152 0.07422782322853594 244.1900622367698);
-		--info-03: oklch(0.844618 0.12605888808084453 244.1900622367698);
-		--info-04: oklch(0.7854571400878614 0.17799411987422387 244.1900622367698);
-		--info-05: oklch(0.7110252520511524 0.22040488113200302 244.1900622367698);
-		--info-06: oklch(0.6307554338482158 0.25495777982975243 244.1900622367698);
-		--info-07: oklch(0.5558748958282139 0.2223980721471087 244.1900622367698);
-		--info-08: oklch(0.4945 0.18072995660121655 244.1900622367698);
-		--info-09: oklch(0.38727951482578865 0.12889889174890792 244.1900622367698);
-		--info-10: oklch(0.24916012628129958 0.0769636599555286 244.1900622367698);
-		--info-11: oklch(0.11046170738630641 0.034552898697749426 244.1900622367698);
-		--primary-00: oklch(1 0.033943473040194294 -82.72000000000003);
-		--primary-01: oklch(0.9536456092315344 0.033943473040194294 -82.72000000000003);
-		--primary-02: oklch(0.8924089806120152 0.07208713732898053 -82.72000000000003);
-		--primary-03: oklch(0.844618 0.10967407324412015 -82.72000000000003);
-		--primary-04: oklch(0.7854571400878614 0.14835354282702512 -82.72000000000003);
-		--primary-05: oklch(0.7110252520511524 0.1870407118569507 -82.72000000000003);
-		--primary-06: oklch(0.6307554338482158 0.2246513001779757 -82.72000000000003);
-		--primary-07: oklch(0.5558748958282139 0.2627985040398166 -82.72000000000003);
-		--primary-08: oklch(0.4945 0.297278 -82.72000000000003);
-		--primary-09: oklch(0.38727951482578865 0.22519086267101945 -82.72000000000003);
-		--primary-10: oklch(0.24916012628129958 0.1489244571729748 -82.72000000000003);
-		--primary-11: oklch(0.11046170738630641 0.07262669982202441 -82.72000000000003);
-		--secondary-00: oklch(1 0.03523506763462919 174.9674);
-		--secondary-01: oklch(0.9536456092315344 0.03523506763462919 174.9674);
-		--secondary-02: oklch(0.8924089806120152 0.12226651611616707 174.9674);
-		--secondary-03: oklch(0.844618 0.159299 174.9674);
-		--secondary-04: oklch(0.7854571400878614 0.14932563102137283 174.9674);
-		--secondary-05: oklch(0.7110252520511524 0.13708788342722794 174.9674);
-		--secondary-06: oklch(0.6307554338482158 0.12406393236537076 174.9674);
-		--secondary-07: oklch(0.5558748958282139 0.09651562296811833 174.9674);
-		--secondary-08: oklch(0.4945 0.06639390943163861 174.9674);
-		--secondary-09: oklch(0.38727951482578865 0.037032483883832935 174.9674);
-		--secondary-10: oklch(0.24916012628129958 0.02375390884349093 174.9674);
-		--secondary-11: oklch(0.11046170738630641 0.011400212679566413 174.9674);
-		--success-00: oklch(1 0.024257111887574123 148.30000439636984);
-		--success-01: oklch(0.9536456092315344 0.024257111887574123 148.30000439636984);
-		--success-02: oklch(0.8924089806120152 0.07351482341637697 148.30000439636984);
-		--success-03: oklch(0.844618 0.12466168066207778 148.30000439636984);
-		--success-04: oklch(0.7854571400878614 0.15042101659568144 148.30000439636984);
-		--success-05: oklch(0.7110252520511524 0.13948969668297212 148.30000439636984);
-		--success-06: oklch(0.6307554338482158 0.1261639047081073 148.30000439636984);
-		--success-07: oklch(0.5558748958282139 0.10791110186311959 148.30000439636984);
-		--success-08: oklch(0.4945 0.07690619317930446 148.30000439636984);
-		--success-09: oklch(0.38727951482578865 0.0457513376060701 148.30000439636984);
-		--success-10: oklch(0.24916012628129958 0.02575933593360364 148.30000439636984);
-		--success-11: oklch(0.11046170738630641 0.012313506052849059 148.30000439636984);
-		--tertiary-00: oklch(1 0.034046389815560296 2.791302501092794);
-		--tertiary-01: oklch(0.9536456092315344 0.034046389815560296 2.791302501092794);
-		--tertiary-02: oklch(0.8924089806120152 0.08421751016426371 2.791302501092794);
-		--tertiary-03: oklch(0.844618 0.14726059081820986 2.791302501092794);
-		--tertiary-04: oklch(0.7854571400878614 0.19873235540856865 2.791302501092794);
-		--tertiary-05: oklch(0.7110252520511524 0.23494450943888123 2.791302501092794);
-		--tertiary-06: oklch(0.6307554338482158 0.21174506900632417 2.791302501092794);
-		--tertiary-07: oklch(0.5558748958282139 0.1839025285604721 2.791302501092794);
-		--tertiary-08: oklch(0.4945 0.14178977136603388 2.791302501092794);
-		--tertiary-09: oklch(0.38727951482578865 0.09664947566806639 2.791302501092794);
-		--tertiary-10: oklch(0.24916012628129958 0.053320044751899345 2.791302501092794);
-		--tertiary-11: oklch(0.11046170738630641 0.025277009084351466 2.791302501092794);
-		--warning-00: oklch(1 0.033978843637678835 61.19378984733035);
-		--warning-01: oklch(0.9536456092315344 0.033978843637678835 61.19378984733035);
-		--warning-02: oklch(0.8924089806120152 0.09727044978770355 61.19378984733035);
-		--warning-03: oklch(0.844618 0.16243636817381144 61.19378984733035);
-		--warning-04: oklch(0.7854571400878614 0.19844507360799077 61.19378984733035);
-		--warning-05: oklch(0.7110252520511524 0.18312495283983363 61.19378984733035);
-		--warning-06: oklch(0.6307554338482158 0.164466229970312 61.19378984733035);
-		--warning-07: oklch(0.5558748958282139 0.1383102018356785 61.19378984733035);
-		--warning-08: oklch(0.4945 0.10117462382028729 61.19378984733035);
-		--warning-09: oklch(0.38727951482578865 0.06390117110643204 61.19378984733035);
-		--warning-10: oklch(0.24916012628129958 0.03600870543417937 61.19378984733035);
-		--warning-11: oklch(0.11046170738630641 0.017183679327988338 61.19378984733035);
-
-
-		/* main */
-		--primary-text-color: light-dark(var(--primary-11), var(--primary-01));
-		--primary-heading-color: light-dark(var(--primary-10), var(--primary-02));
-		--primary-link-color: light-dark(var(--secondary-07), var(--secondary-03));
-		--primary-link-hover-color: light-dark(var(--secondary-06), var(--secondary-04));
-		--primary-border-color: light-dark(var(--primary-03), var(--primary-09));
-
-		/* secondary */
-		--secondary-text-color: light-dark(var(--secondary-11), var(--secondary-01));
-		--secondary-heading-color: light-dark(var(--secondary-09), var(--secondary-03));
+		/* main brand color */
+		--primary: oklch(0.5 0.297 -82.720);
 
-		/* backgrounds */
-		--main-background: light-dark(var(--primary-00), var(--primary-11));
-		--code-background: light-dark(var(--primary-01), var(--primary-10));
-		--soft-background: light-dark(var(--primary-01), var(--primary-10));
+		/* reinforcing brand color */
+		--secondary: oklch(0.5 0.159 174.967);
 
-		/* alerts */
-		--warning-background: light-dark(var(--warning-01), var(--warning-10));
-		--warning-text: light-dark(var(--warning-10), var(--warning-01));
-		--warning-border: light-dark(var(--warning-02), var(--warning-08));
-		--warning-heading: light-dark(var(--warning-08), var(--warning-02));
-
-		--danger-background: light-dark(var(--danger-01), var(--danger-10));
-		--danger-text: light-dark(var(--danger-10), var(--danger-01));
-		--danger-border: light-dark(var(--danger-02), var(--danger-08));
-		--danger-heading: light-dark(var(--danger-08), var(--danger-02));
-
-		--success-background: light-dark(var(--success-01), var(--success-10));
-		--success-text: light-dark(var(--success-10), var(--success-01));
-		--success-border: light-dark(var(--success-02), var(--success-08));
-		--success-heading: light-dark(var(--success-08), var(--success-02));
-
-		--note-background: light-dark(var(--note-01), var(--note-10));
-		--note-text: light-dark(var(--note-10), var(--note-01));
-		--node-border: light-dark(var(--node-02), var(--node-08));
-		--note-heading: light-dark(var(--note-08), var(--note-02));
-	}
+		/* harmonious complement to brand colors */
+		--tertiary: oklch(0.5 0.234 2.791);
 
-	:root {
-		color-scheme: light dark;
-	}
+		/* contrast to brand colors */
+		--accent: oklch(0.5 0.180 90.241);
 
+		/* green for success */
+		--success: oklch(0.5 0.150 148.300);
 
-	/* Layout */
+		/* blue for info */
+		--info: oklch(0.5 0.254 244.190);
 
-	body {
-		overflow-y: scroll;
-		font-family: var(--font-sans);
-		max-width: min(100ch, 100vi - 10vw);
-		margin-inline: auto;
-		margin-bottom: 5em;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 4rem 1rem;
+		/* orange for warnings */
+		--warning: oklch(0.5 0.198 61.193);
 
-		main {
-			width: 95vw;
-			max-width: 80ch;
-		}
-	}
+		/* red for danger */
+		--danger: oklch(0.5 0.250 -25.754);
 
-	main,
-	article {
-		margin-bottom: auto;
-		padding-bottom: 4rem;
-		display: grid;
-		gap: 1rem;
-		flex-wrap: wrap;
-		align-items: baseline;
-		column-gap: 0.5rem;
-	}
+		/* vertical space between main sections */
+		--large-gap: 3em;
 
-	@media (width >=700px) {
+		/* vertical space within content */
+		--small-gap: 2em;
 
-		body:not(.home) main {
-			grid-template-columns: 3fr 1fr;
-		}
-	}
+		/* horizontal space between items */
+		--gutter: 2em;
 
-	main>*:not(nav[aria-label=Contents]) {
-		grid-column: 1;
-	}
+		/* main body maximum width */
+		--width: 100ch;
 
-	:is(main, article)>* {
-		flex-basis: 100%;
-	}
+		/* borders */
+		--border-radius-tight: 5px;
+		--border-radius-loose: calc(1rem + 5px);
 
-	:is(main, article) :is(time, dl:not(.link)) {
-		/* flex-basis: 0; */
-		/* display: inline !important; */
-		font-size: 0.9em;
-		opacity: 0.8;
-	}
+		/* strength of colors (between 0 and 1) */
+		--saturation: 0.5;
 
-	/* Colors */
+		/* difference between dark and light colors (between 0 and 1) */
+		--contrast: 0.5;
 
-	html {
-		color: var(--primary-text-color);
-		background: var(--main-background);
-	}
+		/* darkness of dark colors (between 0 and 1) */
+		--shadows: 0.5;
 
-	a:where(:not([rel=home])) {
-		color: var(--primary-link-color);
+		/* brightness of light colors (between 0 and 1) */
+		--highlights: 0.5;
 
-		&:hover {
-			color: var(--primary-link-hover-color);
-		}
-	}
+		/* strength of colorful colors (between 0 and 1) */
+		--vibrance: 0.5;
 
-	code,
-	pre {
-		background: var(--code-background);
-	}
+		/* difference between colorful colors and muted colors (between 0 and 1) */
+		--fade: 0.5;
 
-	blockquote {
-		border-left: 5px solid var(--primary-border-color);
-	}
+		/* backgrounds */
+		--main-background: light-dark(var(--primary-00), var(--primary-11));
+		--soft-background: light-dark(var(--primary-01), var(--primary-10));
 
-	main>article {
-		border: 1px solid var(--primary-border-color);
-		padding: 2rem 2rem 2rem;
-		border-radius: calc(1rem + 5px);
-		display: flex;
-		flex-direction: column;
+		/* main colors */
+		--primary-text-color: light-dark(var(--primary-10), var(--primary-01));
+		--primary-heading-color: light-dark(var(--primary-09), var(--primary-02));
+		--primary-link-color: light-dark(var(--secondary-09), var(--secondary-02));
+		--primary-link-hover-color: light-dark(var(--secondary-07), var(--secondary-04));
+		--primary-border-color: light-dark(var(--primary-02), var(--primary-09));
+
+		/* secondary colors */
+		--secondary-text-color: light-dark(var(--secondary-10), var(--secondary-01));
+		--secondary-heading-color: light-dark(var(--secondary-09), var(--secondary-02));
+		--secondary-link-color: light-dark(var(--tertiary-09), var(--tertiary-02));
+		--secondary-link-hover-color: light-dark(var(--tertiary-07), var(--tertiary-04));
+
+		/* accent colors */
+		--accent-text-color: light-dark(var(--tertiary-07), var(--tertiary-04));
+		--accent-link-color: light-dark(var(--primary-06), var(--primary-05));
+		--accent-background-color: light-dark(var(--primary-02), var(--primary-09));
+		--accent-background: linear-gradient(in oklch to bottom right, light-dark(var(--primary-02), var(--primary-09)),
+				light-dark(var(--secondary-03), var(--secondary-08)));
+		--accent-border-color: light-dark(var(--primary-03), var(--primary-08));
+
+
+		/* calculations - DO NOT EDIT */
+
+		--contrast-scaled: calc(1 / calc(1 - calc(clamp(0, var(--contrast), 0.999) * 1)));
+		--shadows-scaled: calc(7 / calc(2 - calc(clamp(0, var(--shadows), 0.999))));
+		--highlights-scaled: calc(1 - calc(calc(calc(clamp(0, var(--highlights), 0.999) * 0.5) + 0.25) * 2));
+		--saturation-scaled: calc(calc(1.6 - calc(clamp(0, var(--saturation), 0.999) * 1.6)) * 1.4);
+		--saturation-difference: calc(1 - var(--saturation-scaled));
+		--contrast-divisor: calc(11 + var(--shadows-scaled));
+
+		--contrast-01: atan(calc(0 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-02: atan(calc(1 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-03: atan(calc(2 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-04: atan(calc(3 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-05: atan(calc(4 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-06: atan(calc(5 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-07: atan(calc(6 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-08: atan(calc(7 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-09: atan(calc(8 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-10: atan(calc(9 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-11: atan(calc(10 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+		--contrast-12: atan(calc(11 / var(--contrast-divisor) * calc(var(--contrast-scaled) * 2)) - var(--contrast-scaled)) / atan(calc(var(--contrast-scaled) * 2) - var(--contrast-scaled));
+
+		--shade-01: calc(calc(calc(var(--contrast-01) - 1) / -2) - var(--highlights-scaled));
+		--shade-02: calc(calc(calc(var(--contrast-02) - 1) / -2) - var(--highlights-scaled));
+		--shade-03: calc(calc(calc(var(--contrast-03) - 1) / -2) - var(--highlights-scaled));
+		--shade-04: calc(calc(calc(var(--contrast-04) - 1) / -2) - var(--highlights-scaled));
+		--shade-05: calc(calc(calc(var(--contrast-05) - 1) / -2) - var(--highlights-scaled));
+		--shade-06: calc(calc(calc(var(--contrast-06) - 1) / -2) - var(--highlights-scaled));
+		--shade-07: calc(calc(calc(var(--contrast-07) - 1) / -2) - var(--highlights-scaled));
+		--shade-08: calc(calc(calc(var(--contrast-08) - 1) / -2) - var(--highlights-scaled));
+		--shade-09: calc(calc(calc(var(--contrast-09) - 1) / -2) - var(--highlights-scaled));
+		--shade-10: calc(calc(calc(var(--contrast-10) - 1) / -2) - var(--highlights-scaled));
+		--shade-11: calc(calc(calc(var(--contrast-11) - 1) / -2) - var(--highlights-scaled));
+		--shade-12: calc(calc(calc(var(--contrast-12) - 1) / -2) - var(--highlights-scaled));
+
+		--vibrance-difference: calc(1 - clamp(0.001, var(--vibrance), 0.999));
+		--fade-scaled: calc(1 / calc(1 - clamp(0.001, var(--fade), 0.999)));
+
+		--atan-01: calc(1 - abs(calc(atan(calc(0 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-02: calc(1 - abs(calc(atan(calc(1 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-03: calc(1 - abs(calc(atan(calc(2 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-04: calc(1 - abs(calc(atan(calc(3 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-05: calc(1 - abs(calc(atan(calc(4 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-06: calc(1 - abs(calc(atan(calc(5 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-07: calc(1 - abs(calc(atan(calc(6 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-08: calc(1 - abs(calc(atan(calc(7 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-09: calc(1 - abs(calc(atan(calc(8 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-10: calc(1 - abs(calc(atan(calc(9 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-11: calc(1 - abs(calc(atan(calc(10 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+		--atan-12: calc(1 - abs(calc(atan(calc(11 / 11 * var(--fade-scaled)) - calc(var(--fade-scaled) / 2)) / atan(var(--fade-scaled) / 2))));
+
+		--chroma-01: calc(calc(var(--atan-01) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-02: calc(calc(var(--atan-02) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-03: calc(calc(var(--atan-03) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-04: calc(calc(var(--atan-04) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-05: calc(calc(var(--atan-05) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-06: calc(calc(var(--atan-06) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-07: calc(calc(var(--atan-07) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-08: calc(calc(var(--atan-08) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-09: calc(calc(var(--atan-09) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-10: calc(calc(var(--atan-10) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-11: calc(calc(var(--atan-11) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+		--chroma-12: calc(calc(var(--atan-12) * var(--vibrance-difference) + var(--vibrance)) * var(--saturation-scaled) + var(--saturation-difference));
+
+		--primary-00: oklch(from var(--primary) var(--shade-01) calc(c * var(--chroma-01)) h);
+		--primary-01: oklch(from var(--primary) var(--shade-02) calc(c * var(--chroma-02)) h);
+		--primary-02: oklch(from var(--primary) var(--shade-03) calc(c * var(--chroma-03)) h);
+		--primary-03: oklch(from var(--primary) var(--shade-04) calc(c * var(--chroma-04)) h);
+		--primary-04: oklch(from var(--primary) var(--shade-05) calc(c * var(--chroma-05)) h);
+		--primary-05: oklch(from var(--primary) var(--shade-06) calc(c * var(--chroma-06)) h);
+		--primary-06: oklch(from var(--primary) var(--shade-07) calc(c * var(--chroma-07)) h);
+		--primary-07: oklch(from var(--primary) var(--shade-08) calc(c * var(--chroma-08)) h);
+		--primary-08: oklch(from var(--primary) var(--shade-09) calc(c * var(--chroma-09)) h);
+		--primary-09: oklch(from var(--primary) var(--shade-10) calc(c * var(--chroma-10)) h);
+		--primary-10: oklch(from var(--primary) var(--shade-11) calc(c * var(--chroma-11)) h);
+		--primary-11: oklch(from var(--primary) var(--shade-12) calc(c * var(--chroma-12)) h);
+
+		--secondary-00: oklch(from var(--secondary) var(--shade-01) calc(c * var(--chroma-01)) h);
+		--secondary-01: oklch(from var(--secondary) var(--shade-02) calc(c * var(--chroma-02)) h);
+		--secondary-02: oklch(from var(--secondary) var(--shade-03) calc(c * var(--chroma-03)) h);
+		--secondary-03: oklch(from var(--secondary) var(--shade-04) calc(c * var(--chroma-04)) h);
+		--secondary-04: oklch(from var(--secondary) var(--shade-05) calc(c * var(--chroma-05)) h);
+		--secondary-05: oklch(from var(--secondary) var(--shade-06) calc(c * var(--chroma-06)) h);
+		--secondary-06: oklch(from var(--secondary) var(--shade-07) calc(c * var(--chroma-07)) h);
+		--secondary-07: oklch(from var(--secondary) var(--shade-08) calc(c * var(--chroma-08)) h);
+		--secondary-08: oklch(from var(--secondary) var(--shade-09) calc(c * var(--chroma-09)) h);
+		--secondary-09: oklch(from var(--secondary) var(--shade-10) calc(c * var(--chroma-10)) h);
+		--secondary-10: oklch(from var(--secondary) var(--shade-11) calc(c * var(--chroma-11)) h);
+		--secondary-11: oklch(from var(--secondary) var(--shade-12) calc(c * var(--chroma-12)) h);
+
+		--tertiary-00: oklch(from var(--tertiary) var(--shade-01) calc(c * var(--chroma-01)) h);
+		--tertiary-01: oklch(from var(--tertiary) var(--shade-02) calc(c * var(--chroma-02)) h);
+		--tertiary-02: oklch(from var(--tertiary) var(--shade-03) calc(c * var(--chroma-03)) h);
+		--tertiary-03: oklch(from var(--tertiary) var(--shade-04) calc(c * var(--chroma-04)) h);
+		--tertiary-04: oklch(from var(--tertiary) var(--shade-05) calc(c * var(--chroma-05)) h);
+		--tertiary-05: oklch(from var(--tertiary) var(--shade-06) calc(c * var(--chroma-06)) h);
+		--tertiary-06: oklch(from var(--tertiary) var(--shade-07) calc(c * var(--chroma-07)) h);
+		--tertiary-07: oklch(from var(--tertiary) var(--shade-08) calc(c * var(--chroma-08)) h);
+		--tertiary-08: oklch(from var(--tertiary) var(--shade-09) calc(c * var(--chroma-09)) h);
+		--tertiary-09: oklch(from var(--tertiary) var(--shade-10) calc(c * var(--chroma-10)) h);
+		--tertiary-10: oklch(from var(--tertiary) var(--shade-11) calc(c * var(--chroma-11)) h);
+		--tertiary-11: oklch(from var(--tertiary) var(--shade-12) calc(c * var(--chroma-12)) h);
+
+		--accent-00: oklch(from var(--accent) var(--shade-01) calc(c * var(--chroma-01)) h);
+		--accent-01: oklch(from var(--accent) var(--shade-02) calc(c * var(--chroma-02)) h);
+		--accent-02: oklch(from var(--accent) var(--shade-03) calc(c * var(--chroma-03)) h);
+		--accent-03: oklch(from var(--accent) var(--shade-04) calc(c * var(--chroma-04)) h);
+		--accent-04: oklch(from var(--accent) var(--shade-05) calc(c * var(--chroma-05)) h);
+		--accent-05: oklch(from var(--accent) var(--shade-06) calc(c * var(--chroma-06)) h);
+		--accent-06: oklch(from var(--accent) var(--shade-07) calc(c * var(--chroma-07)) h);
+		--accent-07: oklch(from var(--accent) var(--shade-08) calc(c * var(--chroma-08)) h);
+		--accent-08: oklch(from var(--accent) var(--shade-09) calc(c * var(--chroma-09)) h);
+		--accent-09: oklch(from var(--accent) var(--shade-10) calc(c * var(--chroma-10)) h);
+		--accent-10: oklch(from var(--accent) var(--shade-11) calc(c * var(--chroma-11)) h);
+		--accent-11: oklch(from var(--accent) var(--shade-12) calc(c * var(--chroma-12)) h);
+
+		/* automatic dark mode */
+		color-scheme: light dark;
 	}
 
-	main>ul._ {
-		list-style: none;
-		padding: 0;
+	/* body */
 
-		& article {
-			padding-bottom: 1em;
-		}
+	html {
+		background: var(--main-background);
+		color: var(--primary-text-color);
 	}
 
-	th,
-	td {
-		border-bottom: 1px solid var(--border-color-softer);
+	body {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: var(--large-gap);
+		margin-inline: auto;
+		max-width: min(var(--width), 100vi - 10vw);
+		overflow-y: scroll;
+		padding-block: var(--large-gap);
 	}
 
-	hr {
-		border-top: 1px solid var(--primary-text-color);
+	a,
+	a:visited {
+		color: var(--primary-link-color);
 	}
 
-	/* Frontmatter */
-
-	main>img {
-		margin-bottom: 2.5rem;
+	a:hover {
+		color: var(--primary-link-hover-color);
 	}
 
+	/* frontmatter */
+
+	/* TODO: Only render contents when necessary */
 	nav[aria-label=Contents]:has(>ol:empty),
 	nav[aria-label=Contents]:has(>ol>li:only-of-type>a) {
 		display: none;
 	}
 
-
-	@media (width >=700px) {
-		nav[aria-label=Contents] {
-			grid-column: 2;
-			grid-row-start: 3;
-			height: 0px;
-			overflow: visible;
-		}
+	main>:not(section) {
+		color: var(--primary-heading-color);
 	}
 
+	time {
+		font-weight: 500;
+	}
 
+	/* table of contents */
 
 	nav[aria-label=Contents] {
-		min-width: max-content;
-		flex-basis: 30%;
-		max-width: 100%;
-
-		&:before {
-			content: "Contents";
-			font-weight: 600;
-			margin-bottom: 0.5em;
-			display: block;
-			width: max-content;
+
+		/* top-level items */
+		&>ol {
+			list-style: none;
+			padding: 0;
+
+			&:before {
+				content: "Contents";
+				color: var(--primary-heading-color);
+				font-weight: 500;
+			}
 		}
 
-		& ol {
+		/* subitems */
+		ol {
 			list-style: none;
-			width: max-content;
-			margin: 0;
 			padding: 0;
 
-			& ol {
-				margin-left: 1em;
+			ol {
+				padding-left: 1em;
+			}
+		}
+
+	}
+
+	@media (width >=700px) {
+		nav[aria-label=Contents] {
+			top: var(--large-gap);
+
+			grid-column: 2;
+			grid-row-start: 3;
+			height: 0px;
+			overflow: visible;
+			position: sticky;
+
+			&>ol {
+				height: calc(100vh - var(--large-gap));
+
+				overflow-y: auto;
+				overflow-x: hidden;
 			}
 		}
 	}
 
-	/* Header */
+	/* header */
 
 	header {
-		margin-top: 4rem;
+		color: var(--primary-heading-color);
+
+		align-items: center;
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
-		align-items: center;
-		column-gap: 1em;
+		gap: var(--small-gap) var(--gutter);
+		width: 100%;
 
-		p.tagline {
-			margin-left: auto;
-			align-self: flex-end;
-			margin-bottom: 0.5em;
-			font-size: 1.5em;
+		a#title,
+		a#logo {
+			color: inherit;
 		}
 
-		a.logo {
-			/* mask-image: var(--logo); */
-			/* mask-image: unset; */
-			background: var(--primary-10);
+		#tagline {
+			display: none;
+		}
 
-			img {
-				visibility: hidden;
-			}
+		#logo {
+
+			/*
+				The URL of the SVG is applied as a variable to
+				the element in an inline style declaration. This
+				makes the SVG available to use as a mask, which
+				can allows coloring via background.
+			*/
+			background: currentColor;
+			mask-image: var(--logo-url);
+		}
+
+		#logo img {
+			height: 1.3cap;
+			width: auto;
+
+			/*
+				If the logo is colored via the background, then
+				the image itself should hide.
+			*/
+			visibility: hidden;
 		}
 
 		nav {
+			background: var(--soft-background);
+			border-radius: var(--border-radius-tight);
 			border: 1px solid var(--primary-border-color);
-			padding: 0px 6px;
+			padding-inline: var(--gutter);
+
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
 			width: 100%;
 
-			&:first-of-type {
-				padding-top: 7px;
+			ul {
+				list-style: none;
+				display: flex;
+				padding: 1em 0;
+				gap: var(--gutter);
+				flex-wrap: wrap;
 			}
 
-			&:last-of-type {
-				padding-bottom: 7px;
+			ul+ul {
+				/*
+					TODO: This should be replaced with a gap decoration
+					at some point in the near future.
+				*/
+				border-top: 1px solid var(--primary-border-color);
 			}
 
-			margin-inline: -3px;
-			border-radius: 5px;
-			display: flex;
-			column-gap: 2rem;
-			flex-wrap: wrap;
-			justify-content: flex-start;
-			background: var(--soft-background);
-		}
-
-		nav:has(+ nav) {
-			border-bottom: none;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-
-			&:after {
-				display: block;
-				content: '';
-				border-bottom: 1px solid var(--primary-border-color);
-				flex-basis: 100%;
-				margin-block: 0.7rem;
+			[aria-current="page"] {
+				color: var(--secondary-link-color);
 			}
 		}
-
-		nav+nav {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			border-top: none;
-			margin-top: 0;
-		}
-	}
-
-	nav[aria-label=Breadcrumbs]>a:only-child {
-		display: none;
 	}
 
 	nav[aria-label=Breadcrumbs] {
 		text-transform: uppercase;
-		color: var(--primary-05);
+		color: var(--primary-link-color);
 
-		a {
-			color: unset;
+		a,
+		a:visited {
+			color: inherit;
 		}
 	}
 
 	/* Sidebar */
 
+	body>aside {
+		margin-top: auto;
+	}
+
 	aside nav {
 		margin-inline: auto;
 
@@ -422,131 +435,238 @@
 		}
 	}
 
-	/* Footer */
+	/* main */
 
-	footer {
-		text-align: center;
+	main,
+	article {
+		display: grid;
+		column-gap: 3em;
+		row-gap: 1em;
+
+		&>* {
+			min-width: 0;
+		}
+	}
+
+	@media (width >=700px) {
+		main {
+			grid-template-columns: 3fr 1fr;
+		}
 	}
 
-	/* Main */
 
 	p:where([itemprop=description]),
-	main>p:first-of-type {
+	#content>p:first-of-type {
 		font-size: 1.3em;
 		color: var(--secondary-text-color);
 	}
 
-	article a {
-		display: flex;
-		flex-direction: column;
-		row-gap: 1em;
 
-		&>* {
-			margin: 0;
+	main {
+		width: 95vw;
+		max-width: min(80ch, 100%);
+		/* margin-bottom: var(--large-gap); */
+
+		&>*:not(nav[aria-label=Contents]) {
+			grid-column: 1;
 		}
-	}
 
-	article img {
-		order: -1;
-	}
+		/* content */
 
-	article a,
-	article a:hover {
-		color: unset;
-	}
+		section#content {
+			display: flex;
+			flex-direction: column;
+			gap: 1em;
 
-	article h1 {
-		grid-area: title;
-		font-size: 1.6rem;
-	}
+			a {
+				color: var(--primary-link-color);
 
-	article p {
-		font-size: 1.6rem;
-	}
+				&:hover {
+					color: var(--primary-link-hover-color);
+				}
+			}
 
-	article dl.icon {
-		grid-area: icon;
-		font-size: 1.5em;
-	}
+			img {
+				border-radius: var(--border-radius-tight);
+			}
 
-	article dl.icon dd {
-		text-align: right;
-	}
+			pre,
+			:not(pre)>code {
+				background: linear-gradient(in oklch to bottom left,
+						light-dark(var(--primary-02), var(--primary-09)),
+						light-dark(var(--primary-01), var(--primary-10)));
+				border: 1px solid var(--code-border);
+			}
 
-	article .description {
-		grid-area: description;
-	}
+			blockquote {
+				border-left: 5px solid var(--primary-border-color);
+			}
 
-	article dt {
-		display: none;
-	}
+			th,
+			td {
+				border-bottom: 1px solid var(--border-color-softer);
+			}
 
-	article dl.icon {
-		order: -1;
-	}
+			hr {
+				border-top: 1px solid var(--primary-text-color);
+			}
 
-	aside.alert.note {
-		--icon: 'ℹ️';
-		background: var(--info-background);
-		color: var(--info-text);
-		border-left: 3px solid var(--info-border);
+			/* page list */
 
-		h2 {
-			color: var(--info-heading);
-		}
-	}
+			&>ul._ {
+				display: flex;
+				flex-direction: column;
+				gap: 1em;
+				list-style: none;
+				padding: 0;
+			}
 
-	aside.alert.success {
-		--icon: '💡';
-		background: var(--success-background);
-		color: var(--success-text);
-		border-left: 3px solid var(--success-border);
+			article {
+				border: 1px solid var(--primary-border-color);
+				background: var(--soft-background);
+				border-radius: var(--border-radius-loose);
+				padding: 2rem;
+				display: flex;
+				flex-direction: column;
 
-		h2 {
-			color: var(--success-heading);
-		}
-	}
+				img {
+					order: -1;
+				}
 
-	aside.alert.warning {
-		--icon: '⚠️';
-		background: var(--warning-background);
-		color: var(--warning-text);
-		border-left: 3px solid var(--warning-border);
+				a {
+					display: flex;
+					flex-direction: column;
+					row-gap: 1em;
 
-		h2 {
-			color: var(--warning-heading);
-		}
-	}
+					&>* {
+						margin: 0;
+					}
+				}
+
+				article a,
+				article a:hover {
+					color: unset;
+				}
+
+				h1 {
+					grid-area: title;
+					font-size: 1.6rem;
+				}
+
+				p {
+					font-size: 1.6rem;
+				}
+			}
+
+
+			/* alerts */
+
+			aside.alert {
+				--color-00: oklch(from var(--color) var(--shade-01) calc(c * var(--chroma-01)) h);
+				--color-01: oklch(from var(--color) var(--shade-02) calc(c * var(--chroma-02)) h);
+				--color-02: oklch(from var(--color) var(--shade-03) calc(c * var(--chroma-03)) h);
+				--color-03: oklch(from var(--color) var(--shade-04) calc(c * var(--chroma-04)) h);
+				--color-04: oklch(from var(--color) var(--shade-05) calc(c * var(--chroma-05)) h);
+				--color-05: oklch(from var(--color) var(--shade-06) calc(c * var(--chroma-06)) h);
+				--color-06: oklch(from var(--color) var(--shade-07) calc(c * var(--chroma-07)) h);
+				--color-07: oklch(from var(--color) var(--shade-08) calc(c * var(--chroma-08)) h);
+				--color-08: oklch(from var(--color) var(--shade-09) calc(c * var(--chroma-09)) h);
+				--color-09: oklch(from var(--color) var(--shade-10) calc(c * var(--chroma-10)) h);
+				--color-10: oklch(from var(--color) var(--shade-11) calc(c * var(--chroma-11)) h);
+				--color-11: oklch(from var(--color) var(--shade-12) calc(c * var(--chroma-12)) h);
+
+				&.danger {
+					--color: var(--danger);
+					--icon: '⛔️';
+				}
+
+				&.note {
+					--color: var(--info);
+					--icon: 'ℹ️';
+				}
 
+				&.success {
+					--color: var(--success);
+					--icon: '💡';
+				}
 
-	aside.alert.danger {
-		--icon: '⛔️';
-		background: var(--danger-background);
-		color: var(--danger-text);
-		border-left: 3px solid var(--danger-border);
+				&.warning {
+					--color: var(--warning);
+					--icon: '⚠️';
+				}
 
-		h2 {
-			color: var(--danger-border);
+				--gradient: radial-gradient(at top right in oklch,
+					light-dark(var(--color-03), var(--color-08)),
+					light-dark(var(--color-02), var(--color-09)));
+				--text: light-dark(var(--color-10), var(--color-01));
+				--border: light-dark(var(--color-04), var(--color-06));
+				--heading: light-dark(var(--color-08), var(--color-02));
+
+				padding: 1.5rem 2rem;
+				background: var(--gradient);
+				color: var(--text);
+				border-left: 3px solid var(--border);
+
+				h2 {
+					color: var(--heading);
+
+					&:before {
+						font-size: 0.8em;
+						margin-right: 0.7rem;
+						opacity: 0.9;
+						content: var(--icon);
+					}
+				}
+			}
 		}
 	}
+}
 
-	aside.alert {
-		padding: 1.5rem 2rem;
-	}
+/* footer */
+
+footer {
+	text-align: center;
+	/* margin-top: var(--large-gap); */
+}
 
-	aside.alert h2:before {
-		font-size: 0.8em;
-		margin-right: 0.7rem;
-		opacity: 0.9;
+/* homepage */
+
+body.home {
+
+	/*
+		Single-column layout
+	*/
+	main {
+		grid-template-columns: 1fr;
 	}
 
-	aside.alert h2:before {
-		content: var(--icon);
+	/*
+		Hero tagline
+	*/
+	#tagline {
+		background-image: var(--accent-background);
+		border-radius: var(--border-radius-loose);
+		border: 1px solid var(--accent-border-color);
+		color: var(--accent-text-color);
+		padding-block: var(--large-gap);
+
+		display: block;
+		order: 1;
+		text-align: center;
+		width: 100%;
 	}
-}
 
-/* Elements */
+	/*
+		Hide breadcrumbs
+	*/
+	[aria-label=Breadcrumbs] {
+		display: none;
+	}
 
-img {
-	border-radius: 5px;
+	/*
+		Hide h1
+	*/
+	&>main>h1 {
+		display: none;
+	}
 }