From ef14ba500ff27dd2d1fe6e5debd99f7a5fc4db10 Mon Sep 17 00:00:00 2001 From: winter Sparkles Date: Thu, 6 Aug 2026 23:47:34 +0100 Subject: initial commit --- static/style.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 static/style.css (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..6e2b8c7 --- /dev/null +++ b/static/style.css @@ -0,0 +1,94 @@ +:root { + font-family: sans-serif; + color-scheme: light dark; + + /* theme colours */ + --primary: #055; + --secondary: #dee; + --negative: #a01; + --background: #eff; + --foreground: #022; + --behind: #dee; + --header-bg: var(--primary); + + @media (prefers-color-scheme: dark) { + --primary: #8cc; + --secondary: #122; + --negative: #e78; + --background: #233; + --foreground: #eff; + --behind: #011; + --header-bg: var(--secondary); + } + + /* dimensions */ + --page-width: 800px; + --is-wide: 1; + @media (width < 800px) { + --is-wide: 0; + } +} + +body { + margin: 0; + padding: 0; + + background-color: var(--behind); +} + +header { + background: linear-gradient( + to bottom, + color-mix(in oklab, var(--header-bg), var(--behind)), + var(--header-bg) + ); + color: contrast-color(var(--header-bg)); + + padding: 1em; + max-width: var(--page-width); + margin: calc(var(--is-wide) * 1em) auto; + height: 100px; + display: flex; + align-items: end; + + site-name { + font-weight: bold; + font-size: xx-large; + } +} + +footer { + font-size: small; + text-align: center; + margin: 1lh; + color: color-mix(in oklab, var(--foreground), var(--behind)); + + a { + color: inherit; + text-decoration-style: dotted; + } +} + +main { + padding: 1em; + max-width: var(--page-width); + margin: auto; + background-color: var(--background); + color: var(--foreground); +} + +error-message { + background-color: var(--negative); + color: contrast-color(var(--negative)); + margin: 1em 0; + padding: 1em; + border-radius: 4px; + display: flex; + flex-direction: column; + gap: 0.5lh; + width: max-content; + + box-label { + font-weight: bold; + } +} -- cgit v1.3