From: Jannik ZANDER Date: Mon, 8 Sep 2025 14:55:13 +0000 (+0200) Subject: Fix light mode X-Git-Url: https://git.zndr.dk/?a=commitdiff_plain;h=61c3c774661ecdea1d33cc6095d4aa957bdc7a1d;p=zndr-11ty.git Fix light mode --- diff --git a/site/assets/styles.css b/site/assets/styles.css index cac2dba..225b161 100644 --- a/site/assets/styles.css +++ b/site/assets/styles.css @@ -1,6 +1,6 @@ -/* === zndr.dk — dark-first theme === */ +/* === zndr.dk — full theme & layout === */ -/* Core palette (dark) */ +/* --- Dark mode defaults (base palette) --- */ :root { --bg: #0b0f1a; /* page background */ --card: #111827; /* card background */ @@ -26,10 +26,10 @@ body { .container { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; } header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 28px; } .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color: inherit; } -.logo { width:36px; height:36px; border-radius:10px; background: #0f172a; display:grid; place-items:center; box-shadow: 0 8px 24px var(--shadow); } +.logo { width:36px; height:36px; border-radius:10px; background:#0f172a; display:grid; place-items:center; box-shadow: 0 8px 24px var(--shadow); } .logo svg { width:22px; height:22px; fill:#fff; } -.title { font-weight: 700; letter-spacing: .2px; } -.subtitle { color: var(--muted); font-size: 0.95rem; } +.title { font-weight:700; letter-spacing:.2px; } +.subtitle { color:var(--muted); font-size:.95rem; } /* Search */ .search { width:100%; margin:18px 0 24px; } @@ -38,103 +38,126 @@ header { display:flex; align-items:center; justify-content:space-between; gap:16 padding:12px 14px; border-radius:12px; border:1px solid var(--ring); - background: #0f172a; - color: var(--fg); - outline: none; + background:#0f172a; + color:var(--fg); + outline:none; } .search input:focus { - border-color: var(--accent); - box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); + border-color:var(--accent); + box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); } /* Grid + Cards */ -.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } +.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; } .card { - position: relative; - border-radius: 14px; - background: var(--card); - border: 1px solid var(--ring); - padding: 16px 14px 14px; - text-decoration: none; - color: inherit; + position:relative; + border-radius:14px; + background:var(--card); + border:1px solid var(--ring); + padding:16px 14px 14px; + text-decoration:none; + color:inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; - box-shadow: 0 8px 24px var(--shadow); + box-shadow:0 8px 24px var(--shadow); } +.card h3 { margin:0 0 6px; font-size:1.05rem; color:var(--fg); } +.card p { margin:0; font-size:.95rem; color:var(--muted); } + +/* Dark-mode hover with stronger glow */ .card:hover { transform: translateY(-2px); border-color: var(--accent); - box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 20%, #000 60%); + box-shadow: + 0 6px 14px rgba(0,0,0,0.7), + 0 0 18px color-mix(in oklab, var(--accent) 90%, transparent); } -.card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--fg); } -.card p { margin: 0; font-size: .95rem; color: var(--muted); } +/* Chip (top-right badge) */ .chip { position:absolute; top:10px; right:10px; - font-size: .75rem; + font-size:.75rem; border:1px solid var(--ring); padding:.1rem .5rem; border-radius:999px; color: color-mix(in oklab, var(--fg) 80%, #fff 0%); - background: #0f172a; + background:#0f172a; /* ok for dark; overridden in light block below */ } /* Links in footer/content */ -a { color: var(--accent); } -a:hover { color: var(--accent-strong); } +a { color:var(--accent); } +a:hover { color:var(--accent-strong); } /* Footer */ footer { - margin-top: 36px; display:flex; gap:12px; flex-wrap:wrap; + margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; - color: var(--muted); font-size:.9rem; + color:var(--muted); font-size:.9rem; } .foot-links { display:flex; gap:12px; flex-wrap:wrap; } -.foot-links a { color: inherit; text-decoration: none; border-bottom:1px dashed var(--ring); } -.foot-links a:hover { color: var(--fg); border-bottom-color: var(--accent); } +.foot-links a { color:inherit; text-decoration:none; border-bottom:1px dashed var(--ring); } +.foot-links a:hover { color:var(--fg); border-bottom-color:var(--accent); } /* Focus-visible for keyboard users */ :where(a, input).focus-visible, :where(a, input):focus-visible { - outline: 3px solid var(--accent); - outline-offset: 2px; - border-radius: 10px; -} -.card.is-lan { - opacity: 0.8; - position: relative; + outline:3px solid var(--accent); + outline-offset:2px; + border-radius:10px; } -.card.is-lan::after { - content: ''; - position: absolute; inset: 0; - pointer-events: none; - background: repeating-linear-gradient( - 45deg, - transparent 0 6px, - rgba(255,255,255,0.04) 6px 12px - ); - border-radius: 14px; + +/* Static dim style for LAN-only cards (no JS needed) */ +.card.is-lan, +.card.is-offline { + opacity:0.82; /* readable but visibly dimmed */ + position:relative; } -@media (prefers-color-scheme: light) { - .card.is-lan::after { - background: repeating-linear-gradient( - 45deg, - transparent 0 6px, - rgba(0,0,0,0.03) 6px 12px - ); - } +.card.is-lan::after, +.card.is-offline::after { + content:''; + position:absolute; inset:0; pointer-events:none; + background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 12px); + border-radius:14px; } - +/* --- Light mode overrides all in one place --- */ @media (prefers-color-scheme: light) { :root { - --bg: #f6f7fb; - --card: #ffffff; - --fg: #0f172a; - --muted: #475569; - --ring: #cbd5e1; - --accent: #2563eb; - --accent-strong: #1d4ed8; + --bg:#f6f7fb; + --card:#ffffff; + --fg:#0f172a; + --muted:#475569; + --ring:#cbd5e1; + --accent:#2563eb; + --accent-strong:#1d4ed8; --shadow: rgba(2, 6, 23, .18); } - .search input { background: #ffffff; } + + .search input { background:#ffffff; } + + /* Make chip readable in light */ + .chip { + background:#eef2f7; + color:#0f172a; + border-color:#cbd5e1; + } + + /* Lighten logo box in light (or set to transparent if you prefer) */ + .logo { + background:#e2e8f0; + box-shadow:0 6px 16px rgba(2, 6, 23, 0.10); + } + + /* Softer hover shadows in light mode */ + .card:hover { + box-shadow: + 0 6px 12px rgba(0,0,0,0.15), + 0 0 6px rgba(0,0,0,0.05); + } + + /* Lighter stripe for dimmed cards on light bg */ + .card.is-lan::after, + .card.is-offline::after { + background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.03) 6px 12px); + } } +