fixup

2026-10-02 13:12:49 +08:00
parent 2d4bdd0f85
commit a8ab1dfcc6
38 changed files with 10385 additions and 0 deletions
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}alterdb{% endblock %}</title>
+    <script>
+        // 首幀繪製前套用手動選擇的主題，避免閃爍；無記錄時跟隨系統偏好。
+        // 必須內聯且同步執行，置於樣式之後、body 之前。
+        (function () {
+            try {
+                var theme = localStorage.getItem('theme');
+                if (theme === 'light' || theme === 'dark') {
+                    document.documentElement.setAttribute('data-theme', theme);
+                }
+            } catch (_) { /* 存儲不可用（如隱私模式）時跟隨系統 */ }
+        })();
+    </script>
+    <style>
+        :root { color-scheme: light dark; }
+        /* 手動固定主題：覆蓋 color-scheme 後，預設畫布／文字色與 light-dark() 一併翻轉 */
+        :root[data-theme="light"] { color-scheme: light; }
+        :root[data-theme="dark"] { color-scheme: dark; }
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            margin: 0;
+            line-height: 1.6;
+        }
+        /* 獨立版式頁（登入 / 404）用的置中容器 */
+        .page {
+            max-width: 40rem;
+            margin: 3rem auto;
+            padding: 0 1rem;
+        }
+        header.site-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+            border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+            margin-bottom: 2rem;
+        }
+        header.site-header h1 { margin: 0; }
+        code { background: color-mix(in srgb, currentColor 10%, transparent); padding: 0.1em 0.4em; border-radius: 4px; }
+        /* 深淺色切換按鈕（各版式自行放置，樣式與側欄按鈕一致） */
+        .theme-toggle {
+            font: inherit;
+            font-size: .85rem;
+            padding: .3rem .9rem;
+            border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+            border-radius: 6px;
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+        }
+        .theme-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+    </style>
+    {% block layout_style %}{% endblock %}
+    {% block style %}{% endblock %}
+</head>
+<body>
+    {% block content %}{% endblock %}
+    {% block script %}{% endblock %}
+    <script>
+        // 深淺色切換：全站共用，綁定所有帶 data-theme-toggle 的按鈕。
+        // 主題固定在 <html data-theme>；未設置時由 color-scheme: light dark 跟隨系統。
+        (() => {
+            'use strict';
+
+            function effectiveTheme() {
+                const pinned = document.documentElement.getAttribute('data-theme');
+                if (pinned === 'light' || pinned === 'dark') { return pinned; }
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            // 按鈕文字顯示點擊後將切換到的模式
+            function refreshLabels() {
+                const label = effectiveTheme() === 'dark' ? '淺色模式' : '深色模式';
+                for (const button of document.querySelectorAll('[data-theme-toggle]')) {
+                    button.textContent = label;
+                }
+            }
+
+            for (const button of document.querySelectorAll('[data-theme-toggle]')) {
+                button.addEventListener('click', () => {
+                    const next = effectiveTheme() === 'dark' ? 'light' : 'dark';
+                    document.documentElement.setAttribute('data-theme', next);
+                    try { localStorage.setItem('theme', next); } catch (_) { /* 存儲不可用時僅本次生效 */ }
+                    refreshLabels();
+                });
+            }
+            // 未手動固定主題時，頁面配色由 CSS 自動跟隨系統，這裡僅同步按鈕文字
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', refreshLabels);
+            refreshLabels();
+        })();
+    </script>
+</body>
+</html>