/* 炎上Tube速報@錆 — まとめブログ風スタイル */ /* ========================================================================== デザイントークン - 色: 青錆（緑青）アクセント + 寒色寄りグレースケール5段階 - タイポグラフィ: Major Third (1.25) のタイプスケール - スペーシング: 8pxベース（最小単位4px） ========================================================================== */ :root { /* 色: アクセント（青錆 = 藍×錆。銅の緑青） */ --color-accent: #2c6e63; --color-accent-dark: #1c4a43; --color-accent-pale: #eef3f2; /* 見出し・関連記事などの淡い背景 */ --color-accent-tint: #d3e3e0; /* カテゴリチップの背景 */ /* 色: グレースケール（5段階・寒色寄りで青錆と調和） */ --color-gray-100: #eef2f1; /* ページ背景（青錆に寄せた淡い寒色） */ --color-gray-300: #d3dad8; /* 罫線 */ --color-gray-500: #6f7a78; /* 補足テキスト */ --color-gray-700: #3c4644; /* サブテキスト */ --color-gray-900: #1b2221; /* 本文・フッター背景 */ --color-surface: #fff; /* タイプスケール (1.25) */ --text-sm: 0.8rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; /* スペーシング (8pxベース) */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; /* ヘッダー帯（既定は藍→緑青のグラデーション） */ --color-header-start: #21465a; /* 藍（ネイビー） */ --color-header-end: #163a37; /* 深い緑青へグラデーション */ --color-header-text: #fff; /* 帯が濃色なので既定は白。淡色パレットでは濃色に上書き */ /* 角丸 */ --radius-sm: 4px; --radius: 8px; } /* ========================================================================== カラーパレット候補（比較検討用） hugo server 時のみ右下のスイッチャーで切替できる。 本番は に data-palette が付かず、上記 :root の既定「青錆」で描画される。 ========================================================================== */ /* 炎: 当初の赤。比較用に残す（本番既定ではない） */ :root[data-palette="honoo"] { --color-accent: #d83a2e; --color-accent-dark: #a02018; --color-accent-pale: #fdf0ef; --color-accent-tint: #fde8e6; --color-header-start: #d83a2e; --color-header-end: #a02018; } /* 錆: サイト名「@錆」由来。焼け跡の錆びた鉄・燻し銅 — 熱を残しつつ赤の生々しさを抑える */ :root[data-palette="sabi"] { --color-accent: #9c4b21; --color-accent-dark: #6e3415; --color-accent-pale: #f7efe8; --color-accent-tint: #efdfd0; --color-header-start: #9c4b21; --color-header-end: #5d2c12; } /* 藍: 「速報」の報道感。扇情的な題材を落ち着いた紺で見せ、信頼感を出す */ :root[data-palette="ai"] { --color-accent: #2e4e74; --color-accent-dark: #19324e; --color-accent-pale: #edf2f7; --color-accent-tint: #dbe5f0; --color-header-start: #2e4e74; --color-header-end: #14253a; } /* 青錆（緑青）は本番既定（:root）。比較用の個別ブロックは持たない。 */ /* 青錆・淡: 既定の明度を上げた軽量版。カバー（帯）を淡い緑青にし文字を濃色に。 白基調をより活かし爽やかに見せる */ :root[data-palette="seisabi-light"] { --color-accent: #3a8d7e; --color-accent-dark: #266b5f; --color-accent-pale: #eff6f4; --color-accent-tint: #d8ebe6; --color-header-start: #c4e2dd; /* 淡い緑青のカバー */ --color-header-end: #b0d8d1; --color-header-text: #1c4a43; /* 淡色帯なので文字・ロゴは濃色 */ } /* 青錆・霞: 青錆淡よりさらにカバーを薄く。ほぼ白に近い帯で軽さ最優先 */ :root[data-palette="seisabi-mist"] { --color-accent: #3a8d7e; --color-accent-dark: #266b5f; --color-accent-pale: #eff6f4; --color-accent-tint: #d8ebe6; --color-header-start: #e6f2ef; /* さらに淡いカバー */ --color-header-end: #d6ebe6; --color-header-text: #1c4a43; } /* 鈍: 墨色基調の教養誌・新書風。彩度を絞り、知的な読者層に向けた落ち着いたトーン */ :root[data-palette="nibi"] { --color-accent: #3d4f5c; --color-accent-dark: #28343d; --color-accent-pale: #f1f3f4; --color-accent-tint: #e2e8ea; --color-header-start: #2b3640; --color-header-end: #171d23; } /* 炭: 鎮火後の炭と残り火。チャコールのヘッダー＋残り火オレンジのアクセント */ :root[data-palette="sumi"] { --color-accent: #cf6a28; --color-accent-dark: #9d4e1b; --color-accent-pale: #faf1e9; --color-accent-tint: #f5e0cc; --color-header-start: #322d29; --color-header-end: #161310; } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; background: var(--color-gray-100); margin: 0; line-height: 1.7; color: var(--color-gray-900); } /* キーボード操作時のフォーカス輪郭 */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .container { max-width: 860px; margin: 0 auto; padding: 0 var(--space-3); } /* ヘッダー */ .site-header { background: linear-gradient(135deg, var(--color-header-start) 0%, var(--color-header-end) 100%); color: var(--color-header-text); padding: var(--space-3) 0; margin-bottom: var(--space-4); } .site-title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-header-text); text-decoration: none; font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.02em; } .site-logo { width: 1.1em; height: 1.1em; flex-shrink: 0; } .site-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); opacity: 0.9; } /* 記事一覧 */ .page-title { font-size: var(--text-lg); border-left: 6px solid var(--color-accent); padding-left: var(--space-2); } .post-list { display: flex; flex-direction: column; gap: var(--space-3); } .post-card { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.15s; } .post-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.12); } .post-card-link { display: flex; gap: var(--space-3); color: inherit; text-decoration: none; } .post-card .thumb { width: 200px; height: 112px; object-fit: cover; flex-shrink: 0; } .post-card-body { padding: var(--space-2) var(--space-3) var(--space-2) 0; } .post-card h2 { font-size: var(--text-base); margin: 0 0 var(--space-1); color: var(--color-accent-dark); } .post-card .thumb + .post-card-body { padding-left: 0; } .post-card-link:not(:has(.thumb)) .post-card-body { padding-left: var(--space-3); } .post-card-cats { margin: 0; padding: 0 var(--space-3) var(--space-2); } .post-card-cats .cat { margin-left: 0; margin-right: var(--space-1); } .meta { font-size: var(--text-sm); color: var(--color-gray-500); margin: 0; } .cat { display: inline-block; background: var(--color-accent-tint); color: var(--color-accent-dark); border-radius: var(--radius-sm); padding: 0 var(--space-1); margin-left: var(--space-1); text-decoration: none; } a.cat:hover { background: var(--color-accent-pale); } /* カテゴリ一覧（トップ・/categories/） */ .cat-nav { margin-bottom: var(--space-4); } /* 記事一覧の一番下に置くカテゴリ導線（記事カードと区切る） */ .cat-nav-bottom { margin-top: var(--space-4); margin-bottom: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-gray-300); } .cat-nav-heading { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-2); color: var(--color-accent-dark); } .cat-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .cat-chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: 999px; padding: var(--space-1) var(--space-3); color: var(--color-accent-dark); text-decoration: none; font-size: var(--text-sm); transition: background 0.15s, border-color 0.15s; } .cat-chip:hover { background: var(--color-accent-tint); border-color: var(--color-accent); } .cat-count { background: var(--color-accent-tint); color: var(--color-accent-dark); border-radius: 999px; padding: 0 var(--space-1); font-size: 0.7rem; min-width: 1.4em; text-align: center; } /* パンくず */ .crumbs { font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-2); } .crumbs a { color: var(--color-accent-dark); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs span[aria-hidden] { margin: 0 var(--space-1); } /* 記事ページ */ .post { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-4); } .post-title { font-size: var(--text-2xl); line-height: 1.4; margin: 0 0 var(--space-1); } .post-body h2 { font-size: var(--text-lg); background: var(--color-accent-pale); border-left: 6px solid var(--color-accent); padding: var(--space-1) var(--space-2); margin-top: var(--space-5); } .video-embed { text-align: center; margin: var(--space-4) 0; } .video-embed iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; border: 0; } .video-info { font-size: var(--text-sm); color: var(--color-gray-700); word-break: break-all; } /* 注目のコメント */ .featured-comments { background: var(--color-gray-100); border: 1px solid var(--color-gray-300); padding: var(--space-3); border-radius: var(--radius-sm); } .comment { margin-bottom: var(--space-3); } .comment p { margin: var(--space-1) 0; } .comment blockquote { margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-surface); border-left: 3px solid var(--color-accent); } .comment-source { font-size: var(--text-sm); color: var(--color-gray-500); text-align: right; margin: var(--space-2) 0 0; } /* 関連記事 */ .related { background: var(--color-accent-pale); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .related-heading { color: var(--color-gray-900); font-size: var(--text-base); font-weight: 700; border-left: 6px solid var(--color-accent); padding-left: var(--space-2); margin: 0 0 var(--space-2); } .related-card { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: var(--space-2); color: var(--color-gray-900); text-decoration: none; font-weight: 700; } .related-card:hover { border-color: var(--color-accent); } .related-card img { width: 120px; height: auto; border-radius: var(--radius-sm); } /* パンくずリスト */ .breadcrumb { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-gray-500); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li + li::before { content: "›"; margin: 0 var(--space-1); color: var(--color-gray-300); } .breadcrumb a { color: var(--color-accent); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18em; } /* 前後記事ナビ */ .post-nav { display: flex; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); } .post-nav-prev, .post-nav-next { flex: 1 1 0; min-width: 0; } .post-nav-next { text-align: right; } .post-nav a { display: block; height: 100%; background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); padding: var(--space-2); color: var(--color-gray-900); text-decoration: none; } .post-nav a:hover { border-color: var(--color-accent); } .post-nav-label { display: block; font-size: var(--text-sm); color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-1); } .post-nav-title { display: block; font-size: var(--text-sm); color: var(--color-gray-700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 新着記事リスト */ .recent { border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .recent-heading { color: var(--color-gray-900); font-size: var(--text-base); font-weight: 700; border-left: 6px solid var(--color-accent); padding-left: var(--space-2); margin: 0 0 var(--space-2); } .recent-list { list-style: none; margin: 0; padding: 0; } .recent-list li + li { border-top: 1px solid var(--color-gray-300); } .recent-list a { display: flex; gap: var(--space-2); padding: var(--space-2) 0; color: var(--color-gray-900); text-decoration: none; } .recent-list a:hover { color: var(--color-accent); } .recent-list time { flex: 0 0 auto; font-size: var(--text-sm); color: var(--color-gray-500); } /* 広告 */ .advertisement { border: 1px solid var(--color-gray-300); padding: var(--space-2); margin-top: var(--space-4); text-align: center; } /* ページネーション */ .pagination { display: flex; justify-content: center; gap: var(--space-1); padding: var(--space-4) 0; list-style: none; } .pagination .page-item a { display: block; padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); color: var(--color-gray-900); text-decoration: none; } .pagination .page-item.active a { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } /* フッター */ .site-footer { margin-top: var(--space-5); padding: var(--space-3) 0; background: var(--color-gray-900); color: var(--color-gray-300); font-size: var(--text-sm); } .site-footer a { color: #fff; } .footer-nav { margin-bottom: var(--space-2); } .footer-nav a { margin-right: var(--space-3); } @media (max-width: 600px) { .post-card-link { flex-direction: column; gap: 0; } .post-card .thumb { width: 100%; height: auto; } .post-card-body { padding: var(--space-2) var(--space-3) !important; } .post { padding: var(--space-3); } }