From af1438ae9d235dd548c1a38751124ab78add0aae Mon Sep 17 00:00:00 2001
From: Jannik ZANDER <jzander@grundfos.com>
Date: Sun, 7 Sep 2025 10:25:32 +0200
Subject: [PATCH] Changed theme

---
 site/_data/services.json        |   2 +-
 site/_includes/layouts/base.njk |   2 +-
 site/about.md                   |  23 +++++-
 site/assets/styles.css          | 138 +++++++++++++++++++++++++++-----
 site/public/keys.txt            |   1 +
 site/public/pgp.txt             |   1 +
 6 files changed, 142 insertions(+), 25 deletions(-)
 create mode 100644 site/public/keys.txt
 create mode 100644 site/public/pgp.txt

diff --git a/site/_data/services.json b/site/_data/services.json
index c926529..55c2843 100644
--- a/site/_data/services.json
+++ b/site/_data/services.json
@@ -1,7 +1,7 @@
 [
   {
     "name": "Nextcloud",
-    "href": "https://nextcloud.zndr.dk",
+    "href": "https://cloud.zndr.dk",
     "desc": "Files, calendars, contacts.",
     "tag": "LAN/SSL"
   },
diff --git a/site/_includes/layouts/base.njk b/site/_includes/layouts/base.njk
index 3e38f9c..12cd81f 100644
--- a/site/_includes/layouts/base.njk
+++ b/site/_includes/layouts/base.njk
@@ -24,7 +24,7 @@
       </a>
     </header>
 
-    {% block content %}{% endblock %}
+    {{ content | safe }}
 
     <footer>
       <div>© {{ "" | year }} Jannik • Copenhagen</div>
diff --git a/site/about.md b/site/about.md
index c1fd9ad..77c76c9 100644
--- a/site/about.md
+++ b/site/about.md
@@ -1,8 +1,29 @@
 ---
 layout: layouts/base.njk
 title: About — zndr.dk
+permalink: /about.html
 ---
 
 # About
 
-Tiny landing page for links to self‑hosted services. Reach me at [post@zndr.dk](mailto:post@zndr.dk).
+Hello!
+
+I am Jannik. After living seven years in Sweden and eight years in Japan, I now live in the small village Tange, in my home country of Denmark. I currently work as Software Architect in the High-End Pumps team for Grundfos; before that, I worked for Ericsson, with Physical Layer Software for 3G and 4G mobile platforms on which a cellular mobile phone can be build.
+
+**Jannik Zander**  
+Tange Søvej 47  
+8850 Bjerringbro  
+DENMARK
+
+[jannik@zndr.dk](mailto:jannik@zndr.dk)
+
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2211.3125143496004!2d9.574938315970856!3d56.34169195388611!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x464bf0ccc745efd1%3A0x218cc261b741bfd2!2sTange+S%C3%B8vej+47%2C+8850+Bjerringbro!5e0!3m2!1sen!2sdk!4v1523647336754" width="650" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
+
+<iframe width="650" height="450"
+        src="https://embed.windy.com/embed2.html?lat=56.284&lon=9.583&detailLat=56.318&detailLon=9.605&width=650&height=450&zoom=11&level=surface&overlay=wind&product=ecmwf&menu=&message=true&marker=true&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=m%2Fs&metricTemp=%C2%B0C&radarRange=-1"
+        frameborder="0"></iframe>
+
+
+<iframe width="650"
+        src="https://asap-forecast.com/mobile/almind/"
+        frameborder="0"></iframe>
diff --git a/site/assets/styles.css b/site/assets/styles.css
index 58d8df8..caf4069 100644
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -1,22 +1,116 @@
-:root { --bg: #f6f7fb; --card: #ffffff; --fg: #0f172a; --muted: #475569; --ring: #94a3b8; --accent: #2563eb; }
-@media (prefers-color-scheme: dark) { :root { --bg: #0b0f1a; --card: #0f172a; --fg: #e5e7eb; --muted: #94a3b8; --ring: #334155; } }
-*{box-sizing:border-box} html,body{height:100%}
-body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--fg);background:radial-gradient(1200px 800px at 80% -10%, rgba(34,197,94,.08), transparent 50%),radial-gradient(800px 600px at -10% 10%, rgba(37,99,235,.08), transparent 50%),var(--bg)}
-.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:#111;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
-.logo svg{width:22px;height:22px;fill:#fff}
-.title{font-weight:700;letter-spacing:.2px}
-.subtitle{color:var(--muted);font-size:.95rem}
-.search{width:100%;margin:18px 0 24px}
-.search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--ring);background:var(--card);color:var(--fg)}
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
-.card{position:relative;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35));background-color: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 6px 22px rgba(2,6,23,.18)}
-.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 28px rgba(37,99,235,.22)}
-.card h3{margin:0 0 6px;font-size:1rem}
-.card p{margin:0;color:var(--muted);font-size:.92rem}
-.chip{position:absolute;top:10px;right:10px;font-size:.75rem;border:1px solid var(--ring);padding:.1rem .5rem;border-radius:999px;color:var(--muted)}
-footer{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)}
+/* === zndr.dk — dark-first theme === */
+
+/* Core palette (dark) */
+:root {
+  --bg: #0b0f1a;        /* page background */
+  --card: #111827;      /* card background */
+  --fg: #e5e7eb;        /* primary text */
+  --muted: #9aa4b2;     /* secondary text */
+  --ring: #243244;      /* borders / outlines */
+  --accent: #60a5fa;    /* interactive accents (hover, focus) */
+  --accent-strong: #3b82f6;
+  --shadow: rgba(0,0,0,0.45);
+}
+
+/* Global */
+* { 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";
+  color: var(--fg);
+  background: var(--bg);
+}
+
+/* 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; }
+.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; }
+
+/* Search */
+.search { width:100%; margin:18px 0 24px; }
+.search input {
+  width:100%;
+  padding:12px 14px;
+  border-radius:12px;
+  border:1px solid var(--ring);
+  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);
+}
+
+/* Grid + Cards */
+.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;
+  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+  box-shadow: 0 8px 24px var(--shadow);
+}
+.card:hover {
+  transform: translateY(-2px);
+  border-color: var(--accent);
+  box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 20%, #000 60%);
+}
+.card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--fg); }
+.card p  { margin: 0; font-size: .95rem; color: var(--muted); }
+
+.chip {
+  position:absolute; top:10px; right:10px;
+  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;
+}
+
+/* Links in footer/content */
+a { color: var(--accent); }
+a:hover { color: var(--accent-strong); }
+
+/* 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;
+}
+.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); }
+
+/* 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;
+}
+
+/* --- Optional light-mode fallback (in case your OS/browser is in light mode) --- */
+@media (prefers-color-scheme: light) {
+  :root {
+    --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; }
+}
diff --git a/site/public/keys.txt b/site/public/keys.txt
new file mode 100644
index 0000000..a6a2c3b
--- /dev/null
+++ b/site/public/keys.txt
@@ -0,0 +1 @@
+no keys here yet
diff --git a/site/public/pgp.txt b/site/public/pgp.txt
new file mode 100644
index 0000000..d606640
--- /dev/null
+++ b/site/public/pgp.txt
@@ -0,0 +1 @@
+no pgp here yet
-- 
2.50.1