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