diff options
| author | tanaka takashi <isazaka@gmail.com> | 2026-08-22 00:18:56 +0900 |
|---|---|---|
| committer | tanaka takashi <isazaka@gmail.com> | 2026-08-22 00:19:26 +0900 |
| commit | 9f2fb3bda733c32995c008bd0f40365e43c348da (patch) | |
| tree | 663a6b48ec83b2b6ba2c998dcfed89e0bb29f172 /sass/_header.scss | |
| parent | 31b19ee74469c23633bbea4e021d91ddd8c34e3a (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/_header.scss')
| -rw-r--r-- | sass/_header.scss | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/sass/_header.scss b/sass/_header.scss new file mode 100644 index 0000000..8512a55 --- /dev/null +++ b/sass/_header.scss @@ -0,0 +1,77 @@ +.site-header { + border-bottom: var(--rule); +} + +.header-inner { + display: flex; + align-items: center; + gap: 1.5rem; + min-height: 3.8rem; +} + +.site-title { + margin-right: auto; + color: var(--color-text); + font-weight: 700; + text-decoration: none; +} + +.nav-list { + display: flex; + gap: 1.2rem; + list-style: none; +} + +.nav-list a { + color: var(--color-muted); + font-size: 0.9rem; + text-decoration: none; +} + +.nav-list a:hover, +.nav-list a[aria-current="page"] { + color: var(--color-text); + text-decoration: underline; + text-underline-offset: 0.3em; +} + +.theme-toggle { + display: none; + padding: 0.2rem 0; + border: 0; + border-bottom: 1px solid currentColor; + background: transparent; + color: var(--color-muted); + cursor: pointer; + font-size: 0.75rem; +} + +.theme-ready .theme-toggle { + display: block; +} + +@media (max-width: 42rem) { + .header-inner { + flex-wrap: wrap; + gap: 0.55rem 1rem; + padding-block: 0.8rem; + } + + .site-title { + flex: 1 1 auto; + } + + .header-inner nav { + order: 3; + width: 100%; + } + + .nav-list { + flex-wrap: wrap; + gap: 0.4rem 1.25rem; + } + + .theme-toggle { + margin-left: auto; + } +} |
