fuzzyworld-tools / commit
Fix main.css to use consistent site variables
server/site/main.css | 280 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 170 insertions(+), 110 deletions(-) diff --git a/server/site/main.css b/server/site/main.css index 4931b11..0e8f07f 100644 --- a/server/site/main.css +++ b/server/site/main.css @@ -15,36 +15,157 @@ @import url("_icons.css"); /* ============================================================================= - Main Site Configuration + Site Configuration ============================================================================= */ +:root { + --site-bg: var(--color-bg-primary); + --site-fg: var(--color-fg-primary); + --site-muted: var(--color-fg-muted); + --site-line: var(--color-border-primary); + --site-soft: var(--color-bg-secondary); + --site-card: var(--color-bg-tertiary); + --site-accent-soft: var(--color-accent-soft); + + --site-link: var(--color-accent); +} + +@media (prefers-color-scheme: dark) { + :root { + --site-bg: var(--color-bg-primary); + --site-fg: var(--color-fg-primary); + --site-muted: var(--color-fg-muted); + --site-line: var(--color-border-primary); + --site-soft: var(--color-bg-secondary); + --site-accent-soft: var(--color-accent-soft); + } +} + body { - max-width: 72rem; - margin: 0 auto; - padding: 0 var(--spacing-md); - background: var(--color-bg-primary); - color: var(--color-fg-primary); + margin: 0; + background: var(--site-bg); + color: var(--site-fg); font: 16px/var(--line-height-relaxed) var(--font-family-sans); } /* ============================================================================= - Site Header + Site Header & Footer ============================================================================= */ -h1 { +header.site { + background: var(--site-soft); + border-bottom: 1px solid var(--site-line); +} + +header.site .bar, +footer.site .cols { + max-width: 72rem; + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +header.site .bar { display: flex; + flex-wrap: wrap; align-items: center; - gap: var(--spacing-sm); - font-size: var(--font-size-2xl); + gap: 0 var(--spacing-lg); +} + +header.site .brand { font-weight: var(--font-weight-bold); - margin: var(--spacing-lg) 0; - padding: 0; + font-size: var(--font-size-lg); + color: var(--site-fg); + letter-spacing: -0.01em; } -#logo { - width: 3rem; - height: 3rem; - border-radius: var(--border-radius-md); +header.site .brand:hover { + text-decoration: none; + color: var(--site-link); +} + +/* Site icon in header */ +header.site .brand::before { + content: ""; + display: inline-block; + width: 1.1em; + height: 1.1em; + margin-right: 0.3em; + vertical-align: -0.1em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a58ca'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +@media (prefers-color-scheme: dark) { + header.site .brand::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2379b8ff'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); + } +} + +footer.site { + margin-top: var(--spacing-xl); + border-top: 1px solid var(--site-line); + background: var(--site-soft); + color: var(--site-muted); + font-size: var(--font-size-sm); +} + +footer.site .cols { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); + gap: var(--spacing-lg); + padding-top: var(--spacing-lg); + padding-bottom: var(--spacing-xl); +} + +footer.site h2 { + font-size: var(--font-size-xs); + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--site-muted); + margin: 0 0 var(--spacing-xs); +} + +footer.site a, +footer.site span { + display: block; + padding: var(--spacing-xs) 0; +} + +/* ============================================================================= + Site Navigation + ============================================================================= */ + +.site-nav { + display: flex; + flex-wrap: wrap; + gap: 0 var(--spacing-md); +} + +.site-nav a { + color: var(--site-muted); + padding: var(--spacing-sm) 0; +} + +.site-nav a:hover { + color: var(--site-fg); + text-decoration: none; +} + +.site-nav a[aria-current] { + color: var(--site-fg); + font-weight: var(--font-weight-semibold); +} + +/* ============================================================================= + Main Content Layout + ============================================================================= */ + +main { + max-width: 72rem; + margin: 0 auto; + padding: 0 var(--spacing-md) var(--spacing-xl); } /* ============================================================================= @@ -59,6 +180,22 @@ h1 { padding: var(--spacing-md) 0; } +h1 { + display: flex; + align-items: center; + gap: var(--spacing-sm); + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + margin: var(--spacing-lg) 0 var(--spacing-sm); + padding: 0; +} + +#logo { + width: 3rem; + height: 3rem; + border-radius: var(--border-radius-md); +} + h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); @@ -95,7 +232,7 @@ p { .list-horizontal li:not(:last-child)::after { content: "|"; margin: 0 var(--spacing-xs); - color: var(--color-fg-muted); + color: var(--site-muted); } .list-vertical { @@ -127,19 +264,19 @@ img { } /* ============================================================================= - Site Footer + Old Footer (for backwards compatibility) ============================================================================= */ #footer { font-size: var(--font-size-xs); margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); - border-top: 1px solid var(--color-border-primary); - color: var(--color-fg-muted); + border-top: 1px solid var(--site-line); + color: var(--site-muted); } #footer a { - color: var(--color-accent); + color: var(--site-link); text-decoration: none; } @@ -147,101 +284,12 @@ img { text-decoration: underline; } -/* ============================================================================= - Ko-fi Widget - ============================================================================= */ - #footer .kofi-widget { display: block; text-align: center; margin: var(--spacing-md) 0; } -/* ============================================================================= - Shared Header & Footer Integration - ============================================================================= */ - -/* Import the shared site header and footer styles */ -header.site { - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - margin-bottom: var(--spacing-lg); -} - -header.site .bar { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0 var(--spacing-lg); - padding: var(--spacing-sm) 0; -} - -header.site .brand { - font-weight: var(--font-weight-bold); - font-size: var(--font-size-lg); - color: var(--color-fg-primary); - letter-spacing: -0.01em; -} - -header.site .brand:hover { - text-decoration: none; - color: var(--color-accent); -} - -footer.site { - margin-top: var(--spacing-xl); - border-top: 1px solid var(--color-border-primary); - background: var(--color-bg-secondary); - color: var(--color-fg-muted); - font-size: var(--font-size-sm); -} - -footer.site .cols { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); - gap: var(--spacing-lg); - padding: var(--spacing-lg) 0 var(--spacing-xl); -} - -footer.site h2 { - font-size: var(--font-size-xs); - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--color-fg-muted); - margin: 0 0 var(--spacing-xs); -} - -footer.site a, -footer.site span { - display: block; - padding: var(--spacing-xs) 0; -} - -/* ============================================================================= - Site Navigation - ============================================================================= */ - -.site-nav { - display: flex; - flex-wrap: wrap; - gap: 0 var(--spacing-md); -} - -.site-nav a { - color: var(--color-fg-muted); - padding: var(--spacing-sm) 0; -} - -.site-nav a:hover { - color: var(--color-fg-primary); - text-decoration: none; -} - -.site-nav a[aria-current] { - color: var(--color-fg-primary); - font-weight: var(--font-weight-semibold); -} - /* ============================================================================= Responsive Adjustments ============================================================================= */ @@ -266,4 +314,16 @@ footer.site span { align-items: flex-start; gap: var(--spacing-xs); } + + main { + padding: 0 var(--spacing-sm) var(--spacing-xl); + } + + header.site .bar { + padding: 0 var(--spacing-sm); + } + + footer.site .cols { + padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-xl); + } }