diff --git a/assets/css/site.css b/assets/css/site.css index e8e9744..c0b2615 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -125,30 +125,53 @@ margin: 0; } -/* 正文二级标题:左侧蓝条 + 浅灰底,横向铺满(负 margin 吃掉正文的 16px 内距) */ +/* 正文二级标题:左侧蓝条 + 浅灰底,横向铺满(负 margin 吃掉正文的 16px 内距) + * + * 3.2.61(工单 #29 追加):字号 20→24、字重 500→700。 + * 🔴 这是 3.2.60 留下的层级倒挂的修复:3.2.60 把 h3 提到 20px/600, + * 而 h2 一直是 20px/500 —— 结果 h2 和 h3 同字号、h3 还更粗 100, + * 三级标题比二级标题更抢眼。用户一眼就看出"h3 比 h2 还大"。 + * 根因是当时只动了 h3,没把 h2 一起拉起来,而且判据里 + * **没有任何一条断言 h2 > h3**,所以 52 条全绿也照样漏了。 + * ⇒ 往后调任一标题级别,必须同时断言相邻两级的**字号 + 字重** + * 都单调递减(见 _geom361_route.js 的 G 组)。 + * + * 行高 41→46:24px 字配 41px 行高,上下各只剩 8.5px,灰底看着发扁; + * 46px 让上下各留 11px。这个 11px 是**算出来的**: + * 24px 字的实际墨迹高约 24×0.88 ≈ 21px(中文黑体 ascent+descent 之内), + * 行框 46px 减 21px 再除以 2 ≈ 12.5px,与 3.2.60 的 20px/41px + * (20×0.88=17.6,41-17.6=23.4,/2≈11.7px)基本持平。 */ .k-main .details .article .content h2 { margin: 16px -16px; padding: 0 10px; border-left: 5px solid #00a2ff; background-color: rgba(243, 243, 243, 0.7); - font-size: 20px; - line-height: 41px; + font-size: 24px; + font-weight: 700; + line-height: 46px; } /* ── 正文三级标题:左侧细竖线 + 底部细线(3.2.60 / 工单 #29) * - * 改之前 h3 只有 `font-size:18px; font-weight:500`,没有任何装饰, + * 3.2.60 之前 h3 只有 `font-size:18px; font-weight:500`,没有任何装饰, * 而正文是 16px/350 —— **只差 2px 字号、150 字重**,放在长文里根本分不出来。 - * 对比之下 h2 有蓝条+灰底,越显得 h3 就是"一段稍微粗一点的字"。 * - * 层级梯度(改后): - * h2 20px / 500 / 左 5px 蓝条 + 浅灰底 ← 最重,分节 + * 层级梯度(3.2.61 定稿,三级 + 四级同步调整): + * h2 24px / 700 / 左 5px 蓝条 + 浅灰底 ← 最重,分节 * h3 20px / 600 / 左 3px 蓝条 + 底 1px 细线,无底色 - * h4 17px / 600 / 纯加粗 + * h4 17px / 500 / 纯文字,无装饰 * p 16px / 350 * + * 🔴 两条铁律(3.2.60 违反第 1 条,导致 h3 比 h2 还抢眼): + * ① 字号与字重**同时**严格递减:24>20>17>16、700>600>500>350; + * ② 装饰强度也递减:蓝条+灰底 > 蓝条+细线 > 无 > 无。 + * 任一级调了,必须回头核对相邻两级的下行关系,别只盯自己那一级。 + * * 为什么 h3 竖线用 3px 而不是 h2 的 5px:同族但更轻,一眼能看出次一级。 * 为什么 h3 不加底色:h2 已经有灰底,h3 再铺一层整篇会碎成一块块。 + * 为什么 h4 用 500 而不是 600:600 与 h3 同字重,就只剩字号 3px 的差别, + * 视觉上"像同一个级别被缩了一点"。降到 500 后,字重也参与分层。 + * 500 仍然明显重于正文的 350(差 150),不会糊回正文里去。 * * ⚠️ 特异性必须是 (0,4,1) 起步、并把字号/字重一起写死: * kratos 的 `.k-main .details .article .content h3` 是 (0,4,1), @@ -165,15 +188,18 @@ line-height: 32px; } -/* ── 正文四级标题:17px / 600(工单 #29) +/* ── 正文四级标题:17px / 500(3.2.61 定稿) * - * h3 涨到 20px 后,h4 若还是 16px 会跟正文挤在一起、层级断层, - * 所以同步上调到 17px 并加重字重。不加任何装饰 —— 到第四级 - * 再加线就会满屏都是线。 */ + * 字号 17px 保持不动(h3 20px 之下、正文 16px 之上的唯一合理档位, + * 再往下压到 16px 就与正文同大、层级直接断层)。 + * 字重 600 → 500:600 与 h3 完全同重,等于只有 3px 字号差, + * 看着像"同一级被缩小",不像下一级。降到 500 让字重也参与分层。 + * + * 不加任何装饰 —— 到第四级再加线就满屏都是线了。 */ .k-main .details .article .content h4 { margin: 20px 0 12px; font-size: 17px; - font-weight: 600; + font-weight: 500; line-height: 30px; } diff --git a/style.css b/style.css index e9ec8c2..281024a 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.60 +Version: 3.2.61 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好