From bbfb0c798eea28a49ed4a4ba95ddb3e8f50a94b8 Mon Sep 17 00:00:00 2001 From: Jannik ZANDER Date: Mon, 6 Oct 2025 18:36:03 +0200 Subject: [PATCH] New look --- package-lock.json | 16 +++++++++ package.json | 3 ++ site/_data/services.json | 31 ++++++++++++----- site/assets/styles.css | 72 ++++++++++++++++++++++++++-------------- site/index.njk | 15 ++++----- 5 files changed, 94 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29b9d51..ea958df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,9 @@ "packages": { "": { "name": "zndr-11ty", + "dependencies": { + "@grimlink/eleventy-plugin-lucide-icons": "^2.1.8" + }, "devDependencies": { "@11ty/eleventy": "^2.0.0", "@voxpelli/generate-favicon": "^1.1.1", @@ -187,6 +190,14 @@ "tslib": "^2.4.0" } }, + "node_modules/@grimlink/eleventy-plugin-lucide-icons": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@grimlink/eleventy-plugin-lucide-icons/-/eleventy-plugin-lucide-icons-2.1.8.tgz", + "integrity": "sha512-MaVeKcqc99RKr144z2m9bT9PZrR+Q1H3rgQUF9dlykdPOaAEAAiEGJzxJX7xyecXlx826vD8WOSh7ju5wx+jfA==", + "dependencies": { + "lucide-static": "^0.535.0" + } + }, "node_modules/@iarna/toml": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", @@ -1906,6 +1917,11 @@ "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==", "dev": true }, + "node_modules/lucide-static": { + "version": "0.535.0", + "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.535.0.tgz", + "integrity": "sha512-wlYTSPpeyMjLjQ5jgSAENQwVfURVf2XHV5TDp8YPCJBEyWz+FJGuGB5LYBgOFvWIDOMW+AIoiA8sNd8My/nxlw==" + }, "node_modules/luxon": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz", diff --git a/package.json b/package.json index 834464b..509c138 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,8 @@ "@11ty/eleventy": "^2.0.0", "@voxpelli/generate-favicon": "^1.1.1", "favicons": "^7.2.0" + }, + "dependencies": { + "@grimlink/eleventy-plugin-lucide-icons": "^2.1.8" } } diff --git a/site/_data/services.json b/site/_data/services.json index 86f05c6..f1dbcce 100644 --- a/site/_data/services.json +++ b/site/_data/services.json @@ -3,49 +3,57 @@ "name": "Nextcloud", "href": "https://cloud.zndr.dk", "desc": "Files, calendars, contacts.", - "tag": "Public" + "tag": "Public", + "icon": "cloud" }, { "name": "Mail", "href": "https://mail.zndr.dk", "desc": "Webmail.", - "tag": "Public" + "tag": "Public", + "icon": "cloud" }, { "name": "Vaultwarden", "href": "https://vault.zndr.dk", "desc": "Password manager.", - "tag": "Public" + "tag": "Public", + "icon": "cloud" }, { "name": "Home Assistant", "href": "https://ha.zndr.dk", "desc": "Automation & dashboards.", - "tag": "Home" + "tag": "Home", + "icon": "cloud" }, { "name": "Grafana", "href": "https://grafana.zndr.dk", "desc": "Visualization of data.", - "tag": "LAN" + "tag": "LAN", + "icon": "cloud" }, { "name": "Jellyfin", "href": "https://play.zndr.dk", "desc": "Media server.", - "tag": "Media" + "tag": "Media", + "icon": "cloud" }, { "name": "Git", "href": "https://git.zndr.dk", "desc": "Private repositories.", - "tag": "Git" + "tag": "Git", + "icon": "cloud" }, { "name": "Pi-hole", "href": "https://dns.zndr.dk", "desc": "DNS-level ad/tracker blocking.", "tag": "LAN", + "icon": "cloud", "lan": true }, { @@ -53,6 +61,7 @@ "href": "https://router.zndr.dk", "desc": "Router admin interface.", "tag": "LAN", + "icon": "cloud", "lan": true }, { @@ -60,6 +69,7 @@ "href": "https://db.zndr.dk", "desc": "Database management.", "tag": "LAN", + "icon": "cloud", "lan": true }, { @@ -67,18 +77,21 @@ "href": "https://influx.zndr.dk", "desc": "Time-series data.", "tag": "LAN", + "icon": "cloud", "lan": true }, { "name": "Notes / Blog", "href": "/blog/", "desc": "Occasional write-ups.", - "tag": "Notes" + "tag": "Notes", + "icon": "cloud" }, { "name": "Contact", "href": "/contact/", "desc": "How to reach me.", - "tag": "Info" + "tag": "Info", + "icon": "cloud" } ] diff --git a/site/assets/styles.css b/site/assets/styles.css index 9ec4b7f..a15f672 100644 --- a/site/assets/styles.css +++ b/site/assets/styles.css @@ -12,6 +12,7 @@ =========================== */ :root{ /* Palette */ + --scale: 1.0; --bg: #1a1b1e; /* page background */ --panel: #2a2b32; /* cards / inputs */ --fg: #e6e6e6; /* primary text */ @@ -21,6 +22,8 @@ --accent-strong: #059669; /* green hover */ --accent-alt: #ef4444; /* brand red */ --shadow: rgba(0,0,0,.5); + --tile-h: calc(100px * var(--scale)); + --font-size: calc(20px * var(--scale)); /* Logo proportions (match favicon visual weight) */ --logo-size: 36px; @@ -36,6 +39,7 @@ 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"; + font-size: var(--font-size); background: var(--bg); color: var(--fg); } @@ -101,24 +105,33 @@ header{ /* ========================== Grid + Cards ========================== */ -.grid{ +.grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - gap: 14px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* was 240px */ + gap: 16px; /* a bit more space */ } +/* Lichess-like plate + glyph left, text right */ .card{ position: relative; - border-radius: 10px; + display: flex; + align-items: center; /* center icon + text vertically */ + gap: calc(14px * var(--scale)); + padding: calc(12px * var(--scale)) calc(16px * var(--scale)); + height: var(--tile-h); + text-align: left; + + border-radius: calc(10px * var(--scale)); 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; + overflow: hidden; /* clip overflow if text is long */ } +/* Hover accent (optional) */ .card:hover{ transform: translateY(-1px); border-color: var(--accent); @@ -140,29 +153,39 @@ header{ color: var(--muted); } -/* ========================== - 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; - background: var(--accent); /* solid green */ - color: #fff; +/* Icon box with no plate */ +.tile-icon{ + flex: 0 0 auto; + height: 100%; /* match card height */ + aspect-ratio: 1 / 1; /* keep square footprint */ + display: flex; + align-items: center; + justify-content: center; + background: none; /* no grey plate */ } -.card.is-lan .chip{ - background: var(--accent-alt); /* solid red */ +/* SVG scales inside, same color as text */ +.tile-glyph{ + height: 100%; /* size relative to tile; tweak 58–70% */ + width: auto; + stroke-width: calc(2.4 * var(--scale)); + color: inherit; /* follow text color */ } -/* Hide chips until the LAN check decides (prevents color flash) */ -.chip--pending { visibility: hidden; } +.tile-body h3 { + margin: 0 0 .15rem 0; + font-size: calc(1rem * var(--scale)); /* slightly smaller */ + font-weight: 600; /* was 700 */ + color: var(--fg); + line-height: 1.3; +} + +.tile-body p { + margin: 0; + font-size: calc(0.95rem * var(--scale)); + color: var(--muted); + opacity: .9; +} /* ================= Footer @@ -315,4 +338,3 @@ a:hover{ color: var(--accent-strong); } margin: 12px auto; } - diff --git a/site/index.njk b/site/index.njk index f13dcb1..8a7c889 100644 --- a/site/index.njk +++ b/site/index.njk @@ -11,15 +11,12 @@ title: zndr.dk — Services
{% for s in services %} - - {% if s.tag %}{{ s.tag }}{% endif %} -

{{ s.name }}

-

{{ s.desc }}

+ + {% if s.icon %}
{% lucide s.icon, class="tile-glyph" %}
{% endif %} +
+

{{ s.name }}

+

{{ s.desc }}

+
{% endfor %}
-- 2.50.1