From 1f076a98fe47e29b3d66ef18d3fc8ec5910ed991 Mon Sep 17 00:00:00 2001 From: Jannik ZANDER Date: Tue, 9 Sep 2025 13:07:34 +0200 Subject: [PATCH] Add robot and sitemap --- site/assets/styles.css | 321 ++++++++++++++++++++++++++-------------- site/public/robots.txt | 6 + site/public/sitemap.xml | 6 + 3 files changed, 219 insertions(+), 114 deletions(-) create mode 100644 site/public/robots.txt create mode 100644 site/public/sitemap.xml diff --git a/site/assets/styles.css b/site/assets/styles.css index 3a45ea4..86a5808 100644 --- a/site/assets/styles.css +++ b/site/assets/styles.css @@ -1,160 +1,244 @@ -/* ---------- 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)); @@ -162,7 +246,7 @@ footer{ 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{ @@ -174,12 +258,21 @@ footer{ } .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; } +} + + diff --git a/site/public/robots.txt b/site/public/robots.txt new file mode 100644 index 0000000..99a412e --- /dev/null +++ b/site/public/robots.txt @@ -0,0 +1,6 @@ +# robot.txt for zndr.dk +user-agent: * +disallow: + +# Optional: sitemap +#sitemap: https://zndr.dk/sitemap.xml diff --git a/site/public/sitemap.xml b/site/public/sitemap.xml new file mode 100644 index 0000000..46b3b79 --- /dev/null +++ b/site/public/sitemap.xml @@ -0,0 +1,6 @@ + + + https://zndr.dk/ + https://zndr.dk/about.html + + -- 2.50.1