Eryn Wells
a8fd6e550f
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
22 lines
574 B
CSS
22 lines
574 B
CSS
/*************************
|
|
# COMPONENT: SITE HEADER
|
|
*************************/
|
|
|
|
.site-header__container {
|
|
.site-header__title {
|
|
font-family: var(--font-family-heading);
|
|
}
|
|
|
|
.site-header__nav {
|
|
font-size: smaller;
|
|
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);
|
|
}
|