diff --git a/website/public/css/base.css b/website/public/css/base.css index a3f8e49..cff23c8 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -84,11 +84,18 @@ body { } @media (min-width: 36rem) { - :is(main, article) { + body { display: grid; grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end]; margin-inline-end: 6rem; column-gap: var(--spacing-block-sm); + max-width: calc(6rem + var(--spacing-block-sm) + 30rem); + + :is(main, article, nav) { + display: grid; + grid-column: media-start / content-end; + grid-template-columns: subgrid; + } :is(section, header, aside) { grid-column: content-start / content-end; @@ -136,7 +143,8 @@ a:is(:link, :visited) { nav { margin-block: var(--spacing-block-sm); - li { + ul { + grid-column: media-start / content-end; display: flex; justify-content: center; gap: var(--spacing-inline-md); @@ -144,6 +152,17 @@ nav { } } +@media (min-width: 36rem) { + nav { + display: grid; + grid-template-columns: subgrid; + + ul { + justify-content: end; + } + } +} + /** Blog feed */ .h-feed { diff --git a/website/src/components/Navbar.astro b/website/src/components/Navbar.astro index bae661b..c94944a 100644 --- a/website/src/components/Navbar.astro +++ b/website/src/components/Navbar.astro @@ -2,12 +2,12 @@ ---