/* SITE-004 A-1：見た目の値はすべてここに置く。base.css は数値を直書きしない。 lib/tokens.js がこのファイルを読み、図解（lib/figures.js）とサムネイル（tools/thumb.js）も 同じ値を使う。色を変えるならここだけを直す。 狙い：白地・黒の太い見出し・差し色は1色。段の色は config/labels.json（別管理）。 */ :root { color-scheme: light; /* ---- 色 ---- */ --c-bg: #ffffff; --c-bg-2: #f1f2f4; /* SITE-018 2-4：ページの地。本文の白い紙より一段暗くして対比を作る */ --c-surface: #ffffff; --c-surface-2: #f9f9fb; --c-ink: #0b0b0c; --c-ink-2: #43464e; --c-ink-3: #71757e; --c-line: #e2e3e8; --c-line-2: #cbcdd4; --c-line-strong: #0b0b0c; /* 差し色は1色だけ */ --c-accent: #e11d48; --c-accent-ink: #ffffff; --c-accent-soft: #fdecf1; --c-link: #0b0b0c; --c-link-visited: #43464e; /* SITE-018 2-10：箱は3種。★色ではなく「記号（■▲●）と地の濃さ」で見分ける。 差し色は1色だけという規則に合わせ、ここから有彩色を外した。 注意（warn）だけは、読み飛ばすと損をする箱なので差し色を当てる。 */ --c-point: #43464e; --c-point-bg: #f4f4f6; --c-warn: #e11d48; --c-warn-bg: #fdecf1; --c-word: #43464e; --c-word-bg: #f9f9fb; --c-code-bg: #f4f4f6; /* ---- 字体 ---- */ --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; --f-head: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* ---- 字の大きさ ---- SITE-020 5-4：本文と見出しの「比率」を Zenn の実測値に寄せた（大きさそのものは真似ない）。 Zenn（本文 16px を 1 としたとき）… h1 1.70／h2 1.50／h3 1.30／h4 1.10／記事の題 2.06 出どころ：static.zenn.studio の .znc の h1〜h4（em 指定）と ArticleHeader の題（33px）。 このサイトの本文は --fs-2（0.9375rem＝15px）で、そこからの比が同じになるようにした。 --fs-3 = h4 1.10 ／ --fs-4 = h3 1.30 ／ --fs-5 = h2 1.50 ／ --fs-6 = ページの題 2.07 ★本文の大きさ（--fs-2）は動かしていない。比率だけを採る。 */ --fs-0: 0.75rem; --fs-1: 0.8125rem; --fs-2: 0.9375rem; --fs-3: 1.03125rem; /* 16.5px＝本文の 1.10 倍（h4） */ --fs-4: 1.21875rem; /* 19.5px＝本文の 1.30 倍（h3） */ --fs-5: 1.40625rem; /* 22.5px＝本文の 1.50 倍（h2） */ --fs-6: 1.9375rem; /* 31px ＝本文の 2.07 倍（ページの題） */ --fs-7: 2.625rem; /* SITE-020 5-4：行間も比率で寄せた。 Zenn … 本文 1.9（.znc）／見出しは指定が無く本文を受け継ぐ（＝ 1.9）／一覧の見出し 1.5／目次 1.5 このサイト … 本文を 1.9 に合わせ、見出しは 1.42 → 1.6 に上げた。 ★見出しを 1.9 までは上げていない。太い黒の見出しが2行になったとき離れすぎるため、 比（見出し÷本文）を 0.77 → 0.84 に寄せるところで止めた。 */ --lh-tight: 1.32; --lh-chip: 1.6; /* 段のラベルなど、1行の小さな札 */ --lh-tag: 1.7; /* タグ・配信の札 */ --lh-head: 1.6; --lh-body: 1.9; --fw-body: 400; --fw-bold: 700; --fw-black: 900; --ls-head: 0.005em; --ls-label: 0.06em; /* ---- 余白 ---- SITE-020 5-4：刻みを Zenn に合わせた。 Zenn の --spacing-* … 4／8／16／24／32／40／48／64px（4px から始まり、以降は 8px 刻み） これまでの刻み … 4／8／12／16／24／32／48／72px（12px と 72px が 8px 刻みから外れる） ★8つの段の数はそのままで、値だけを Zenn の刻みに1対1で置き換えた。 */ --sp-0: 0.25rem; /* 4px */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px（旧 12px） */ --sp-3: 1.5rem; /* 24px（旧 16px） */ --sp-4: 2rem; /* 32px（旧 24px） */ --sp-5: 2.5rem; /* 40px（旧 32px） */ --sp-6: 3rem; /* 48px */ --sp-7: 4rem; /* 64px（旧 72px） */ /* ---- 形 ---- */ --r-1: 3px; --r-2: 6px; --bw-1: 1px; --bw-2: 2px; --bw-3: 4px; --w-max: 42rem; /* 本文の幅 */ --w-wide: 72rem; /* 全体の幅 */ /* 画像枡の縦横比。tools/thumb.js が作る絵（1200x630・縮小版 600x315）と同じ数にする。 枡と絵の比が同じなので、object-fit: cover でも左右も上下も切れない。 ここを変えるときは tools/thumb.js の OG_W・OG_H も一緒に変える。 */ --ar-og: 1200 / 630; /* ================= SITE-018：組み方の値 ================= Zenn の構造（白い本文の紙／右に追従する目次／左の細い操作列／文字だけの一覧）を 入れるために足した値。★色・字体・ロゴは真似していない。 ★字の大きさと行間（--fs-*・--lh-*）はこの回では動かしていない。 Zenn の CSS を取得できず、実測値が無いまま比率を動かすと推測になるため （SITE-018【1】。詳しくは reports/SITE-018_report.md）。 */ /* 本文の紙（2-4）。ページの地 --c-bg-2 の上に、この紙を浮かせる */ /* SITE-020 5-4：本文の1行の長さを Zenn の実測値に寄せた。 Zenn の記事本文の実測 … 外枠 1200px −左右の余白 80px ＝ 1120px、 そこから右の目次の列 330px を引いた 790px が本文の列。枠 1px×2 と左右の余白 40px×2 を 引いて 708px。本文は 16px なので 708 ÷ 16 ＝ 44.3 文字ぶん。 このサイト … 46rem − 2rem×2 ＝ 42rem ＝ 672px、本文 15px で 44.8 文字ぶんだった。 45.5rem にして 41.5rem ＝ 664px、44.3 文字ぶんにそろえた。 */ --w-doc: 45.5rem; /* 本文の紙の最大幅（紙の外寸） */ --pad-doc: 2rem; /* 紙の内側の余白（広い画面） */ --pad-doc-sm: 1rem; /* 紙の内側の余白（狭い画面） */ --r-3: 10px; /* 紙の角の丸み */ /* 本文の1行の長さ（3-1 が検査する）。全角の文字数で持つ。 1行が長すぎても短すぎても読みにくいので、上下の両方を決める。 */ --measure-min: 30; --measure-max: 46; /* 右の目次（2-5）と左の操作列（2-6） */ --w-toc: 15rem; --w-rail: 3rem; --gap-shell: 1.5rem; /* 操作列・本文・目次のあいだ */ --toc-top: 5.5rem; /* 追従するときに上から空ける高さ（頭が居座る分） */ /* 分類の記号（2-3）。図形は lib/marks.js、割り当ては config/marks.json SITE-020 5-4：記号と文字の寸法の比を Zenn に寄せた。 Zenn の実測 … 一覧の絵文字の枡 92px ／ 一覧の見出し 16.8px ＝ 5.5 倍 記事の先頭の絵文字 75px ／ 記事の題 33px ＝ 2.3 倍 これまで … 一覧 20px ／ カードの見出し 15px ＝ 1.3 倍、先頭 56px ／ 題 32px ＝ 1.8 倍 ★一覧は 36px（2.4 倍）で止めた。Zenn の 5.5 倍にすると1件の高さが 2 倍近くになり、 1画面に入る件数が半分以下になる（1画面の件数は tools/check_layout.js が数える）。 ★記事の先頭は 72px（2.3 倍）で Zenn とほぼ同じ比にした。 36px は Twemoji の SVG の viewBox の一辺（config/marks.json の size）と同じ値で、 拡大も縮小もかからない。 */ --mark-sm: 2.25rem; /* 36px：一覧の中 */ --mark-md: 2.75rem; /* 44px：関連するページの中 */ --mark-lg: 4.5rem; /* 72px：記事の先頭（中央に1つ） */ --mark-pad: 0.5rem; /* 記号のまわりの余白（枡の中） */ --c-mark-bg: #f1f2f4; /* 記号の下じき（無彩色。記号の色だけが有彩色） */ /* 一覧の1件（2-2）。文字だけの行にして、1画面に入る件数を増やす SITE-020 5-4：12px は 8px の刻みから外れていたので 16px にした。 Zenn の一覧は1件に上下の余白を持たず、件と件のあいだを 32px 空けて離している。 このサイトは枠で区切った表の形なので、あいだではなく1件の中の余白で同じ間合いを作る。 */ --row-pad: 1rem; /* SITE-020 5-5：「1画面に入る件数」を数えるための物差し。 ★見た目には効かない。tools/check_layout.js だけが読む。 前後の比較を同じ条件でするために、画面の大きさと列の分かれ目をここに固定する。 --screen-h ノートパソコンでよくある高さ（1440×900 の縦） --bp-2col 一覧が2列になる画面の幅。css/base.css の .feed の @media と同じ数にする （@media は var() を読めないので、一致していることを check_layout が確かめる） --feed-cols その幅のときの列数 */ --screen-h: 900px; --bp-2col: 64rem; --feed-cols: 2; /* Valve 公式のウィジェットの既定の横幅。相手が決めている数なので、 ここに置いて base.css からは直書きしない（SITE-018 2-11・3-1）。 */ --w-steam: 646px; /* SITE-026【C-2】頭の右上の検索窓。索引はビルドのときに作り、探すのはブラウザの中だけ （外に送らない）。窓の幅と、結果の枡の幅・高さをここに置く。 */ --w-search: 11rem; /* 入力欄の幅（広い画面） */ --w-search-sm: 7rem; /* 入力欄の幅（狭い画面） */ --w-search-panel: 22rem; /* 結果の枡の幅 */ --h-search-panel: 24rem; /* 結果の枡の高さの上限。これを超えたらその中で送る */ --shadow-1: 0 1px 2px rgba(11, 11, 12, 0.06); --shadow-2: 0 6px 20px rgba(11, 11, 12, 0.09); /* ---- 図解が使う値（lib/figures.js が読む。単位なしの数） ---- */ --fig-w: 380; /* 図の viewBox の横幅 */ --fig-fs: 14; /* 図の中の一番小さい字（D-3：14px相当を割らない） */ --fig-fs-head: 17; --fig-line: 1.5; /* 図の線の太さ */ --fig-radius: 4; --fig-gap: 12; }