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

Implement a clever margin trick

Browse source 
This trick centers content and ensures a minimum margin of spacing size S.

https://stackoverflow.com/questions/70323075/how-i-can-use-min-and-max-css-functions-to-work-with-auto
This commit is contained in:
Eryn Wells 2024-06-29 10:31:21 -07:00
parent 0ff918898b
commit a8fd6e550f
2 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/css/010_structure.css
View file

@ -20,16 +20,12 @@ body {
} }
main { main {
margin-inline: auto; /* Center the content and ensure a minimum margin. The calculation in the
* second argument does what `auto` would do if it could be used in max(). */
margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
max-width: var(--content-width); max-width: var(--content-width);
} }
main,
.site-header__conatiner,
.site-footer__container {
padding-inline: var(--space-xs);
}
figure, img { figure, img {
max-width: 100%; max-width: 100%;
} }

8
assets/css/099_site_header.css
View file

@ -12,3 +12,11 @@
font-weight: normal; font-weight: normal;
} }
} }
.site-header__container,
.site-footer__container {
/* Center the content and ensure a minimum margin. The calculation in the
* second argument does what `auto` would do if it could be used in max(). */
margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
max-width: var(--content-width);
}