eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Style <main> with box-sizing: border-box and compute the max-width

Browse source
This commit is contained in:
Eryn Wells 2023-02-03 08:19:29 -08:00
parent 16cf918e8e
commit 7f61437f92
1 changed files with 19 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

37
assets/styles/root.css
View file

@ -312,6 +312,23 @@ header.site > .grid {
width: 100%; width: 100%;
} }
header.site > .grid > nav {
align-items: center;
display: flex;
font-size: max(1.5rem, 80%);
justify-content: start;
letter-spacing: 0.12em;
list-style: none;
text-transform: lowercase;
}
header.site > .grid > nav > li {
color: var(--site-nav-link-color);
display: block;
}
header.site > .grid > nav > .active { font-weight: bold; }
header.site > .grid > nav:first-of-type { header.site > .grid > nav:first-of-type {
justify-content: start; justify-content: start;
order: 2; order: 2;
@ -361,29 +378,13 @@ img.circular {
} }
main { main {
max-width: var(--content-width); box-sizing: border-box;
max-width: calc(var(--content-width) + 2 * var(--body-item-spacing));
margin: var(--body-item-spacing) auto; margin: var(--body-item-spacing) auto;
padding-inline: var(--body-item-spacing); padding-inline: var(--body-item-spacing);
width: 100%; width: 100%;
} }
header.site > .grid > nav {
align-items: center;
display: flex;
font-size: max(1.5rem, 80%);
justify-content: start;
letter-spacing: 0.12em;
list-style: none;
text-transform: lowercase;
}
header.site > .grid > nav > li {
color: var(--site-nav-link-color);
display: block;
}
header.site > .grid > nav > .active { font-weight: bold; }
main > :first-child, main > :first-child,
main > article > :first-child { margin-block-start: 0; } main > article > :first-child { margin-block-start: 0; }
main > :not(:last-child), main > :not(:last-child),