wordpress-kratos-yang/assets/css/site.css

@charset "UTF-8";
/**
 * 站点级公共样式（3.2.29 起）
 *
 * 这些规则原来是站长手填在「主题设置 → 自定义代码 → 自定义 CSS」里的，
 * 3.2.29 把它们并入主题公共样式，配置项因此留空。
 *
 * ⚠️ 选择器与声明**必须与原来的自定义 CSS 逐字一致**：
 *    自定义 CSS 是以 `<style>` 形式紧跟在 kratos.min.css 之后输出的，
 *    所以「排在最后 + 同选择器」才等价于原来的层叠结果。
 *    本文件的加载顺序同样是 kratos.min.css 之后（enqueue 依赖 'kratos'），
 *    改选择器范围（例如把 ul 收窄到 .article .content ul）会改变实际渲染。
 *
 * @author Yongquan Yang <yangyq.net>
 * @license MIT License
 */

/* 正文段落首行缩进两字 */
.article .content p {
  text-indent: 2em;
}

/* ── 正文插图：不吃段落的首行缩进，自成一行、左右都不缩进（3.2.60 / 工单 #28）
 *
 * 🔴 为什么必须有这一段：`text-indent` 是**可继承属性**。
 *
 *    WP 把图片插进段落时，DOM 是 `<p><img></p>` 或 `<p><a><img></a></p>`。
 *    图片（或包着它的 <a>）作为**行内级盒子**落在段落首行
 *    ⇒ 继承 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 会把图片包进 `<a class="yang-lb-item">`（灯箱），
 *      而 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`：图片外面常套一层
 *    `<a class="yang-lb-item">`（灯箱），直接子元素选择器量不到。
 *
 * ⚠️ 对齐类图片用 `: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;
  padding: 0 10px;
  border-left: 5px solid #00a2ff;
  background-color: rgba(243, 243, 243, 0.7);
  font-size: 20px;
  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;
}

/* 🔴 归档页的年份标题也是 `<h3 class="ar-year">`，而且它就在
 * `.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;
}

ol {
  margin-left: 2em;
}

ol > li {
  line-height: 1.8;
}

ul > li {
  line-height: 1.8;
}