vivid 手机端全站统一离边框 12px:hero/wrap/page-head/foot/showcase 对齐正文列与评论区(原 20/28px 混用),顶栏品牌左缘同步对齐,页脚底部留白收到 56px
This commit is contained in:
1 parent
5cd0e63ae6
commit
2fea889515
2 files changed
+14
-12
No files matched your search
@@ -57,7 +57,7 @@ html[data-ui='vivid'] .menu-btn {display:none}
|
|||||||
html[data-ui='vivid'] .top-m {position:fixed;z-index:120;
|
html[data-ui='vivid'] .top-m {position:fixed;z-index:120;
|
||||||
top:0;left:0;right:0;
|
top:0;left:0;right:0;
|
||||||
display:none;align-items:center;justify-content:space-between;
|
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);
|
border-bottom:1px solid var(--line);
|
||||||
background:color-mix(in srgb,var(--card) 82%,transparent);
|
background:color-mix(in srgb,var(--card) 82%,transparent);
|
||||||
backdrop-filter:blur(20px) saturate(1.5);
|
backdrop-filter:blur(20px) saturate(1.5);
|
||||||
|
|||||||
@@ -11,21 +11,23 @@
|
|||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@media (max-width:640px) {
|
@media (max-width:640px) {
|
||||||
/* 左右 20px 对齐:hero 的标题和下面卡片列表的左边缘要在同一条竖线上 */
|
/* 左右 12px 全站统一离边框(站主要求):正文列 .article-layout 和评论区
|
||||||
html[data-ui='vivid'] .hero {padding:48px 20px 32px}
|
(styles.css 的 .cm-sec 手机断点)本来就是 12px,这里把首页 hero /
|
||||||
html[data-ui='vivid'] .wrap {padding:8px 20px 36px}
|
列表页 wrap / 页头 page-head / 页脚 foot / showcase 一起对齐——
|
||||||
/* 阅读页在手机上只收回留白:.article-layout 走 12px 页边距,.paper 的内边距归零
|
手机上同一行内容不管翻到哪个页面,左缘都在同一条竖线上。 */
|
||||||
(桌面那 24px 是为了给 776 的中列凑出 --measure 的 728,手机上只会浪费宽度)。
|
html[data-ui='vivid'] .hero {padding:48px 12px 32px}
|
||||||
12px 是站主定的「不影响美观的前提下尽量贴边」,评论区(styles.css 的 .cm-sec
|
html[data-ui='vivid'] .wrap {padding:8px 12px 36px}
|
||||||
手机断点)与此对齐,正文和评论共用同一条左缘。卡片样式本身已在 article.css
|
html[data-ui='vivid'] .page-head {padding:56px 12px 32px}
|
||||||
里去掉了,手机桌面一致。 */
|
|
||||||
html[data-ui='vivid'] .article-layout {padding:20px 12px 40px}
|
html[data-ui='vivid'] .article-layout {padding:20px 12px 40px}
|
||||||
html[data-ui='vivid'] .paper {padding:0}
|
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 类),
|
/* showcase 的 .showcase 是 max-width + 自己的 padding(不带 .wrap 类),
|
||||||
单独对齐;用 max() 保住横屏刘海侧的安全区 */
|
单独对齐;用 max() 保住横屏刘海侧的安全区 */
|
||||||
html[data-ui='vivid'] .showcase {padding-left:max(20px, env(safe-area-inset-left));
|
html[data-ui='vivid'] .showcase {padding-left:max(12px, env(safe-area-inset-left));
|
||||||
padding-right:max(20px, env(safe-area-inset-right));}
|
padding-right:max(12px, env(safe-area-inset-right));}
|
||||||
|
/* 页脚两侧跟内容对齐;底部 120px 是给旧 dock 留的,现在只有快发 FAB,
|
||||||
|
收到 56px 够它的悬浮高度 */
|
||||||
|
html[data-ui='vivid'] .foot {padding:28px 12px 56px}
|
||||||
|
|
||||||
/* 标签 chips 在手机上会折成三四行,搜索框再挤一个 150px 控件 —— 都收起来,
|
/* 标签 chips 在手机上会折成三四行,搜索框再挤一个 150px 控件 —— 都收起来,
|
||||||
只留类型分段,筛选条回到一行。
|
只留类型分段,筛选条回到一行。
|
||||||
|
|||||||
Reference in new issue
Block a user