-/* ---------- Dark mode (defaults) ---------- */
+/* ========================================================================
+ zndr.dk — Theme CSS (dark-first)
+ ------------------------------------------------------------------------
+ Conventions
+ - Variables in :root (dark defaults) + light-mode overrides
+ - Base reset → Layout → Components (Search, Card, Chip, Footer, Logo)
+ - Utilities (links, focus, pending) at the end
+ ===================================================================== */
+
+/* ===========================
+ Theme variables (dark-first)
+ =========================== */
:root{
- --bg:#1a1b1e; /* page background */
- --panel:#2a2b32; /* cards / input panels */
- --fg:#e6e6e6; /* primary text */
- --muted:#9ca3af; /* secondary text */
- --ring:#3a3b45; /* borders */
- --accent:#10a37f; /* green */
- --accent-strong:#059669;
- --accent-alt:#ef4444; /* red */
- --shadow:rgba(0,0,0,.5);
-}
-
-*{box-sizing:border-box}
-html,body{height:100%}
+ /* Palette */
+ --bg: #1a1b1e; /* page background */
+ --panel: #2a2b32; /* cards / inputs */
+ --fg: #e6e6e6; /* primary text */
+ --muted: #9ca3af; /* secondary text */
+ --ring: #3a3b45; /* borders */
+ --accent: #10a37f; /* brand green */
+ --accent-strong: #059669; /* green hover */
+ --accent-alt: #ef4444; /* brand red */
+ --shadow: rgba(0,0,0,.5);
+
+ /* Logo proportions (match favicon visual weight) */
+ --logo-size: 36px;
+ --logo-radius: 8px;
+}
+
+/* =================
+ Base / Reset
+ ================= */
+* { box-sizing: border-box; }
+html, body { height: 100%; }
body{
- margin:0;
- font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
- background:var(--bg);
- color:var(--fg);
+ margin: 0;
+ font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
+ "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+ background: var(--bg);
+ color: var(--fg);
+}
+
+/* =================
+ Layout
+ ================= */
+.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;
}
-/* Layout */
-.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}
-.title{font-weight:700;letter-spacing:.2px}
-.subtitle{color:var(--muted);font-size:.95rem}
+.title{ font-weight: 700; letter-spacing: .2px; }
+.subtitle{ color: var(--muted); font-size: .95rem; }
+
+/* =================
+ Search
+ ================= */
+.search{ width: 100%; margin: 18px 0 24px; }
-/* Search */
-.search{width:100%;margin:18px 0 24px}
.search input{
- width:100%;
- padding:12px 14px;
- border-radius:12px;
- border:1px solid var(--ring);
- background:var(--panel);
- color:var(--fg);
- outline:none;
- box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
-}
-.search input::placeholder{color:color-mix(in oklab,var(--muted) 85%, transparent)}
+ width: 100%;
+ padding: 12px 14px;
+ border-radius: 12px;
+ border: 1px solid var(--ring);
+ background: var(--panel);
+ color: var(--fg);
+ outline: none;
+ box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
+}
+
+.search input::placeholder{
+ color: color-mix(in oklab, var(--muted) 85%, transparent);
+}
+
.search input:focus{
- border-color:var(--accent);
- box-shadow:0 0 0 2px rgba(16,163,127,.40), inset 0 1px 3px rgba(0,0,0,.6);
+ border-color: var(--accent);
+ box-shadow:
+ 0 0 0 2px rgba(16,163,127,.40),
+ inset 0 1px 3px rgba(0,0,0,.6);
+}
+
+/* ==========================
+ Grid + Cards
+ ========================== */
+.grid{
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: 14px;
}
-/* Grid + Cards */
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{
- position:relative;
- border-radius:10px;
- background:var(--panel);
- border:1px solid var(--ring);
- padding:16px 14px 14px;
- text-decoration:none;
- color:inherit;
- box-shadow:none;
- transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+ position: relative;
+ border-radius: 10px;
+ background: var(--panel);
+ border: 1px solid var(--ring);
+ padding: 16px 14px 14px;
+ text-decoration: none;
+ color: inherit;
+ box-shadow: none;
+ transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
+
.card:hover{
- transform:translateY(-1px);
- border-color:var(--accent);
+ transform: translateY(-1px);
+ border-color: var(--accent);
box-shadow:
- 0 0 12px rgba(16,163,127,.25), /* green glow */
- 0 0 6px rgba(239,68,68,.20); /* red glow */
+ 0 0 12px rgba(16,163,127,.25), /* subtle green glow */
+ 0 0 6px rgba(239,68,68,.20); /* subtle red halo */
}
-/* Titles and descriptions (single-line clamp) */
+/* Titles & descriptions (no line clamp) */
.card h3{
- margin:0 0 6px;
- font-size:1.05rem;
- white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+ margin: 0 0 6px;
+ font-size: 1.05rem;
+ color: var(--fg);
}
+
.card p{
- margin:0;
- font-size:.95rem;
- color:var(--muted);
- display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
+ margin: 0;
+ font-size: .95rem;
+ color: var(--muted);
}
-/* Badge */
+/* ==========================
+ Chip (badge)
+ - Default: green
+ - LAN-only / away: red (.is-lan applied in HTML; JS removes it at home)
+ - Hidden until LAN check completes: .chip--pending
+ ========================== */
.chip{
- position:absolute; top:10px; right:10px;
- font-size:.75rem; padding:.12rem .5rem;
- border-radius:999px; font-weight:500;
+ position: absolute;
+ top: 10px; right: 10px;
+ font-size: .75rem;
+ padding: .12rem .5rem;
+ border-radius: 999px;
+ font-weight: 500;
background: var(--accent); /* solid green */
- color:#fff;
+ color: #fff;
}
-/* When away from LAN: mark card as LAN-only -> red chip */
-.card.is-lan .chip { background:#ef4444; } /* red-500 */
+.card.is-lan .chip{
+ background: var(--accent-alt); /* solid red */
+}
-/* hide chips until we decide color */
+/* Hide chips until the LAN check decides (prevents color flash) */
.chip--pending { visibility: hidden; }
-/* Links */
-a{color:var(--accent)}
-a:hover{color:var(--accent-strong)}
-
-/* Footer */
+/* =================
+ Footer
+ ================= */
footer{
- margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;
- align-items:center;justify-content:space-between;
- color:var(--muted);font-size:.9rem;
+ margin-top: 36px;
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ 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{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:hover{
+ color: var(--fg);
+ border-bottom-color: var(--accent);
+}
+
+/* =================
+ Links (general)
+ ================= */
+a{ color: var(--accent); }
+a:hover{ color: var(--accent-strong); }
-/* Keyboard focus */
-:where(a,input).focus-visible,:where(a,input):focus-visible{
- outline:3px solid var(--accent);
- outline-offset:2px;
- border-radius:10px;
+/* ==========================
+ Keyboard focus (accessibility)
+ ========================== */
+:where(a, input).focus-visible,
+:where(a, input):focus-visible{
+ outline: 3px solid var(--accent);
+ outline-offset: 2px;
+ border-radius: 10px;
}
-/* ---------- Light mode ---------- */
+/* =================
+ Light mode
+ ================= */
@media (prefers-color-scheme: light){
:root{
- --bg:#f7f7f8;
- --panel:#ffffff;
- --fg:#0f172a;
- --muted:#4b5563;
- --ring:#e5e7eb;
- --accent:#10a37f; /* keep brand green */
- --accent-strong:#0b8a6c;
- --shadow:rgba(2,6,23,.12);
+ --bg: #f7f7f8;
+ --panel: #ffffff;
+ --fg: #0f172a;
+ --muted: #4b5563;
+ --ring: #e5e7eb;
+ --accent: #10a37f; /* keep brand green */
+ --accent-strong: #0b8a6c;
+ --shadow: rgba(2,6,23,.12);
}
- /* keep gradient logo in light mode too (don’t override background) */
- .logo{box-shadow:0 6px 16px rgba(2,6,23,.10), 0 0 6px rgba(239,68,68,.12)}
-
.search input{
- background:var(--panel);
- border:1px solid var(--ring);
- box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
+ background: var(--panel);
+ border: 1px solid var(--ring);
+ box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.search input:focus{
- box-shadow:0 0 0 2px rgba(16,163,127,.3), inset 0 1px 2px rgba(0,0,0,.06);
+ box-shadow:
+ 0 0 0 2px rgba(16,163,127,.3),
+ inset 0 1px 2px rgba(0,0,0,.06);
}
- .card{background:var(--panel);border:1px solid var(--ring);box-shadow:none}
- .card:hover{box-shadow:0 4px 10px rgba(0,0,0,.10)}
+ .card{ background: var(--panel); border: 1px solid var(--ring); box-shadow: none; }
+ .card:hover{ box-shadow: 0 4px 10px rgba(0,0,0,.10); }
}
-/* ---- Logo tuned to match favicon proportions ---- */
-:root{
- --logo-size: 36px; /* box size (matches favicon base) */
- --logo-radius: 8px; /* rounded corners like SVG */
-}
-
-/* Gradient logo box */
+/* ==========================
+ Logo (matches favicon feel)
+ ========================== */
.logo{
--g1: var(--accent);
--g2: var(--accent-alt);
- width: var(--logo-size);
+ width: var(--logo-size);
height: var(--logo-size);
border-radius: var(--logo-radius);
background: linear-gradient(135deg, var(--g1), var(--g2));
place-items: center;
box-shadow:
0 4px 12px rgba(16,163,127,.25),
- 0 0 6px rgba(239,68,68,.15);
+ 0 0 6px rgba(239,68,68,.15);
}
.logo-core{
}
.logo-text{
- /* ~40% of box height, same proportion as SVG (26/64 ≈ 0.406) */
+ /* ~40% of box height (26/64 ≈ 0.406) to mirror the SVG badge */
font-size: calc(var(--logo-size) * 0.406);
font-weight: 700;
letter-spacing: 0.3px;
- line-height: 0.95; /* tight stack like the favicon */
+ line-height: 0.95;
color: #fff;
text-align: center;
}
+/* ==========================
+ Optional: reduced motion
+ ========================== */
+@media (prefers-reduced-motion: reduce){
+ .card { transition: none; }
+ .card:hover { transform: none; box-shadow: none; }
+}
+
+
projects / zndr-11ty.git / commitdiff