Dim LAN only services

diff --git a/site/_data/services.json b/site/_data/services.json
index af1330bdbf79eb95c78e42595337aa90f599d6d6..5770bfd0136904efb53d080d0025c6a0fc4a3140 100644 (file)
--- a/site/_data/services.json
+++ b/site/_data/services.json
@@ -3,28 +3,30 @@
     "name": "Nextcloud",
     "href": "https://cloud.zndr.dk",
     "desc": "Files, calendars, contacts.",
-    "tag": "LAN/SSL"
+    "tag": "Public"
   },
   {
-    "name": "Webmail",
+    "name": "Mail",
     "href": "https://mail.zndr.dk",
-    "desc": "Postfix \u00b7 Dovecot \u00b7 Roundcube.",
-    "tag": "IMAP/SMTP"
+    "desc": "Webmail.",
+    "tag": "Public"
   },
   {
     "name": "Pi-hole",
     "href": "https://dns.zndr.dk/admin/",
     "desc": "DNS-level ad/tracker blocking.",
-    "tag": "LAN-only"
+    "tag": "LAN",
+    "lan": true
   },
   {
     "name": "Home Assistant",
     "href": "https://ha.zndr.dk",
     "desc": "Automation & dashboards.",
-    "tag": "Home"
+    "tag": "Home",
+    "lan": true
   },
   {
-    "name": "Gitolite",
+    "name": "Git",
     "href": "https://git.zndr.dk",
     "desc": "Private repositories.",
     "tag": "Git"
@@ -35,6 +37,20 @@
     "desc": "Media server - movies, show, music.",
     "tag": "Media"
   },
+  {
+    "name": "Router",
+    "href": "https://router.zndr.dk",
+    "desc": "Router admin interface.",
+    "tag": "LAN",
+    "lan": true
+  },
+  {
+    "name": "phpMyAdmin",
+    "href": "https://db.zndr.dk/phpmyadmin/",
+    "desc": "Database management (MySQL/MariaDB).",
+    "tag": "LAN",
+    "lan": true
+  },
   {
     "name": "Notes / Blog",
     "href": "https://zndr.dk/blog/",

diff --git a/site/assets/styles.css b/site/assets/styles.css
index caf406904d9ff2b36801dc278610fb6d49f231c5..cac2dbab813dcda0896db6681ce6dbe202e4aecd 100644 (file)
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -99,8 +99,32 @@ footer {
   outline-offset: 2px;
   border-radius: 10px;
 }
+.card.is-lan {
+  opacity: 0.8;
+  position: relative;
+}
+.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;
+}
+@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
+    );
+  }
+}
+
 
-/* --- Optional light-mode fallback (in case your OS/browser is in light mode) --- */
 @media (prefers-color-scheme: light) {
   :root {
     --bg: #f6f7fb;

diff --git a/site/index.njk b/site/index.njk
index 38be010d65bca647f10735d609327f00334766cd..efa58e4d39a53a86939fc2d4fdac085e9c236042 100644 (file)
--- a/site/index.njk
+++ b/site/index.njk
@@ -1,15 +1,15 @@
 ---
 layout: layouts/base.njk
-title: zndr.dk — links
+title: zndr.dk — Services
 ---
 
-<div class="search" role="search">
-  <input id="filter" placeholder="Filter services… (press / to focus)" autocomplete="off" aria-label="Filter services" />
-</div>
+<h2 style="margin:0 0 .5rem 0;">Services</h2>
 
-<main class="grid" id="grid" aria-live="polite">
+<main class="grid" id="grid">
   {% for s in services %}
-    <a class="card" href="{{ s.href }}" rel="noopener">
+    <a class="card{% if s.lan %} is-lan{% endif %}"
+       href="{{ s.href }}"
+       rel="noopener noreferrer">
       {% if s.tag %}<span class="chip">{{ s.tag }}</span>{% endif %}
       <h3>{{ s.name }}</h3>
       <p>{{ s.desc }}</p>
@@ -17,14 +17,3 @@ title: zndr.dk — links
   {% endfor %}
 </main>
 
-<script>
-  (function(){
-    const f = document.getElementById('filter');
-    const cards = Array.from(document.querySelectorAll('.card'));
-    function apply(){
-      const q = f.value.toLowerCase().trim();
-      cards.forEach(c => { c.style.display = c.innerText.toLowerCase().includes(q) ? '' : 'none'; });
-    }
-    f.addEventListener('input', apply);
-  })();
-</script>