summaryrefslogtreecommitdiffstatshomepage
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--sass/style.sass64
1 files changed, 38 insertions, 26 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