refactor(layout): 窄屏堆叠交给 @stash/ui 0.3.2,删掉对应补丁

- 去掉 #page-scroll 的 flex-wrap / aside / main 高度覆盖(组件库已处理)
- 左栏吸顶只在 >1100 生效,窄屏不再需要手动取消 sticky
- 保留应用自己的侧栏排布(资料卡 + 导航并排)与页头断点
This commit is contained in:
2026-11-06 09:21:22 +08:00
parent a0be02b4f4
commit 9f1a8863f4
+13 -27
View File
@@ -837,11 +837,6 @@
/* ---------- 响应式 ---------- */ /* ---------- 响应式 ---------- */
@media (max-width: 1100px) { @media (max-width: 1100px) {
/* 单列堆叠:滚动容器不能换行,否则侧栏占满高度后主内容会被排到视口右侧(看不见) */
#page-scroll {
flex-wrap: nowrap;
}
/* 页头:品牌和操作图标按内容宽度,滚动信息吃剩下的空间, /* 页头:品牌和操作图标按内容宽度,滚动信息吃剩下的空间,
否则中间那列固定抢 720px,品牌文字会被挤没 */ 否则中间那列固定抢 720px,品牌文字会被挤没 */
.site-header-inner { .site-header-inner {
@@ -1155,14 +1150,17 @@ a.entry-href:hover {
} }
/* 左栏吸顶:sticky 由滚动引擎处理,不会像 JS 改 transform 那样落后平滑滚动一帧。 /* 左栏吸顶:sticky 由滚动引擎处理,不会像 JS 改 transform 那样落后平滑滚动一帧。
高度锁在滚动区高度内,栏内只有「分组导航」可滚,资料卡与本地服务保持不动。 */ 高度锁在滚动区高度内,栏内只有「分组导航」可滚,资料卡与本地服务保持不动。
#page-scroll > aside { 只在两栏布局(>1100)生效;窄屏堆叠交给 Layout 自己处理。 */
position: sticky; @media (min-width: 1101px) {
top: 0; #page-scroll > aside {
align-self: flex-start; position: sticky;
height: 100%; top: 0;
max-height: 100%; align-self: flex-start;
overflow: hidden; height: 100%;
max-height: 100%;
overflow: hidden;
}
} }
/* 侧栏卡片也贴着 aside 的边缘,阴影同样会被裁掉。 /* 侧栏卡片也贴着 aside 的边缘,阴影同样会被裁掉。
@@ -1623,20 +1621,8 @@ html.theme-transition .site-background {
/* ---------- 窄屏覆盖(放文件末尾:要盖过上面的侧栏基础规则) ---------- */ /* ---------- 窄屏覆盖(放文件末尾:要盖过上面的侧栏基础规则) ---------- */
@media (max-width: 1100px) { @media (max-width: 1100px) {
/* 侧栏 / 主内容在窄屏都不锁 100% 高、不吸顶;放在文件末尾才压得过上面的基础规则 */ /* 堆叠时的 aside / main 高度、换行、inner 滚动都由 Layout 负责(v0.3.2 起);
#page-scroll > aside { 这里只管侧栏内部的排布 */
position: static;
align-self: stretch;
height: auto;
max-height: none;
overflow: visible;
}
#page-scroll > main {
height: auto;
max-height: none;
}
#page-scroll > aside .sidebar-wrap { #page-scroll > aside .sidebar-wrap {
height: auto; height: auto;
padding: 0 var(--su-space-4) var(--su-space-4); padding: 0 var(--su-space-4) var(--su-space-4);