diff --git a/assets/css/site.css b/assets/css/site.css
index 543934a..e8e9744 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -20,6 +20,111 @@
text-indent: 2em;
}
+/* ── 正文插图:不吃段落的首行缩进,自成一行、左右都不缩进(3.2.60 / 工单 #28)
+ *
+ * 🔴 为什么必须有这一段:`text-indent` 是**可继承属性**。
+ *
+ * WP 把图片插进段落时,DOM 是 `
![]()
` 或 `![]()
`。
+ * 图片(或包着它的 )作为**行内级盒子**落在段落首行
+ * ⇒ 继承 32px 缩进,整体右移。
+ * 而 `max-width: 100%` 里的 100% 是**包含块(p)的内容宽度**,
+ * 不是"缩进之后剩下的宽度" ⇒ 图片仍按全宽铺开。
+ *
+ * 结果:左边缩进多少,右边就溢出多少,**二者永远相等**。
+ * 线上实测(2022/05/set-font-in-latex):左缩进 32px、右溢出 32px,
+ * 正文可绘制区 111~902.33,图片却是 143~934.33。
+ *
+ * ── ⚠️ 只给 img 清零 text-indent 是**不够**的(第一版就这么错)────────
+ *
+ * 实测:`.article .content img{ text-indent:0; display:block }` 之后,
+ * 图片自己的 computed text-indent 确实是 0px、display 也是 block,
+ * 但几何仍停在 143(照样偏 32px)。
+ *
+ * CDP `CSS.getMatchedStylesForNode` 抓到的真相:
+ * WP 会把图片包进 ``(灯箱),
+ * 而 lightbox.css 给它设了 `display: inline-block`。
+ * **inline-block 盒子的起点同样受父级 text-indent 影响** ——
+ * 它继承了 p 的 32px,于是整个「链接 + 图片」盒子被推进去 32px。
+ * 图片在盒子内部再怎么清零,也改不了盒子自己的起点。
+ *
+ * ⇒ 缩进必须清在**真正参与父级行内排版的那个盒子**上,
+ * 也就是 a.yang-lb-item / 裸 img 两者都要清。
+ *
+ * 修法:
+ * ① `text-indent: 0` 切断继承(不改 p 上的规则本身 ——
+ * 段落首行缩进是站长期望的效果,去掉会改变全站观感);
+ * ② `display: block` 自成一行,不参与首行的行内排版;
+ * ③ 图片用 `margin: … auto` 居中。
+ *
+ * ⚠️ 只看 `.content img`(后代)而不是 `> img`:图片外面常套一层
+ * ``(灯箱),直接子元素选择器量不到。
+ *
+ * ⚠️ 对齐类图片用 `:where()` 把特异性降到 0,让 kratos 的
+ * `.alignright{float:right}` / `.aligncenter` 等**照常生效**:
+ * 浮动的图本来就不该吃缩进,也不该被强制成块级居中。
+ * `:where()` 是 CSS4,Chrome 88+ / Safari 14+ / Firefox 78+ 支持;
+ * 更老的浏览器会整条规则失效 —— 退化成"维持现状",不会更坏。 */
+.article .content img {
+ text-indent: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* 🔴 灯箱链接:必须一起清零。它是 inline-block,本身就是参与父级
+ * 行内排版的盒子 —— 只清 img 无论用,位置由它决定。
+ * 见上面实测说明。 */
+.article .content a.yang-lb-item {
+ text-indent: 0;
+ display: block;
+ line-height: 0;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* 表情图必须保持行内:正文里它是夹在文字中的小图,
+ * 变 block 会换行、把句子拆断。特异性 (0,2,1) 压过上面那条。 */
+.article .content img.wp-smiley,
+.article .content img.emoji {
+ display: inline;
+ margin: 0;
+ vertical-align: middle;
+ text-indent: 0;
+}
+
+/* 对齐类图片交还给 kratos 的浮动/居中语义(特异性 0,不参与竞争)。
+ * 连包裹它的灯箱链接一起处理 —— 否则链接是 block、图片却 float,
+ * 会空出一整行。 */
+:where(.article .content) img.alignright {
+ display: inline;
+ float: right;
+ margin: 0 0 8px 16px;
+}
+
+:where(.article .content) img.alignleft {
+ display: inline;
+ float: left;
+ margin: 0 16px 8px 0;
+}
+
+:where(.article .content) img.aligncenter {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+:where(.article .content) a.yang-lb-item:has(img.alignright) {
+ display: inline;
+ float: right;
+ margin: 0;
+}
+
+:where(.article .content) a.yang-lb-item:has(img.alignleft) {
+ display: inline;
+ float: left;
+ margin: 0;
+}
+
/* 正文二级标题:左侧蓝条 + 浅灰底,横向铺满(负 margin 吃掉正文的 16px 内距) */
.k-main .details .article .content h2 {
margin: 16px -16px;
@@ -30,6 +135,66 @@
line-height: 41px;
}
+/* ── 正文三级标题:左侧细竖线 + 底部细线(3.2.60 / 工单 #29)
+ *
+ * 改之前 h3 只有 `font-size:18px; font-weight:500`,没有任何装饰,
+ * 而正文是 16px/350 —— **只差 2px 字号、150 字重**,放在长文里根本分不出来。
+ * 对比之下 h2 有蓝条+灰底,越显得 h3 就是"一段稍微粗一点的字"。
+ *
+ * 层级梯度(改后):
+ * h2 20px / 500 / 左 5px 蓝条 + 浅灰底 ← 最重,分节
+ * h3 20px / 600 / 左 3px 蓝条 + 底 1px 细线,无底色
+ * h4 17px / 600 / 纯加粗
+ * p 16px / 350
+ *
+ * 为什么 h3 竖线用 3px 而不是 h2 的 5px:同族但更轻,一眼能看出次一级。
+ * 为什么 h3 不加底色:h2 已经有灰底,h3 再铺一层整篇会碎成一块块。
+ *
+ * ⚠️ 特异性必须是 (0,4,1) 起步、并把字号/字重一起写死:
+ * kratos 的 `.k-main .details .article .content h3` 是 (0,4,1),
+ * 只写 `.article .content h3`(0,2,1)会被它压掉 —— 这在本项目
+ * 踩过一次(archives.css 里 22px/700 写了两版都没生效,实际一直是 18px/500)。
+ * 所以这里与 h2 用同一套前缀,并且 font-size / font-weight 都显式声明。 */
+.k-main .details .article .content h3 {
+ margin: 24px 0 16px;
+ padding: 2px 0 2px 10px;
+ border-left: 3px solid #00a2ff;
+ border-bottom: 1px solid #eaedf2;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 32px;
+}
+
+/* ── 正文四级标题:17px / 600(工单 #29)
+ *
+ * h3 涨到 20px 后,h4 若还是 16px 会跟正文挤在一起、层级断层,
+ * 所以同步上调到 17px 并加重字重。不加任何装饰 —— 到第四级
+ * 再加线就会满屏都是线。 */
+.k-main .details .article .content h4 {
+ margin: 20px 0 12px;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 30px;
+}
+
+/* 🔴 归档页的年份标题也是 ``,而且它就在
+ * `.article .content` 里面([Archives] 是正文短代码)。
+ * 上面那条 h3 会命中它 —— 于是年份会多出一条左竖线和一条底细线,
+ * 而 archives.css 里 `.ar-head` 已经有自己的底边线,会变成**两条线**。
+ *
+ * 这不是"顺手加个补丁",是必须的:archives.css 的 `.ar-year`
+ * 靠 (0,5,0) 才压过 kratos,本文件若也用 (0,5,0) 且排在它后面,
+ * 谁赢就变成"看入队顺序",非常脆。
+ *
+ * 这里主动让路:把 ar-year 的装饰清零,尺寸仍交给 archives.css 管
+ * (它写 26px/700,本规则不碰字号,避免两边抢)。 */
+.k-main .details .article .content h3.ar-year {
+ padding: 0;
+ border-left: 0;
+ border-bottom: 0;
+ margin: 0;
+}
+
/* 列表缩进与行距 */
ul {
margin-left: 2em;
diff --git a/style.css b/style.css
index 32779a9..e9ec8c2 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
/*
Theme Name: Kratos_Yang
Text Domain: kratos_Yang
-Version: 3.2.59
+Version: 3.2.60
Requires PHP: 7.0
Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。
Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好