eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Structure: Collapse the outer grid columns (margins and gutters) on small screens

Browse source 
Let the border of the site header and footer touch the edges of the screen too.
This commit is contained in:
Eryn Wells 2024-07-25 09:55:51 -07:00
parent b130db28e0
commit 1ffbee8850
3 changed files with 44 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

33
assets/css/010_structure.css
View file

@ -43,6 +43,35 @@ body {
margin: 0;
}
@media screen and (max-width: 480px) {
body {
grid-template-columns:
[
full-start
wide-start
wide-gutter-start
wide-gutter-left-start
wide-gutter-left-end
gutter-start
gutter-left-start
]
var(--gutter-width)
[gutter-left-end main-start]
minmax(auto, var(--content-width))
[main-end gutter-right-start]
var(--gutter-width)
[
gutter-right-end
gutter-end
wide-gutter-right-start
wide-gutter-right-end
wide-gutter-end
wide-end
full-end
];
}
}
.body__container,
.site-header,
.main--list,
@ -73,10 +102,6 @@ article.content
gap: var(--space-xl) 0;
}
.site-header__content {
grid-column: main-start / main-end;
}
:is(.list-header, p) {
grid-column: main-start / main-end;
}