From 2176cc7f6cf8c9e56dbc187361e5e3a6a5f8d96e Mon Sep 17 00:00:00 2001 From: Wolfgang Müller Date: Sat, 5 Oct 2024 11:25:33 +0200 Subject: Use CSS grid for post layout We've always been wanting to have the avatars aligned in the negative space next to the posts but never found an adequately nice way to do it. With grid this is now easy. We can also replace lots of the old margin and padding rules with gaps. --- sass/style.sass | 64 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 38 insertions(+), 26 deletions(-) (limited to 'sass') diff --git a/sass/style.sass b/sass/style.sass index b896384..6058155 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -60,6 +60,8 @@ a.tag content: "#" h3.related + grid-column: main + margin: 0 h2.title @@ -124,9 +126,9 @@ body font-family: var(--font-sans) font-size: 1.3rem - margin: 0 auto - max-width: 40em - padding: 0 1rem + margin: 0 + display: flex + flex-direction: column color: var(--fg-color) background-color: var(--bg-color) @@ -138,11 +140,15 @@ body float: right main - display: flex - flex-direction: column + display: grid + align-self: center + grid-template-columns: 64px minmax(auto, 38em) + grid-template-areas: "gutter main" + gap: 2rem 1rem + margin: 1rem -header - margin: 1rem 0 +main > header + grid-column: main header > h1 margin: 0 @@ -151,16 +157,15 @@ header > h1 color: inherit article - margin: 1rem 0 - padding-left: 78px - position: relative + display: flex + flex-direction: column + gap: .5rem + grid-column: main + overflow: auto article > section.post - > :first-child - margin-top: .5rem - > p:first-of-type - margin-top: .5rem + margin-top: 0 > p line-height: 1.3 @@ -194,13 +199,14 @@ div.banner > div.info div.banner > nav.tags margin-left: 1rem -article > header - margin: 0 +aside.gutter + display: flex + flex-direction: column + + grid-column: gutter -article > header > img.avatar - position: absolute - left: 0 - width: 64px +img.avatar + width: 100% border-radius: 4px border: 1px solid var(--border-color-light) @@ -216,18 +222,20 @@ nav ul.inline margin: 0 padding: 0 list-style-type: none - display: inline-flex + display: flex nav.pagination - margin: 1rem 0 - padding-top: .5rem + grid-column: 1 / -1 > a.older margin-left: auto nav.tags - ul > li:not(:first-of-type) - padding-left: .4rem + grid-column: main + + > ul.inline + flex-wrap: wrap + column-gap: .5rem nav.links &::before, & > ul > li:not(:first-child)::before @@ -239,8 +247,12 @@ figure > a @media (max-width: 480px) article:not(.single) - article > header > img.avatar + aside.gutter display: none + main + grid-template-columns: minmax(auto, 38em) + grid-template-areas: "main" + article padding-left: 0 -- cgit v1.2.3-2-gb3c3