From 2fea889515bd0c2a27f88f28a3147538e331c8ec Mon Sep 17 00:00:00 2001 From: Sakurasan <26715255+Sakurasan@users.noreply.github.com> Date: Thu, 1 Oct 2026 16:51:10 +0800 Subject: [PATCH] =?UTF-8?q?vivid=20=E6=89=8B=E6=9C=BA=E7=AB=AF=E5=85=A8?= =?UTF-8?q?=E7=AB=99=E7=BB=9F=E4=B8=80=E7=A6=BB=E8=BE=B9=E6=A1=86=2012px?= =?UTF-8?q?=EF=BC=9Ahero/wrap/page-head/foot/showcase=20=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=E6=AD=A3=E6=96=87=E5=88=97=E4=B8=8E=E8=AF=84=E8=AE=BA=E5=8C=BA?= =?UTF-8?q?=EF=BC=88=E5=8E=9F=2020/28px=20=E6=B7=B7=E7=94=A8=EF=BC=89?= =?UTF-8?q?=EF=BC=8C=E9=A1=B6=E6=A0=8F=E5=93=81=E7=89=8C=E5=B7=A6=E7=BC=98?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=AF=B9=E9=BD=90=EF=BC=8C=E9=A1=B5=E8=84=9A?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E7=95=99=E7=99=BD=E6=94=B6=E5=88=B0=2056px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/ui/yohaku/chrome.css | 2 +- frontend/src/ui/yohaku/mobile.css | 24 +++++++++++++----------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/frontend/src/ui/yohaku/chrome.css b/frontend/src/ui/yohaku/chrome.css index 2f4c17d..c9ecd9f 100644 --- a/frontend/src/ui/yohaku/chrome.css +++ b/frontend/src/ui/yohaku/chrome.css @@ -57,7 +57,7 @@ html[data-ui='vivid'] .menu-btn {display:none} html[data-ui='vivid'] .top-m {position:fixed;z-index:120; top:0;left:0;right:0; display:none;align-items:center;justify-content:space-between; - padding:max(8px, env(safe-area-inset-top)) 10px 8px 14px; + padding:max(8px, env(safe-area-inset-top)) 12px 8px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card) 82%,transparent); backdrop-filter:blur(20px) saturate(1.5); diff --git a/frontend/src/ui/yohaku/mobile.css b/frontend/src/ui/yohaku/mobile.css index a95cea2..0840d53 100644 --- a/frontend/src/ui/yohaku/mobile.css +++ b/frontend/src/ui/yohaku/mobile.css @@ -11,21 +11,23 @@ ========================================================================== */ @media (max-width:640px) { - /* 左右 20px 对齐：hero 的标题和下面卡片列表的左边缘要在同一条竖线上 */ - html[data-ui='vivid'] .hero {padding:48px 20px 32px} - html[data-ui='vivid'] .wrap {padding:8px 20px 36px} - /* 阅读页在手机上只收回留白：.article-layout 走 12px 页边距，.paper 的内边距归零 - （桌面那 24px 是为了给 776 的中列凑出 --measure 的 728，手机上只会浪费宽度）。 - 12px 是站主定的「不影响美观的前提下尽量贴边」，评论区（styles.css 的 .cm-sec - 手机断点）与此对齐，正文和评论共用同一条左缘。卡片样式本身已在 article.css - 里去掉了，手机桌面一致。 */ + /* 左右 12px 全站统一离边框（站主要求）：正文列 .article-layout 和评论区 + （styles.css 的 .cm-sec 手机断点）本来就是 12px，这里把首页 hero / + 列表页 wrap / 页头 page-head / 页脚 foot / showcase 一起对齐—— + 手机上同一行内容不管翻到哪个页面，左缘都在同一条竖线上。 */ + html[data-ui='vivid'] .hero {padding:48px 12px 32px} + html[data-ui='vivid'] .wrap {padding:8px 12px 36px} + html[data-ui='vivid'] .page-head {padding:56px 12px 32px} html[data-ui='vivid'] .article-layout {padding:20px 12px 40px} html[data-ui='vivid'] .paper {padding:0} - html[data-ui='vivid'] .about-card {padding:32px 22px} + html[data-ui='vivid'] .about-card {padding:32px 16px} /* showcase 的 .showcase 是 max-width + 自己的 padding（不带 .wrap 类）， 单独对齐；用 max() 保住横屏刘海侧的安全区 */ - html[data-ui='vivid'] .showcase {padding-left:max(20px, env(safe-area-inset-left)); - padding-right:max(20px, env(safe-area-inset-right));} + html[data-ui='vivid'] .showcase {padding-left:max(12px, env(safe-area-inset-left)); + padding-right:max(12px, env(safe-area-inset-right));} + /* 页脚两侧跟内容对齐；底部 120px 是给旧 dock 留的，现在只有快发 FAB， + 收到 56px 够它的悬浮高度 */ + html[data-ui='vivid'] .foot {padding:28px 12px 56px} /* 标签 chips 在手机上会折成三四行，搜索框再挤一个 150px 控件 —— 都收起来， 只留类型分段，筛选条回到一行。