ホームの「特集」の枠を外し、サムネイルを上に全幅で置く (#3241)

CLAUDE.md

@@ -939,13 +939,35 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
         片方だけ動かすと値が2つに割れる
       - 点線の補足の印（`.blog-info-metric span[title]`）は 3px のまま。
         リンクの下線ではなく `abbr` の慣習に合わせた別の役
-  - **リンクの色は4値・3状態**（#2860）。`_variables.styl` が持つ（`link-blue` /
-    `link-visited` / `link-on-tint` / `link-on-note` / `link-on-note-visited`）。
+  - **リンクの色は7値・3状態**（#2860 / #3241）。`_variables.styl` が持つ（`link-blue` /
+    `link-visited` / `link-on-tint` / `link-on-note-tip` / `-info` / `-warn` /
+    `-alert` / `link-on-note-visited`）。
     地が濃くなるぶん暗い側へ振る段で、`link-blue` は白地では AA を満たすが
     インラインコードの地（`surface-mute`）と note の4色の上では下回る。
     訪問済みの紫は白地とコードの地の両方で足りるので1値でよい
+    - **note の中だけは色相も地から借りる**（#3241）。4種類それぞれが色を持つ箱の中で、
+      青いリンクは唯一の外来色になる。**色相まで振れるのは #2926 で地の文のリンクが
+      常時下線を持つようになったから**で、リンクであることは下線が名乗り、
+      色は「その note のものである」ことだけを担う
+      - 値は「**地の色相を保ち、その note の地と、その中のインラインコードの地
+        （`code-bg()`）の両方で 4.6 を満たす、いちばん明るい色**」。
+        **AA の 4.5 ちょうどでは取らない**——コードの地は計算結果なので、
+        地を動かすと丸めの幅で割る。余裕は `ink-faint`（4.61）と同じ
+      - **`tip` の地は無彩色に近い**（彩度 14%）ので、色相を保つと青になる。
+        4色のうち1つは実質いままでと同じ役。**このブログの `tip` は灰で、緑は `info`**
+      - **訪問済みは4色に割らず紫のまま。** 紫はサイト全体で訪問済みの意味を持ち、
+        未訪問と**色相で**分かれる。種別ごとに割ると同じ色相の明度違いになり、
+        #2926 の「訪問済みは色相でしか見分けられない」という前提が崩れる
+      - **`:visited` の規則は種別の規則より後ろに置く。** 詳細度が同じ (0,3,1) で、
+        順序でしか勝てない
+      - **暗い側は1色のまま**（`dark-link-on-note`）。暗い地ではリンクを明るくするしか
+        なく、色相を保って彩度を残すとその note のコードの地で 2.5 まで落ち、
+        AA を取ると本文（`dark-ink-strong`）との比が 1.25 のほぼ白か、
+        彩度 100% のネオンになる。**同じ強さを移すのではなく、その部品が担う役から
+        決める**（#2746）
     - **比を使う場所に書かない。** スタイルガイドが地ごとに計算で出す（note は
-      4色のうちいちばん厳しい地との比を載せる。AA を満たすかはそこで決まる）。
+      種別ごとに「その note の地とコードの地の厳しい方」との比を載せる。
+      訪問済みは4種類に共通なので8つの地の最小）。
       以前このコメントに書いてあった 3つの数字は**どれも実測と違っていた**
       （AA を割るのは `link-on-tint` ではなく `link-blue`、`4.13` は再現せず、
       「4色すべてで 6.0 以上」は実際には 7.31〜8.84）
@@ -1637,14 +1659,33 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
     ホームの本文にあった「連載から探す」2枚はこれに置き換えた。
     **「連載がある」ことは新着一覧自体が名乗る**——1ページ目の25本のうち12本が連載所属で、
     7本はタイトルに「連載」と入っている
-- **パネルの既定はフラット。囲みを持つのは強調のために枚数を絞った枠だけ**（#3152）。
-  記事へ送るカードは一覧の1件（#2747）・We're hiring（#2820）の順に囲みを外してきて、
-  枠が残っていたのは連載・特設のパネルだけだった。**1枚のまとまりは間隔の比が作る**
-  - 囲みを持つのは `.series-panels-boxed` を足した枠だけで、いまはホームの「特集」
-    （旬で2枚 #2892）だけが該当する。**「特設ページだから枠」ではなく「選んで
-    絞ったから枠」**。全件を並べる `/series/` ・ `/specials/guidelines/` ・
-    `/specials/httf/` ・ `/specials/advent-calendar/` ・ `/specials/techcast/` は
-    フラットになる
+- **パネルは囲みを持たない。すべてフラット**（#3152 / #3241）。
+  記事へ送るカード（一覧の1件 #2747・We're hiring #2820・連載/特設のパネル #3152・
+  ホームの「特集」#3241）はどれも枠を持たず、**1枚のまとまりは間隔の比が作る。**
+  枠線を持つのはリンクプレビューだけ
+  - **ホームの「特集」（旬で3枚 #2892）は 768px 以上でサムネを上に全幅で置く**
+    （`series-panels-stacked`。器は一覧カードの頭と同じ幅100%・1200/630 #2790）
+    - **列は 3 / 2 / 1**（`col-12 col-md-6 col-lg-4`）。992px 以上で3列、
+      768〜991px で2列、767px 以下で1列。**境目はサイトが既に持つ 768 / 992 を使う**
+      （#3222 の「切り替わる点は4つだけ」。列に何が入るかで決まる点なので、
+      2列の一覧と同じ 768 と、帯が畳まれる 992 に相乗りする）
+    - **隣の枠（よく読まれている記事・新着一覧）との区別は絵の大きさではなく向きが付ける。**
+      新着の1件は 576px 以上では［サムネ左｜文字］の横帯なので、**縦積みは「特集」だけの形**に
+      なる。3列に割ると絵は 241×126（幅1280px）・286×150（幅1400px以上）で、
+      新着の 257×135・302×159 より一回り小さい（どちらも幅の 94%）
+      - 以前は2列で 386×202 とし、「絵が新着より大きいこと」を区別の手にしていた。
+        **絵が大きすぎたので3列に割った**（#3241）。手が1つ減ったぶんは向きが引き受ける
+    - **767px 以下は従来の横帯（88×59 のサムネを左）に戻す。** 1列で全幅の絵を積むと
+      幅375pxで1枚が 184px の絵を持ち、3枚で節が 1,000px 超＝画面2つぶんになって
+      下の新着一覧まで届かない。横帯なら3枚で 300px 前後に収まる
+    - **1200/630 は特集に来る絵の比に合う。** ガイドラインのロゴ 898×374（2.40）・
+      HTTF のロゴ 640×280（2.29）は 3:2 の器では左右が切れる。連載の索引記事の
+      サムネも133本の中央値が 1.66 で、3:2 より OGP の比に近い
+    - **絵が無い旬のもの（アドベントカレンダー・Tech Cast）も同じ大きさの空き枠。**
+      場所だけ空けておく規則（#2864）のまま
+    - **縦のガターも 48px**（横帯のグリッドは 24px）。縦積みでは縦の隣も
+      「上の文字 ↔ 下のサムネ」で、挟まる中の空き（12px）が横と同じになる。
+      767px 以下は横帯に戻るので 24px のまま
   - **外の空きは縦横で違う。比べる相手（中の空き）が軸ごとに違うため**。
     **横は 48px**——隣の列との境目で近づくのは「左のカードの文字」と「右のカードの
     サムネ」なので、中の空き（サムネと文字の 12px）の4倍を取る。24px では2倍にしか
@@ -1662,9 +1703,13 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
     ——markup と CSS の2箇所に同じ値を持つことになる
   - hover はどれもカードの型（題に下線・画像が一段引く）。We're hiring も #3162 で
     ここへ戻した（1枚＝1行き先だから面、という #3113 の判断の上書き）
-- **ホームの「特集」枠は旬で2枚選ぶ**（#2880 / #2892）。優先順は
+- **ホームの「特集」枠は旬で3枚選ぶ**（#2880 / #2892 / #3241）。優先順は
   アドベントカレンダー（開催年が今年）→ Tech Cast（新エピソード）→ HTTF（開催中）→
   連載（走り終えたもの。#3135）→ ガイドライン。前3つが季節もので、常設は後ろから落ちる
+  - **3枚そろわない期間がある。** 常設は連載とガイドラインの2つなので、
+    季節ものが1つも無ければ2枚で出る（列は3列のまま、3枚目が空く）。
+    **常設を足して埋めない**——旬で選ぶ枠なので、いつでも出せるものを
+    枠合わせのために増やすと名前どおりに働かなくなる（#2892 と同じ理由）
   - **季節ものはデータの年が名乗る。** アドベントは `advent_calendar.yml`、HTTF は
     `source/_data/httf.yml` の先頭の `year` を見る。年1回そこへ1行足す作業が
     そのままスイッチになるので、シーズンの終わりを別に持たなくてよい。
@@ -1715,17 +1760,21 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
     コーディング規約・TypeScript 教材の入口です。」（37字・2行）がその基準で、
     **連載も索引記事の `lede` の第1文を借りて同じ段に揃える。** 以前の
     `全9本・2026.08 更新` は規模と鮮度で、隣が中身を語っているのに数字だけを返していた
-    - 78連載の第1文は中央値41字で、パネルの本文幅343px（`text-meta` 12px＝28字/行）で
-      26本が1行・35本が2行に収まる。**3行以上の13本を切り詰めない**——
-      2行止め（#2914）は25件が縦に積む一覧の話で、1枚のパネルには当てはまらない
+    - 72連載の第1文は中央値38.5字で、3列にしたパネルの本文幅は 241px（幅1280px。
+      `text-meta` 12px＝20字/行）。9本が1行・36本が2行で、**3行以上は27本**。
+      **切り詰めない**——2行止め（#2914）は25件が縦に積む一覧の話で、
+      1枚のパネルには当てはまらない。列が広い幅（286px＝24字/行）では
+      18本が1行・34本が2行に収まる
+      - 3列にしたぶん3行以上は 12本 → 27本 に増えた（#3241）。**高さはそろえない**ので
+        （囲みが無く `height: 100%` も持たない #3152）、伸びるのはその1枚だけ
     - **先頭の名乗り（「◯◯連載のインデックス記事です。」）は落とす。** ラベルと
       タイトルが既に言っている。78連載中8本が該当し、うち4本は名乗りしか無い。
       **名乗りしか無い連載だけ `全N本・YYYY.MM 更新` に戻す**
     - lede は索引記事のもので、連載そのものの紹介とは限らない（索引記事が
       技術記事を兼ねている連載がある）。それでも借りるのは、**連載の説明文を
       別に持つとフロントマターに新しいキーが増え、書き手が2箇所を書くことになる**ため
   - **「◯◯一覧へ」は種別ごとの導線なので、置ける場所が中身で変わる**（#2892）。
-    2枚とも特設の回は行き先が1つなので**節の下**にまとめて置く。連載と特設が混ざる回は
+    どの枚も特設の回は行き先が1つなので**節の下**にまとめて置く。連載と特設が混ざる回は
     行き先が2つになるので、**それぞれのパネルの中**に入れる。節の下に「特設ページ一覧へ」
     だけを置くと、隣に連載が並んでいるときに枠全体の導線に見えて嘘になる
 - **記事末の自動生成ブロックは全幅の帯で切る**（#2874）。関連記事・被参照・We're hiring は

source/specials/markdown/index.md

@@ -277,13 +277,16 @@ $$
 タイトルを付けると、タイトル行と本文が分かれます。
 :::
 
-注釈の中には、箇条書き・番号付きリスト・コードブロック・表も書けます。
+注釈の中には、箇条書き・番号付きリスト・インラインコード・リンク・コードブロック・表も書けます。インラインコードとリンクは、注釈の地の色に合わせた見た目になります。
 
 ````markdown
 ::: note info 中で使えるもの
 - 箇条書き
-- 番号付きリスト
-- インラインコードや**強調**などの文字装飾
+- `go test -run TestFoo` のようなインラインコード
+- [リンク](https://go.dev/doc/)や**強調**などの文字装飾
+
+1. 番号付きリスト
+2. 2つ目の項目
 
 ```go
 fmt.Println("コードブロックも書けます")
@@ -298,8 +301,11 @@ fmt.Println("コードブロックも書けます")
 ::: note info 中で使えるもの
 
 - 箇条書き
-- 番号付きリスト
-- インラインコードや**強調**などの文字装飾
+- `go test -run TestFoo` のようなインラインコード
+- [リンク](https://go.dev/doc/)や**強調**などの文字装飾
+
+1. 番号付きリスト
+2. 2つ目の項目
 
 ```go
 fmt.Println("コードブロックも書けます")