/* ============================================================ dreams.css — /fortune/dreams/ 这一页自己的样式 ------------------------------------------------------------ 只为一件事存在：梦象对照表在公用骨架下被拉成 2,372px。 .sys 是 depth.css 里的公用表骨架，/fortune/systems/ 也在用它， 而那一页的读数列本来就该 nowrap —— 改 depth.css 会误伤那一页， 所以这张表的修法收在这个只有本页加载的文件里。 ============================================================ */ /* ---- 根因：给读数列写的 nowrap，落在了五列句子上 -------------- depth.css 的 `.sys td { white-space: nowrap }` 是给「甲子」「60 天」 那种读数用的。这一页五列全是整句，于是 Greek 一列被拉到 626px， 整张表 2,372px 塞进 358px 的容器 —— 约 84% 的内容在屏幕外， 外面包着 .scroll-x，body 不横滚，所以一直没人发现。 1280px 宽屏上同样是 2,563px 塞进 944px，这不是窄屏专有的毛病。 （2026-09-20 14:39 +08 实测） */ .sys th, .sys td { white-space: normal; vertical-align: top; } /* 梦名那一列是这张表的入口，不跟右边四段解释抢宽度 */ .sys tbody th { width: 9rem; padding-right: var(--sp-3); } /* ---- 窄屏：五列排不下，那就不排 ------------------------------ 一个梦一块，梦名当小标题，四家的读法各带自己的标签竖着排。 断点沿用站里其他表的 560px —— 再宽一点四列还读得动， 而四列并排恰好是这张表存在的理由，能留就留。 */ @media (max-width: 560px) { .sys, .sys tbody, .sys tr, .sys th, .sys td { display: block; width: auto; } .sys thead { display: none; } .sys tbody tr { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); } .sys tbody tr:last-child { border-bottom: 0; padding-bottom: 0; } .sys th, .sys td { padding: 0; border-bottom: 0; } .sys tbody th { width: auto; margin-bottom: var(--sp-2); font-family: var(--font-display); font-size: var(--step-1); } /* 标签列的宽度由最长的那个标签定：FREUDIAN 在 --step--1 加 .1em 字距下 约 72px。跟 systems 页同一个教训 —— 4.6rem 装不下会直接怼到正文上。 而且必须是固定值：1fr 的下限是 min-content，长标签照样会撑开这一列。 四个标签写在 td 的 data-l 上，跟 thead 里的列名对应。 */ .sys tbody td { display: grid; grid-template-columns: 5.6rem 1fr; gap: 0 var(--sp-3); margin-top: var(--sp-2); } .sys tbody td[data-l]::before { content: attr(data-l); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } } /* ============================================================ 2026-09-21 20:4x +08 —— 第一屏那个选梦的格子、四家并排、一周记录。 `.chip` 在 depth.css 里是「分段开关」的长相：全大写、字距 .14em、 margin-left:-1px 拼成一条。那是给两三个词的档位用的， 这儿有八个，最长一个是 An exam you did not study for —— 全大写读不动，负边距在换行时又会把上下两行的框叠错位。 所以整块重画成格子，只留 .chip.on 的选中态（那条在 depth.css， 两边都是 (0,2,0)，depth 排在后面，不用重写）。 2026-09-22 16:3x +08 —— 八个格子改成带图版的图块。 用户第 2 条：「其他页面全部都是一眼进去看不明白，没有图」。 两列文字块的时候，这一页第一屏是八个字方块加一大片空白， 是七页里最空的一个。现在一格一张图版，字退成 short 那一个词。 四列是写死的，不是算出来的。原来写的是 minmax(4.75rem) 让 auto-fit 自己凑，依据是「390px 上正文宽 358」—— 可这组格子在色带里面， 色带自己还有一圈 16px 内边距，真实宽度是 326，算出来 n ≤ 3.98， 于是排成了 3+3+2，右下角缺一格（2026-09-30 截图实测， 这段注释当时说的是 4 列，屏幕上是 3 列）。 八个梦只有两种排法不留豁口：4×2 和 1×8。列数由它定，不由宽度凑 —— 宽度差 1px 就换一种排法的写法，下一次改内边距又会掉回 3 列。 手机 4 列：390 上一格约 75px、图 65px，360 的安卓上图 58px， 都还在拇指 44px 之上；桌面 46rem 起摊成一排八个（和 tarot / iching 用同一个断点），那时一格也有 77px 以上。 ============================================================ */ .dr-pick { display: grid; gap: var(--sp-2); /* .head 的 gap 被色带那条改成 0 了（skin.css，理由在那儿）， 所以这一块要自己出上边距，不然八个格子贴死在导语上。 */ margin: var(--sp-4) 0 0; /* .head 是 justify-items:start 的网格，子元素默认缩到内容宽 —— 不写这句这块只有 261px，两列要 280px，于是整块掉成一列八行 470px，第八个梦沉到折线下面（2026-09-21 21:0x +08 实测）。 */ justify-self: stretch; /* minmax(0, …) 不是多余的：光写 1fr 下限是内容最小宽， 哪天 short 改长一个词就会把整列撑宽、把网格推出色带， 而 body 的 overflow-x: hidden 会把那一截安静地裁掉。 写 0 之后太长的字只会露在自己那一格里，看得见。 */ grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (min-width: 46rem) { .dr-pick { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .dr-pick > .chip { margin-left: 0; text-align: center; font-size: var(--step--1); letter-spacing: 0; text-transform: none; /* 内边距收到 sp-1：图块四周留一圈色带当卡纸，再宽图就小得看不清了。 */ padding: var(--sp-1); display: grid; gap: var(--sp-1); align-content: start; /* 44px 是拇指的下限，engine.css 里那条注释说的就是这个。 */ min-height: 2.75rem; } /* 图铺满格子。engine.css 的 img 规则只给了 max-width:100%， 240px 的源图会被压到格子宽正好，但那是**因为**格子比它窄； 桌面上一排八个时格子有 110px 出头，不写这句图就停在 240 不动， 于是八个图块参差不齐 —— 所以这句要写死。 */ .dr-pick > .chip > img { width: 100%; } /* 那一个词。行高收紧，两行的词（没有，但 short 改长了会有）不撑破格子。 */ .dr-pick > .chip > b { font-weight: 600; line-height: 1.15; } /* 选中那个梦的大图版，落在判词和八个格子之间。 排版规则 2026-09-30 提到 fortune/skin.css 的 .fd-plate 了（五页共用）， 这里只剩宽屏上一件 dreams 自己的事：图挪到右栏之后，八个格子 要横跨两栏排在图下面 —— 挤在左栏里一格只剩 58px。 */ @media (min-width: 46rem) { .head:has(> .fd-plate:not([hidden])) > .dr-pick { grid-column: 1 / -1; } } /* 八个格子落在判词那条色带上（.dr-pick 是 .head 的直接子元素）， 而 depth.css 里 .chip 的字色是 --muted #4a5a72 —— 压在紫棠 #3c2b57 上对比度 1.2:1，等于看不见。这里整组反白。 三条都写到 (0,4,0)：depth.css 的 .chip / .chip:hover / .chip.on 是 (0,2,0)，只覆盖基态的话选中和悬停两条会从底下顶回来， 于是「选中」在色带上没有任何表现。要盖就三个态一起盖。 色带本身的选择器在 fortune/skin.css，这儿只是跟着它走。 */ .head:has(> .fd-date) > .dr-pick > .chip { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 42%, transparent); background: transparent; } .head:has(> .fd-date) > .dr-pick > .chip:hover { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 14%, transparent); } /* 选中的那个翻过来：纸色底、今天的色做字。整条带子上只有它是实心的。 */ .head:has(> .fd-date) > .dr-pick > .chip.on { color: var(--mood); background: var(--accent-ink); border-color: var(--accent-ink); } /* 四家并排。.readout 原本是给「甲子」「60 天」那种读数排的： dd 推到右边、用 step-1 的标题字。这儿四条全是整句， 照那个排会变成右对齐的大字块 —— 所以这一页把它竖过来。 */ .dr-four > div { display: block; } .dr-four dd { margin: var(--sp-2) 0 0; font-family: inherit; font-size: var(--step-0); color: var(--ink); } /* 一周记录：七格，今天在最右。空格子就空着 —— 补占位符号会让 「那天没记」和「那天记了别的」长得一样。 */ .dr-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; } .dr-day { display: grid; gap: var(--sp-1); align-content: start; /* 横向留白压到 2px：390px 上七格每格只有 46px， padding 给 4px 就只剩 38px，Teeth 会被断成 Teet / h， 而它一换行整排格子跟着变高（2026-09-21 21:1x +08 实测）。 */ padding: var(--sp-2) 2px; border: 1px solid var(--rule); background: var(--raise); text-align: center; } .dr-day[data-has] { border-color: var(--mood); } .dr-day.now { border-style: dashed; } .dr-day.now[data-has] { border-style: solid; background: var(--mood); } .dr-day.now[data-has] > button > .dr-dow, .dr-day.now[data-has] > button > .dr-sym { color: var(--accent-ink); } /* 记过的那几格是按钮。