diff --git a/CLAUDE.md b/CLAUDE.md index b4903221195..08a4b3e5463 100644 --- a/CLAUDE.md +++ b/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,9 +1760,13 @@ 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 更新` に戻す** @@ -1725,7 +1774,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する 技術記事を兼ねている連載がある）。それでも借りるのは、**連載の説明文を 別に持つとフロントマターに新しいキーが増え、書き手が2箇所を書くことになる**ため - **「◯◯一覧へ」は種別ごとの導線なので、置ける場所が中身で変わる**（#2892）。 - 2枚とも特設の回は行き先が1つなので**節の下**にまとめて置く。連載と特設が混ざる回は + どの枚も特設の回は行き先が1つなので**節の下**にまとめて置く。連載と特設が混ざる回は 行き先が2つになるので、**それぞれのパネルの中**に入れる。節の下に「特設ページ一覧へ」 だけを置くと、隣に連載が並んでいるときに枠全体の導線に見えて嘘になる - **記事末の自動生成ブロックは全幅の帯で切る**（#2874）。関連記事・被参照・We're hiring は diff --git a/source/specials/markdown/index.md b/source/specials/markdown/index.md index 8ae5b240586..9967677b5ae 100644 --- a/source/specials/markdown/index.md +++ b/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("コードブロックも書けます") diff --git a/source/specials/styleguide/index.md b/source/specials/styleguide/index.md index f28050f8d91..16d943b14fa 100644 --- a/source/specials/styleguide/index.md +++ b/source/specials/styleguide/index.md @@ -55,15 +55,22 @@ editable: true リンクは**背景が濃くなるぶん暗い側へ振った段階**を持ちます。`link-blue` は白背景で AA を満たしますが、インラインコードの背景や note の色の付いた背景に乗ると下回るため、同系色のまま暗くした値に替えます。訪問済みは紫で、こちらは白背景でもコードの背景でも足ります。 -比を取る背景が3種類あるので、下の表は**それぞれの背景に対する比**です。note は4色あるので、そのうち**いちばん厳しい背景との比**を載せています（AA を満たすかはそこで決まります）。 +**note の中だけは、色相もその背景から借ります。** 注釈は4種類それぞれが色を持っているので、その中の青いリンクは箱の中で唯一の外来色になります。リンクであることは下線が示しているので、色は「その注釈のものである」ことだけを担えます。tip の背景は無彩色に近いため、色相を保つと青になります。 + +**訪問済みは4色に割らず紫のままです。** 紫はサイト全体で訪問済みを意味していて、未訪問とは色相で分かれます。種別ごとに割ると未訪問と同じ色相の明るさ違いになり、読んだかどうかが分からなくなります。 + +比を取る背景が3種類あるので、下の表は**それぞれの背景に対する比**です。note の行は、その注釈の背景と、その中のインラインコードの背景の**厳しい方との比**を載せています（AA を満たすかはそこで決まります）。 | 見本 | 変数 | 値 | 背景 | 背景との比 | 使うところ | | --- | --- | --- | --- | --- | --- | | | `link-blue` | | 白 | | 読み物の中のリンク（`--a-color`） | | | `link-visited` | | 白 | | 訪問済み。インラインコードの中でも同じ値 | | | `link-on-tint` | | インラインコードの背景 | | インラインコードの中のリンク | -| | `link-on-note` | | note の4色 | | note の中のリンク | -| | `link-on-note-visited` | | note の4色 | | note の中の訪問済み | +| | `link-on-note-tip` | | tip の背景 | | tip の中のリンク | +| | `link-on-note-info` | | info の背景 | | info の中のリンク | +| | `link-on-note-warn` | | warn の背景 | | warn の中のリンク | +| | `link-on-note-alert` | | alert の背景 | | alert の中のリンク | +| | `link-on-note-visited` | | note の4色 | | note の中の訪問済み。4種類に共通 | **青は読み物の中のリンクの色です。** レイアウトの導線（「連載一覧へ」のような全件への行き先、パンくず、日付、著者名）には青を使わず、文字のスケールの `ink-mute` に置いて、反応で `ink-strong` に1段階濃くします。同じページで本文のリンクと導線が同じ青だと、どちらが読み物の続きなのかが見分けられません。 @@ -146,12 +153,14 @@ editable: true 背景が3種類あるので、明るいほうと同じく分けて測ります。 +**note の中の色相をそろえるのは明るいほうだけです。** 暗い背景ではリンクを明るくするしかなく、色相を保ったまま鮮やかさを残すと、その注釈の中のインラインコードの背景に乗ったときに読めなくなります。逆に AA を取ると本文とほとんど同じ明るさの淡い色か、蛍光色のどちらかになります。ここでも、同じ手を移すのではなくその役割から決めます。 + | 見本 | 変数 | 値 | 比 | 背景 | | --- | --- | --- | --- | --- | | | `link-blue` | | | ページの背景 | | | `link-visited` | | | ページの背景（訪問済み） | | | `link-on-tint` | | | インラインコードの背景 | -| | `link-on-note` | | | note の4色（いちばん厳しい背景） | +| | `link-on-note` | | | note の4色（いちばん厳しい背景）。暗い側は種別で分けず1色 | | | `link-on-note-visited` | | | note の4色（訪問済み） | #### 背景に色が付いた面 @@ -354,7 +363,7 @@ editable: true ### 影は持たない -影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 記事へ送るカードは囲みを持たず、1件のまとまりは**外の空きが中の空きより十分大きいこと**が作ります。[連載一覧](/series/)や特設ページのパネルは、隣の列との間が 48px で、サムネイルと文字の間（12px）の4倍です。枠線を持つのは**強調のために枚数を絞った枠**（[トップページ](/)の「特集」）と、リンクプレビューだけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。 +影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 記事へ送るカードは囲みを持たず、1件のまとまりは**外の空きが中の空きより十分大きいこと**が作ります。[連載一覧](/series/)や特設ページのパネルは、隣の列との間が 48px で、サムネイルと文字の間（12px）の4倍です。[トップページ](/)の「特集」は、隣の枠との区別をサムネイルを上に載せる向きが付けます。枠線を持つのはリンクプレビューだけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。 ### hover は1部品1反応 @@ -462,22 +471,22 @@ editable: true ### note -4色あり、背景は色相を持ちます。中のインラインコードの背景は、その背景より1段階濃い同じ色になります。4色でも表のヘッダでも同じ規則が効きます。書き方は[記法ガイド](/specials/markdown/)にあります。 +4色あり、背景は色相を持ちます。中のインラインコードの背景は、その背景より1段階濃い同じ色になります。4色でも表のヘッダでも同じ規則が効きます。**リンクも色相を背景から借ります**が、訪問済みだけは4色に共通の紫です。書き方は[記法ガイド](/specials/markdown/)にあります。 ::: note tip -`tip` の背景です。知っておくと得をすることに使います。 +`tip` の背景です。知っておくと得をすることに使います。中のリンクは[部品ギャラリー](/specials/gallery/)のように、背景の色相を借りた青になります。 ::: ::: note info -`info` の背景です。読み進めるうえで知っておいてほしいことに使います。 +`info` の背景です。読み進めるうえで知っておいてほしいことに使います。[記事一覧](/articles/)のような行き先を添えられます。 ::: ::: note warn -`warn` の背景です。気をつけないと困ることに使います。 +`warn` の背景です。気をつけないと困ることに使います。[`categories`](/categories/) のようにリンクがインラインコードを含むときも、同じ色になります。 ::: ::: note alert -`alert` の背景です。踏むと壊れることに使います。 +`alert` の背景です。踏むと壊れることに使います。一度開いた[タグ一覧](/tags/)のような行き先は、4色に共通の紫に変わります。 ::: ### 表 diff --git a/themes/future/css-src/_variables.styl b/themes/future/css-src/_variables.styl index dc5f1dd7c8b..9eb719229c6 100644 --- a/themes/future/css-src/_variables.styl +++ b/themes/future/css-src/_variables.styl @@ -40,7 +40,7 @@ surface-mute = #eee // Stylus が識別子のまま出力して枠が消える table-border = rule-strong // hover / focus の面と、空・無効の面・インラインコードの地 -// リンクの色は4値・3状態（通常 / 訪問済み / 濃い地の上）。 +// リンクの色は7値・3状態（通常 / 訪問済み / 濃い地の上）。 // 地が濃くなるぶん暗い側へ振った値を持つ。link-blue は白地で AA を満たすが、 // インラインコードの地（surface-mute）や note の色地の上では下回るため、 // 同系色のまま暗くした段を置く。**比はスタイルガイドが計算で出す**ので、 @@ -48,8 +48,23 @@ table-border = rule-strong // hover / focus の面と、空・無効の面・ link-blue = #0072E5 // 通常。白地の上 link-visited = #590fc7 // 訪問済み。白地・コードの地の両方で足りる link-on-tint = #0a58ca // インラインコードの地の上 -link-on-note = #084298 // note の色地の上 -link-on-note-visited = #4a0ba6 // note の色地の上の訪問済み + +// note の中は種別ごとに地の色相を借りる (#3241)。**色相を変えられるのは +// #2926 で地の文のリンクが常時下線を持つようになったから**で、リンクである +// ことは下線が名乗る。色は「その note のものである」ことだけを担う。 +// 値は「地の色相を保ち、その note の地と、その中のインラインコードの地 +// （code-bg）の両方で 4.6 を満たす、いちばん明るい色」。**AA の 4.5 ちょうどでは +// 取らない**——コードの地は code-bg() の計算結果なので、地を動かすと丸めの幅で +// 割る。余裕は ink-faint（4.61）と同じ。 +// tip の地は無彩色に近い（彩度 14%）ので、色相を保つと青になる +link-on-note-tip = #2D58D7 +link-on-note-info = #257718 +link-on-note-warn = #7B6D18 +link-on-note-alert = #AC1B1B +// **訪問済みは4色に割らず紫のまま。** 紫はサイト全体で訪問済みの意味を持ち、 +// 未訪問と色相で分かれる。種別ごとに割ると同じ色相の明度違いになり、 +// 未訪問と見分けが付かなくなる（#2926 の「訪問済みは色相でしか見分けられない」） +link-on-note-visited = #4a0ba6 // コーポレートのブランド色（FA Concept Book 2025 の実測値）。 // ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、 @@ -188,8 +203,12 @@ dark-rule-strong = #4d4d59 dark-link-blue = #7cb8ff dark-link-visited = #c8a8ff dark-link-on-tint = #8ec2ff -// note の地の上。白地では地が明るいぶん濃い青（#084298）だったが、暗い側では -// 1.36 しか出ない。4色のうちいちばん厳しい地で 6.85 / 6.36 を満たす値にする +// note の地の上。明るい側は種別ごとに地の色相を借りるが (#3241)、 +// **暗い側は1色のまま。** 暗い地ではリンクを明るくするしかなく、色相を保って +// 彩度を残すとその note のインラインコードの地で 2.5 まで落ち、AA を取ると +// 本文（dark-ink-strong）との比が 1.25 のほぼ白か、彩度 100% のネオンになる。 +// **同じ強さを移すのではなく、その部品が担う役から決める** (#2746)。 +// 4色のうちいちばん厳しい地で 6.85 / 6.36 を満たす値 dark-link-on-note = #8ec2ff dark-link-on-note-visited = #c8a8ff diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index 6420073b0eb..b10bb44c44a 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -77,7 +77,11 @@ --note-info-code: code-bg(note-info-bg); --note-warn-code: code-bg(note-warn-bg); --note-alert-code: code-bg(note-alert-bg); - --link-on-note: link-on-note; + // note の中のリンクは種別ごとに地の色相を借りる (#3241) + --link-on-note-tip: link-on-note-tip; + --link-on-note-info: link-on-note-info; + --link-on-note-warn: link-on-note-warn; + --link-on-note-alert: link-on-note-alert; --link-on-note-visited: link-on-note-visited; } @@ -104,7 +108,12 @@ dark-tokens() --link-blue: dark-link-blue; --link-visited: dark-link-visited; --link-on-tint: dark-link-on-tint; - --link-on-note: dark-link-on-note; + // 暗い側は種別で割らず4つとも同じ値。暗い地では色相をそろえる余地が無い + // （_variables.styl の dark-link-on-note のコメント） + --link-on-note-tip: dark-link-on-note; + --link-on-note-info: dark-link-on-note; + --link-on-note-warn: dark-link-on-note; + --link-on-note-alert: dark-link-on-note; --link-on-note-visited: dark-link-on-note-visited; // 表彰の淡金。カードだけ明るいまま残すと中の文字が沈むので、カードごと暗くする @@ -2283,26 +2292,36 @@ body { --bs-gutter-x: 48px; --bs-gutter-y: 24px; } -/* 強調のために枚数を絞った枠だけが囲みを持つ (#3152)。いまはトップの「特集」 - （旬で2枚 #2892）だけ。枠は「カード・箱を囲む線」なので rule-weak（区切りの線） - ではなく rule-base。 - 高さをそろえるのもここ。囲みがあると2枚の下辺のズレが線として見える。 +/* ホームの「特集」（旬で3枚 #2892）はサムネを上に全幅で置く (#3241)。器は一覧カードの + 頭と同じ（幅100%・1200/630 #2790）。 - **列の間は 24px に戻す。** 切れ目は枠が作っているので、間隔で作り直す必要が無い */ -.series-panels-boxed.row, -.series-panels-boxed > .row { - --bs-gutter-x: 24px; - --bs-gutter-y: 24px; -} -.series-panels-boxed .article-card { - /* 「特集」のパネルは本文が4行（ラベル・タイトル・メタ・導線）で 91px あり、 - 88×59 のサムネの 1.5 倍の高さになる。12px では文字の塊がサムネに寄って見える - ので一段広げた (#2892) */ - gap: 16px; - padding: 18px; - height: 100%; - border: 1px solid var(--rule-base); - border-radius: card-radius; + **隣の枠（新着一覧）との区別は絵の大きさではなく向きが付ける。** 新着の1件は + 576px 以上では［サムネ｜文字］の横帯なので、縦積みは「特集」だけの形になる。 + 3列に割るぶん絵は新着のサムネより一回り小さい（どの幅でも幅の 91% 前後）。 + + 縦のガターも 48px。縦積みでは縦の隣も「上の文字 ↔ 下のサムネ」で、 + 挟まる中の空き（12px）が横と同じになる。 + + **767px 以下は従来の横帯（88×59）に戻す。** 1列で全幅の絵を積むと1枚が + 375px の画面で 197px の絵を持ち、3枚で画面2つぶんになって下の新着一覧まで届かない */ +@media (min-width: 768px) { + .series-panels-stacked.row, + .series-panels-stacked > .row { + --bs-gutter-y: 48px; + } + .series-panels-stacked .article-card { + flex-direction: column; + align-items: stretch; + } + .series-panels-stacked .panel-thumb { + flex: none; + } + .series-panels-stacked .panel-thumb img, + .series-panels-stacked .panel-thumb-empty { + width: 100%; + height: auto; + aspect-ratio: unquote('1200 / 630'); + } } /* パネルは題だけがリンクで、説明文・名札・余白は押せなかった (#3189)。 一覧の1件は題と説明文が同じ の中にあるが、パネルの説明は HTTF のように @@ -6120,14 +6139,29 @@ pre.mermaid, background-color: var(--note-alert-code); } -/* note の中のリンクは一段暗い青にする。地を濃くした分、本文色（ink-strong）は - 4色すべてで余裕があるが、link-blue は alert の上で AA を割る。 - 参考サイトも枠の中のリンク色を枠ごとに変えている。 - 比はスタイルガイド（/specials/styleguide/）が note の4色すべてに対して - 計算で出すので、ここには書かない */ -.article-entry .note-container a, -.article-entry .note-container a code { - color: var(--link-on-note); +/* note の中のリンクは、その note の地の色相を借りる (#3241)。地を濃くした分 + link-blue は alert の上で AA を割るので、いずれにせよ白地の値は使えない。 + 色相まで振れるのは #2926 で地の文のリンクが常時下線を持つようになったからで、 + リンクであることは下線が名乗る。 + 比はスタイルガイド（/specials/styleguide/）が種別ごとに計算で出す。 + + **訪問済みは4色に割らず紫のまま。** 順序が効く——`:visited` の側は + `.note-tip` を持たないぶん詳細度が同じ (0,3,1) なので、後ろに置いて勝たせる */ +.article-entry .note-container.note-tip a, +.article-entry .note-container.note-tip a code { + color: var(--link-on-note-tip); +} +.article-entry .note-container.note-info a, +.article-entry .note-container.note-info a code { + color: var(--link-on-note-info); +} +.article-entry .note-container.note-warn a, +.article-entry .note-container.note-warn a code { + color: var(--link-on-note-warn); +} +.article-entry .note-container.note-alert a, +.article-entry .note-container.note-alert a code { + color: var(--link-on-note-alert); } .article-entry .note-container a:visited, .article-entry .note-container a:visited code { @@ -6401,11 +6435,29 @@ sg-link-on-white = { sg-link-on-tint = { 'link-on-tint': link-on-tint, } -sg-link-on-note = { - 'link-on-note': link-on-note, +// note の中のリンクは種別ごとに色が違うので、それぞれ自分の地で測る (#3241)。 +// 地は2つ（note の地と、その中のインラインコードの地）あるので厳しい方を出す。 +// 訪問済みは4色に共通なので8つの地の最小 +sg-link-on-note-tip = { + 'link-on-note-tip': link-on-note-tip, +} +sg-link-on-note-info = { + 'link-on-note-info': link-on-note-info, +} +sg-link-on-note-warn = { + 'link-on-note-warn': link-on-note-warn, +} +sg-link-on-note-alert = { + 'link-on-note-alert': link-on-note-alert, +} +sg-link-on-note-visited = { 'link-on-note-visited': link-on-note-visited, } -sg-note-grounds = note-tip-bg note-info-bg note-warn-bg note-alert-bg +sg-note-tip-grounds = note-tip-bg code-bg(note-tip-bg) +sg-note-info-grounds = note-info-bg code-bg(note-info-bg) +sg-note-warn-grounds = note-warn-bg code-bg(note-warn-bg) +sg-note-alert-grounds = note-alert-bg code-bg(note-alert-bg) +sg-note-grounds = note-tip-bg note-info-bg note-warn-bg note-alert-bg code-bg(note-tip-bg) code-bg(note-info-bg) code-bg(note-warn-bg) code-bg(note-alert-bg) // ダークモードの段 (#3012)。値は明るい側と別物なので、同じ表に混ぜず別の節で出す。 // 比の地は dark-surface-base（ページの地）。明るい側が白地で測っているのと同じ関係 @@ -6455,12 +6507,20 @@ sg-swatches(sg-on-navy) sg-swatches(sg-no-ratio) sg-swatches(sg-link-on-white) sg-swatches(sg-link-on-tint) -sg-swatches(sg-link-on-note) +sg-swatches(sg-link-on-note-tip) +sg-swatches(sg-link-on-note-info) +sg-swatches(sg-link-on-note-warn) +sg-swatches(sg-link-on-note-alert) +sg-swatches(sg-link-on-note-visited) sg-ratios(sg-on-white, #fff) sg-ratios(sg-on-navy, brand-navy) sg-ratios(sg-link-on-white, #fff) sg-ratios(sg-link-on-tint, surface-mute) -sg-ratios-min(sg-link-on-note, sg-note-grounds) +sg-ratios-min(sg-link-on-note-tip, sg-note-tip-grounds) +sg-ratios-min(sg-link-on-note-info, sg-note-info-grounds) +sg-ratios-min(sg-link-on-note-warn, sg-note-warn-grounds) +sg-ratios-min(sg-link-on-note-alert, sg-note-alert-grounds) +sg-ratios-min(sg-link-on-note-visited, sg-note-grounds) sg-swatches(sg-dark) sg-swatches(sg-dark-link) @@ -6520,9 +6580,26 @@ sg-ratios(sg-dark-award, dark-surface-base) .sg-chip-note { background: note-alert-bg; } +/* note の中のリンクは種別ごとに色が違うので、見本もそれぞれの地の上に置く (#3241) */ +.sg-chip-note-tip { + background: note-tip-bg; +} +.sg-chip-note-info { + background: note-info-bg; +} +.sg-chip-note-warn { + background: note-warn-bg; +} +.sg-chip-note-alert { + background: note-alert-bg; +} /* 明るい地の上では枠を戻す。上の rule-on-dark は白の半透明なので見えない */ .sg-chip-tint .sg-chip, -.sg-chip-note .sg-chip { +.sg-chip-note .sg-chip, +.sg-chip-note-tip .sg-chip, +.sg-chip-note-info .sg-chip, +.sg-chip-note-warn .sg-chip, +.sg-chip-note-alert .sg-chip { border-color: var(--rule-base); } diff --git a/themes/future/layout/_partial/archive.ejs b/themes/future/layout/_partial/archive.ejs index 9480d59d045..d79da1422ed 100644 --- a/themes/future/layout/_partial/archive.ejs +++ b/themes/future/layout/_partial/archive.ejs @@ -27,14 +27,14 @@ <%# はじめて来た読者は記事の探し方が分からない。ランキングと新着の間に まとまった読み物への入口を置く (#2039)。 カテゴリ・タグ・連載という「探す軸」はサイドバーが持つ (#2885 / #2892)。 - ここに出すのは軸ではなく、いま動いているもの2枚 %> + ここに出すのは軸ではなく、いま動いているもの3枚 %> <% if (isHomeFirst) { %> <%# 特設ページへの入口 (#2295 / #2421)。テキスト1行では視線が滑るため パネルにする (#2343)。外部サイトへ直接飛ばさず、サイト内のポータルを 紹介する（説明と外部サイトへの分岐はポータル側が担う）。 - 全件は /specials/ が持つので、ここに並べるのは2枚まで。 + 全件は /specials/ が持つので、ここに並べるのは3枚まで。 残りは下の全件導線から辿る %> - <%# 並べる2枚は旬で決める (#2880)。季節もの（アドベントカレンダー・Tech Cast・HTTF）が + <%# 並べる3枚は旬で決める (#2880)。季節もの（アドベントカレンダー・Tech Cast・HTTF）が 前に入り、いつでも出せる連載とガイドラインが後ろから落ちる。 季節ものの間はシーズンの長さの順で、常設のうち連載を先に置くのは 旬のものが1枚も無い期間を無くすため (#2892)。 @@ -116,24 +116,25 @@ }); %> <%# 「◯◯一覧へ」は種別ごとの導線なので、置ける場所が中身で変わる (#2892)。 - 2枚の種別が揃っている回（特設2枚）は節の下にまとめて置ける。 + 種別が揃っている回（特設だけ）は節の下にまとめて置ける。 連載と特設が混ざる回は行き先が2つになるので、それぞれのパネルの中に入れる %> - <% const shownPanels = specialPanels.slice(0, 2); %> + <% const shownPanels = specialPanels.slice(0, 3); %> <% const sharedMore = new Set(shownPanels.map(function(p){ return p.more.url; })).size === 1 ? shownPanels[0].more : null; %> - <%# ここだけ囲みを持つ (#3152)。パネルの既定はフラットで、枠線は「強調のために - 枚数を絞った」ときの印。この枠は候補の中から旬の2枚を選んで出している (#2892) - ので、その条件に当たる。行き先の全件は /series/ ・ /specials/ が持ち、 - そちらはフラットな一覧になる %> -
+ <%# 囲みは持たない (#3241)。旬の3枚は 768px 以上でサムネを上に全幅で置き + （series-panels-stacked）、隣の枠との区別は縦積みという向きが付ける。 + 行き先の全件は /series/ ・ /specials/ が持つ %> +
<%# 連載の索引は記事なので「特設ページ」では名前が実態と合わない (#2892)。 連載も特設ページも「記事1本ではない、まとまった読み物への入口」なので特集で束ねる %> <%- partial('section-heading', {id: 'specials', text: '特集'}) %>
<% shownPanels.forEach(function(p){ %> -
- <%# 旬の2枚に専用の絵が無いときは空き枠。サムネの無い連載（/series/）と行頭を揃える。 - 全件導線は、2枚の行き先が同じならこの節の下にまとめる (#2892) %> + <%# 992px 以上で3列、768〜991px で2列、767px 以下は1列（このとき従来の横帯に戻る）。 + 幅の境目はサイトが既に持っている 768 / 992 をそのまま使う %> +
+ <%# 旬の3枚に専用の絵が無いときは空き枠。サムネの無い連載（/series/）と行頭を揃える。 + 全件導線は、3枚の行き先が同じならこの節の下にまとめる (#2892) %> <%- partial('panel-card', { url: p.url, title: p.title, diff --git a/themes/future/layout/_partial/panel-card.ejs b/themes/future/layout/_partial/panel-card.ejs index 8e8ca97bcf7..46da3c37ccb 100644 --- a/themes/future/layout/_partial/panel-card.ejs +++ b/themes/future/layout/_partial/panel-card.ejs @@ -1,11 +1,12 @@ <%# パネルカード1枚 (#2999)。ホームの「特集」・/specials/ の記事パネル・ /series/ の連載・HTTF の歴代コンテストが同じ形を持つ。 - **列は呼び出し側が持つ。** 2列（ホームの特集）と3列（それ以外）で違い、 - グリッドの都合はカードの都合ではない。ここが描くのはカード1枚だけ。 + **列は呼び出し側が持つ。** グリッドの都合はカードの都合ではない。 + ここが描くのはカード1枚だけ。 - **囲みも呼び出し側が持つ。** 既定はフラットで、強調のために枚数を絞った枠だけが - 包みに `series-panels-boxed` を足して枠線と高さそろえを持つ (#3152)。 + **向きも呼び出し側が持つ。** 既定は横並び（88×59 のサムネを左）。ホームの「特集」は + 包みに `series-panels-stacked` を足して、768px 以上でサムネを上に全幅で置く (#3241)。 + 囲みはどれも持たない。 引数: url 行き先（必須） diff --git a/themes/future/layout/gallery.ejs b/themes/future/layout/gallery.ejs index 1a937a850bf..0f1f8cce401 100644 --- a/themes/future/layout/gallery.ejs +++ b/themes/future/layout/gallery.ejs @@ -245,10 +245,10 @@ <%- partial('_partial/archive-post', {post: samplePost, index: false}) %>
- <%- galleryName('patterns', 'sample-panel-card', '強調したパネル') %> -

トップページの「特集」で、旬のものを2枚だけ選んで出すときの形です。枚数を絞って強調する枠なので、パネルの既定とは違って枠線を持ちます。サムネイルが無いときは同じ大きさの空き枠を置いて、題の頭をそろえます。種別の名札と、全件への行き先を添えられます。

-
-
+ <%- galleryName('patterns', 'sample-panel-card', '特集のパネル') %> +

トップページの「特集」で、旬のものを3枚だけ選んで出すときの形です。本文の幅を3列に分け、サムネイルを上に全幅で置きます。タブレットの幅では2列、モバイルの幅では1列に落ちて、サムネイルは左に添える横並びに戻ります。囲みは持たず、隣の枠との区別は縦積みという向きが付けます。サムネイルが無いときは同じ大きさの空き枠を置いて、題の頭をそろえます。種別の名札と、全件への行き先を添えられます。

+
+
<%- partial('_partial/panel-card', { url: url_for(samplePost.path), title: samplePost.title, @@ -258,7 +258,17 @@ more: {url: '/series/', text: '連載一覧へ'}, }) %>
-
+
+ <%- partial('_partial/panel-card', { + url: url_for(sampleSecondPost.path), + title: sampleSecondPost.title, + thumb: {src: sampleSecondPost.thumbnail, width: 200, height: 135}, + label: {icon: 'book', text: 'リソース'}, + meta: '種別の名札は連載・アクティビティ・リソースの3つです', + more: {url: '/specials/', text: '特設ページ一覧へ'}, + }) %> +
+
<%- partial('_partial/panel-card', { url: 'https://atcoder.jp/', title: 'サムネイルの無いカード（別のタブで開きます）',