feat: enhance breadcrumb and media styles for improved layout and responsiveness

This commit is contained in:
Cell
2025-11-24 14:38:59 +08:00
parent 7d530c9f32
commit efeb70e19f
3 changed files with 44 additions and 9 deletions
+13
View File
@@ -2,9 +2,22 @@
padding-inline: 1rem;
font-size: 0.75rem;
background-color: $global-background-color;
display: flex;
gap: 0.5rem;
@include z-index(1);
@extend .print-d-none;
&:has(~ main[data-reverse]) {
flex-direction: row-reverse;
}
&::before,
&::after {
content: '';
flex: 1;
padding-inline: 0.5rem;
}
[data-theme='dark'] & {
background-color: $global-background-color-dark;
}
+30 -8
View File
@@ -41,16 +41,38 @@
}
@media only screen and (max-width: 1200px) and (min-width: 961px) {
.wrapper main {
// Hide empty aside and expand article when only one aside is empty
aside:first-child:empty:has(~ aside:not(:empty)),
aside:first-child:not(:empty) ~ aside#toc-auto:empty {
display: none;
.wrapper {
main {
// Hide empty aside and expand article when only one aside is empty
aside:first-child:empty:has(~ aside:not(:empty)),
aside:first-child:not(:empty) ~ aside#toc-auto:empty {
display: none;
}
aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
flex: 3;
}
}
aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
flex: 3;
// Adjust breadcrumb flex when asides are empty
&:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
.breadcrumb {
flex: 3;
}
&::before {
display: none;
}
}
&:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
.breadcrumb {
flex: 3;
}
&::after {
display: none;
}
}
}
}
+1 -1
View File
@@ -1,4 +1,4 @@
{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251121172518-6f99565f" -}}
{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251124063901-7d530c9f" -}}
{{- .Store.Set "this" dict -}}
{{- partial "init/detection-env.html" . -}}