mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-04 12:50:49 +04:00
71 lines
2.1 KiB
CSS
71 lines
2.1 KiB
CSS
/* 当banner被禁用时的布局样式 */
|
|
.no-banner-layout {
|
|
top: 5.5rem !important;
|
|
min-height: calc(100vh - 5.5rem) !important;
|
|
}
|
|
|
|
/* 隐藏已收起横幅或非横幅模式时的图片版权描述 */
|
|
.no-banner-layout #banner-credit {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/* 手机端无侧边栏布局优化 */
|
|
@media (max-width: 768px) {
|
|
.mobile-no-sidebar {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
.mobile-no-sidebar main {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.mobile-no-sidebar #content-wrapper {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* 修复双侧边栏模式在移动端的布局问题 */
|
|
.mobile-both-sidebar {
|
|
/* 确保在移动端使用单列布局 */
|
|
grid-template-columns: 1fr !important;
|
|
/* 确保左右padding对称 */
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
/* 确保移动端主内容区域居中且全宽 */
|
|
.mobile-both-sidebar main {
|
|
grid-column: 1 / -1 !important;
|
|
width: 100% !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
/* 移动端footer也要居中 */
|
|
.mobile-both-sidebar .footer {
|
|
grid-column: 1 / -1 !important;
|
|
}
|
|
}
|
|
|
|
/* 小屏手机无侧边栏布局优化 */
|
|
@media (max-width: 512px) {/* 修复双侧边栏模式在移动端的布局问题 */
|
|
.mobile-both-sidebar {
|
|
/* 确保在移动端使用单列布局 */
|
|
grid-template-columns: 1fr !important;
|
|
/* 确保左右padding对称 */
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
}
|
|
/* 确保移动端主内容区域居中且全宽 */
|
|
.mobile-both-sidebar main {
|
|
grid-column: 1 / -1 !important;
|
|
width: 100% !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
/* 移动端footer也要居中 */
|
|
.mobile-both-sidebar .footer {
|
|
grid-column: 1 / -1 !important;
|
|
}
|
|
} |