From 3b606bcc096a6d9860672e6d0d003ca9e80c067e Mon Sep 17 00:00:00 2001 From: Hannah Isopod Date: Sun, 15 Feb 2026 22:42:27 -0700 Subject: THE BIG ONE Total website redesign. Multiple new blog posts. Routine updates on several pages. Too much to list, even if I remembered it all. Remind me not to put this git repo on any portfolios. --- stuff/webgarden/style.css | 73 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 64 insertions(+), 9 deletions(-) (limited to 'stuff/webgarden/style.css') diff --git a/stuff/webgarden/style.css b/stuff/webgarden/style.css index 0599032..bd37aec 100644 --- a/stuff/webgarden/style.css +++ b/stuff/webgarden/style.css @@ -22,33 +22,88 @@ font-weight: bold; font-style: italic; } + +:root { + color-scheme: dark light; + + /* Trying to define as few specific colours as possible as generically as possible */ + --background: light-dark(#fff5eb, #1a1a1d); + --foreground: light-dark(#222, #ddd); + --accent1: light-dark(#64790a, #ff1159); + --accent2: light-dark(#007a70, #00ffd5); + --shadow: #000a; + --message-red: light-dark(#c00, red); + --message-green: light-dark(#007500, lime); + --message-yellow: light-dark(#d3b200, yellow); + --message-blue: light-dark(#005fbb, dodgerblue); + + --linkcolor: var(--accent1); + --linkhover: var(--accent2); + + --fg0: var(--foreground); + --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%); + --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%); + --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%); + + --bg0: var(--background); + --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%); + --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%); + --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%); + --bg00: light-dark(white, black); + + --accentbordercolor: light-dark(var(--accent1), var(--fg0)); +} + html, body { margin: 0; padding: 0; overflow: hidden; } body { - font-family: b612_mono, mono, monospace; - color: white; - background: #101010; - text-shadow: 1px 1px 4px black; + font-family: b612_mono, monospace; + color: var(--fg0); + background-color: var(--bg0); } #plant { height: 250px; width: 250px; } -a#forward, a#back, h1, h2, #hoverme { +a { + color: var(--linkcolor); +} +a:hover { + color: var(--linkhover); +} +a#forward, a#back, #hoverme { font-family: 'Silkscreen'; color: white; text-decoration: none; } +#hoverme, #statuscafe ~ #back { + color: var(--fg0); +} #hoverme { position: absolute; top: 4px; - left: 209px; - animation-name: arrowwiggle; - animation-duration: 6s; - animation-iteration-count: infinite; + left: 219px; width: fit-content; text-align: right; +} + +@media screen and (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + .bubblecolumn { + display: none; + } } \ No newline at end of file -- cgit v1.2.3