diff --git a/CLAUDE.md b/CLAUDE.md index 7501ed9d6dc..3700b112f7b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -194,6 +194,14 @@ lede: "Go 1.27 で標準ライブラリに追加されたuuidパッケージを `/categories/` の「累計 327本」はチップにしていたが、#2405 の根拠 (タグチップは塗り、こちらは枠だけ、で性質の違いを示す)は #2990 で タグチップも地をやめた時点で消えている。**素の文字**(`ink-mute` × `text-meta`)で置く + - **「分類の名前で、押せない」ラベルは `.category-group-label` 1つ**(#3226)。 + ヘッダーのドロップダウンの群(`開発` `基盤`)と `/tags/` の親子の木の実在しない + ノード(AI・DB・OS…11件)が同じクラスを当てる。押せる名前(本文の段・太字・ + `ink-strong`)と同じ列に並ぶので色だけでは分かれず(差 1.62:1、axe + `link-in-text-block`)、**大きさ(`text-meta`)・太さ(400)・色(`ink-mute`)の3つ**で + 分ける。静止の下線は本文だけの規則(#2926)なので使わない。 + **枠を持つのはドロップダウンだけ**(縦罫を引く場所が無い)。木は枝の縦罫が + 範囲を示すので枠は足さない——「群を表す手はその場所で1つ」 - **著者数は出さない。** ここで選ぶのは行き先のカテゴリで、何人が書いたかは その判断に効かない。数字はカテゴリページのサイドバーが持つ - **タグのチップは枠の左端をそろえる**(`ul.tag-list` の `margin-left: -4px`。 diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index 2606bbe556c..c6f6505223d 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -665,9 +665,12 @@ Header and header elements font-weight: 700; color: var(--ink-mute); } -/* カテゴリの群の名前 (#2908)。素の文字で、行き先である行より弱く置く - (添えの段。太字にもしない)。**群を表す手はその場所で1つだけ持つ。** - サイドバーは下の縦罫が範囲を示すので、ラベル自身は印を持たない */ +/* 群の名前 (#2908)。「分類の名前で、押せない」ものの形で、ヘッダーのカテゴリの群と + /tags/ の親子の木の実在しないノード(AI・DB・OS…#3226)が同じ形を使う。 + 素の文字で、行き先である行より弱く置く(添えの段。太字にもしない)。 + 押せる名前(本文の段・太字・ink-strong)とは大きさ・太さ・色の3つで分かれる。 + **群を表す手はその場所で1つだけ持つ。** サイドバーと木は縦罫が範囲を示すので、 + ラベル自身は印を持たない */ .category-group-label { display: block; margin: 0 0 space-step; @@ -3690,15 +3693,20 @@ ul.tag-list { break-inside: avoid; margin-bottom: (space-step * 6); } -/* 群の名前。根がタグとして実在すれば行き先になる(面を持たないので反応は下線 +/* 群の名前。根はタグとして実在する行き先(面を持たないので反応は下線 #3162。/categories/ の .category-index-name と同じ型)。実在しないノード - (AI・DB・OS…)は素の文字で、そのぶん薄い段に落ちる */ + (AI・DB・OS…)はこのラベルではなく、ヘッダーのカテゴリの群と同じ + .category-group-label で描く (#3226)。押せる名前と押せない名前が + 色だけで分かれると、押してみるまで区別が付かない(差 1.62:1) */ .tag-forest-label { margin: 0 0 (space-step * 2); font-size: text-body; line-height: leading-row; font-weight: bold; - color: var(--ink-mute); +} +/* 木の中の押せないラベルも、押せる根の名前と同じ 8px で枝から離す */ +.tag-forest .category-group-label { + margin-bottom: (space-step * 2); } .tag-forest-label a { color: var(--ink-strong); diff --git a/themes/future/layout/tags.ejs b/themes/future/layout/tags.ejs index 27f68901434..ec15e058504 100644 --- a/themes/future/layout/tags.ejs +++ b/themes/future/layout/tags.ejs @@ -64,9 +64,11 @@ このページ1枚でしか使わないので partial にはしない %> <% // 子を持たない子はチップ、持つ子は自分のラベルを立てて中を字下げする。 - // 名前とチップの markup は根と同じなので、深さだけ変えて再帰で描く + // 名前とチップの markup は根と同じなので、深さだけ変えて再帰で描く。 + // タグとして実在しないノード(AI・DB・OS…)は押せないので、ヘッダーの + // カテゴリの群と同じ枠付きのラベルで描く (#3226) function renderTagGroup(n, depth) { %> -

<% if (n.path) { %><%= n.name %><%= n.posts %><% } else { %><%= n.name %><% } %>

+ <% if (n.path) { %>

<%= n.name %><%= n.posts %>

<% } else { %>

<%= n.name %>

<% } %>
<% if (n.chips.length) { %>
<%- partial('_partial/tag-chips', {items: n.chips}) %>