layout fixes

2026-06-19 13:01:29 +01:00
parent 8e60f0472b
commit 7e4c508329
2 changed files with 340 additions and 115 deletions
@@ -3,12 +3,25 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>zeitkort</title>
+<title>zeitkort — FLÓ</title>
+
+<script>
+(function () {
+  var stored = localStorage.getItem('poc-theme');
+  var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+  document.documentElement.setAttribute('data-theme', theme);
+})();
+</script>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
 <header>
-  <span class="brand">zeitkort</span>
+  <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
+  <span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
  <nav>
    <a href="/">Timer</a>
    <a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</a>
@@ -28,7 +41,30 @@

 <footer>zeitkort-web {{.Version}} · web-only POC · resets every 10 minutes</footer>

+<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+
 <script src="/static/htmx.min.js"></script>
 <script src="/static/timer.js"></script>
+<script>
+(function () {
+  function currentSystemTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
+  }
+  var btn = document.getElementById('theme-toggle');
+  if (btn) {
+    btn.addEventListener('click', function () {
+      var current = document.documentElement.getAttribute('data-theme') || 'light';
+      var next = current === 'light' ? 'tokyo' : 'light';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('poc-theme', next);
+    });
+  }
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    if (!localStorage.getItem('poc-theme')) {
+      document.documentElement.setAttribute('data-theme', currentSystemTheme());
+    }
+  });
+})();
+</script>
 </body>
 </html>{{end}}