refactor(layout): 窄屏堆叠交给 @stash/ui 0.3.2,删掉对应补丁
- 去掉 #page-scroll 的 flex-wrap / aside / main 高度覆盖(组件库已处理) - 左栏吸顶只在 >1100 生效,窄屏不再需要手动取消 sticky - 保留应用自己的侧栏排布(资料卡 + 导航并排)与页头断点
This commit is contained in:
+13
-27
@@ -837,11 +837,6 @@
|
||||
/* ---------- 响应式 ---------- */
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
/* 单列堆叠:滚动容器不能换行,否则侧栏占满高度后主内容会被排到视口右侧(看不见) */
|
||||
#page-scroll {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/* 页头:品牌和操作图标按内容宽度,滚动信息吃剩下的空间,
|
||||
否则中间那列固定抢 720px,品牌文字会被挤没 */
|
||||
.site-header-inner {
|
||||
@@ -1155,14 +1150,17 @@ a.entry-href:hover {
|
||||
}
|
||||
|
||||
/* 左栏吸顶:sticky 由滚动引擎处理,不会像 JS 改 transform 那样落后平滑滚动一帧。
|
||||
高度锁在滚动区高度内,栏内只有「分组导航」可滚,资料卡与本地服务保持不动。 */
|
||||
#page-scroll > aside {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
高度锁在滚动区高度内,栏内只有「分组导航」可滚,资料卡与本地服务保持不动。
|
||||
只在两栏布局(>1100)生效;窄屏堆叠交给 Layout 自己处理。 */
|
||||
@media (min-width: 1101px) {
|
||||
#page-scroll > aside {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧栏卡片也贴着 aside 的边缘,阴影同样会被裁掉。
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user