Separation as Tool

webstatic.example/assets/css/main.css

@@ -0,0 +1,12 @@
+:root { color-scheme: light dark; }
+body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; }
+.container { max-width: 760px; margin: 0 auto; padding: 1.5rem; }
+.skip-link { position: absolute; left: -999px; }
+.skip-link:focus { left: 1rem; top: 1rem; background: #0b5fff; color: #fff; padding: .5rem; }
+.site-header { display: flex; gap: 1rem; align-items: center; padding: .75rem 1.5rem; border-bottom: 1px solid #ddd; }
+.site-nav { display: flex; gap: 1rem; }
+.brand { font-weight: 700; text-decoration: none; color: #0b5fff; }
+.lang-dropdown__menu { list-style: none; display: flex; gap: .5rem; }
+.site-footer { border-top: 1px solid #ddd; padding: 1.5rem; margin-top: 2rem; color: #555; }
+.muted { color: #777; }
+.page-nav { display: flex; justify-content: space-between; margin-top: 2rem; }

webstatic.example/assets/favicon/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#0b5fff"/><text x="16" y="22" font-size="16" text-anchor="middle" fill="#fff" font-family="sans-serif">G</text></svg>

webstatic.example/assets/favicon/site.webmanifest

@@ -0,0 +1,9 @@
+{
+  "name": "Meine Website",
+  "short_name": "Website",
+  "icons": [
+    { "src": "/assets/favicon/favicon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ],
+  "start_url": "/",
+  "display": "standalone"
+}

webstatic.example/assets/js/gcbok-theme.js

@@ -0,0 +1,12 @@
+// GCBoK.WebStaticBuilder example theme script.
+(function () {
+  var t = localStorage.getItem('gc-theme') || 'light';
+  document.documentElement.setAttribute('data-theme', t);
+  var btn = document.getElementById('themeToggle');
+  if (btn) btn.addEventListener('click', function () {
+    var cur = document.documentElement.getAttribute('data-theme');
+    var next = cur === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('gc-theme', next);
+  });
+})();