summaryrefslogtreecommitdiff
path: root/sass/_tokens.scss
diff options
context:
space:
mode:
authortanaka takashi <isazaka@gmail.com>2026-08-22 00:18:56 +0900
committertanaka takashi <isazaka@gmail.com>2026-08-22 00:19:26 +0900
commit9f2fb3bda733c32995c008bd0f40365e43c348da (patch)
tree663a6b48ec83b2b6ba2c998dcfed89e0bb29f172 /sass/_tokens.scss
parent31b19ee74469c23633bbea4e021d91ddd8c34e3a (diff)
feat: Zolaで「たかしの記録」を構築
Specifications.mdとDesign.mdを実装の基準として、個人アーカイブサイトをZola 0.23.3向けに構築する。 - Home、Notes、Software、About、Tagsの情報設計と専用URLを追加 - Notesの年別アーカイブ、タグ分類、目次、脚注、参考文献、更新日表示を実装 - Softwareの一覧・詳細、cgit/GitHub情報、Notesとの明示的な相互参照を実装 - Tera 2 componentによる再帰TOCと共通partialsを追加 - Minimal Editorial ArchiveのSCSS、レスポンシブ表示、アクセシビリティ対応を追加 - OS設定とlocalStorageに対応するLight/Darkテーマ切替を外部JavaScriptで実装 - Atom/RSS、sitemap、robots.txt、404、favicon、syntax highlightingを設定 - メールアドレスをzola.tomlへ一元化し、AboutとFooterから参照 - 表示名・内部ディレクトリ・変数・URLをSoftware/softwareへ統一 - public/をGit管理対象外とし、外部CDNやNode.js依存を導入しない - zola checkおよびzola buildの成功を確認
Diffstat (limited to 'sass/_tokens.scss')
-rw-r--r--sass/_tokens.scss42
1 files changed, 42 insertions, 0 deletions
diff --git a/sass/_tokens.scss b/sass/_tokens.scss
new file mode 100644
index 0000000..a0ed8f3
--- /dev/null
+++ b/sass/_tokens.scss
@@ -0,0 +1,42 @@
+:root {
+ color-scheme: light;
+ --color-bg: #f6f5f1;
+ --color-surface: #fbfaf7;
+ --color-text: #202124;
+ --color-muted: #666b70;
+ --color-border: #d6d8da;
+ --color-link: #315f82;
+ --color-link-hover: #244a67;
+ --color-focus: #1e668f;
+ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
+ --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+ --content-max: 72ch;
+ --site-max: 72rem;
+ --rule: 1px solid var(--color-border);
+}
+
+:root[data-theme="dark"] {
+ color-scheme: dark;
+ --color-bg: #17191b;
+ --color-surface: #1d2022;
+ --color-text: #e9e9e6;
+ --color-muted: #a0a3a6;
+ --color-border: #363a3e;
+ --color-link: #86b6d8;
+ --color-link-hover: #add3ed;
+ --color-focus: #86b6d8;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ color-scheme: dark;
+ --color-bg: #17191b;
+ --color-surface: #1d2022;
+ --color-text: #e9e9e6;
+ --color-muted: #a0a3a6;
+ --color-border: #363a3e;
+ --color-link: #86b6d8;
+ --color-link-hover: #add3ed;
+ --color-focus: #86b6d8;
+ }
+}