diff options
| -rw-r--r-- | sass/style.sass | 64 | ||||
| -rw-r--r-- | templates/macros.html | 4 |
2 files changed, 41 insertions, 27 deletions
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 diff --git a/templates/macros.html b/templates/macros.html index 648d4b0..4c44ea3 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -1,7 +1,9 @@ {% macro render_post(post, class="feed") -%} +<aside class="gutter"> + <img class="avatar" alt="Authored by: {{ config.extra.author }}" src="{{ config.extra.avatar }}" width="64" /> +</aside> <article class="{{ class }}"> <header> - <img class="avatar" alt="Authored by: {{ config.extra.author }}" src="{{ config.extra.avatar }}" width="64" /> <div class="banner smaller"> <div class="info"> <time class="mute" datetime="{{ post.date }}" title="{{ post.date }}">{{ post.date | date(format="%F") }}</time> |