diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/style.sass | 114 |
1 files changed, 68 insertions, 46 deletions
diff --git a/sass/style.sass b/sass/style.sass index e1593a1..f5852fa 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -8,18 +8,24 @@ --font-serif: Alegreya, serif --font-mono: Iosevka, Inconsolata, monospace - --font-size-pre: 85% + --font-size-pre: 80% --font-size-quote: 90% --fg-color: black --fg-color-mute: #5a5a5a + --fg-color-gutter: #a6a6a6 + --fg-color-pre: black --fg-href: #0000ee --fg-href-visited: #551a8b --bg-color: white + --bg-color-pre: #ffffc3 --border-color-light: lightgrey --border-color-dark: darkgrey + --border-color-pre: #e0e0c3 + + --border-radius: 4px @media (prefers-color-scheme: dark) \:root @@ -27,8 +33,11 @@ --fg-color-mute: #7a7a7a --fg-href: #7676ff --fg-href-visited: #9547dd + --fg-color-pre: #f0f0f0 --bg-color: #000000 + --bg-color-pre: #1f1f1f + --border-color-pre: #2f2f2f @mixin spacer content: 'ยท' @@ -53,7 +62,12 @@ a.tag &::before content: "#" -h3.related +h2#related + grid-column: main + + display: flex + align-items: center + margin: 0 h2.title @@ -71,8 +85,10 @@ h2.title color: inherit pre - border: 1px solid var(--border-color-light) - box-shadow: 0px 0px 2px var(--border-color-light) + color: var(--fg-color-pre) + background-color: var(--bg-color-pre) + border: 1px solid var(--border-color-pre) + border-radius: var(--border-radius) padding: .5em overflow: auto @@ -109,16 +125,13 @@ div.footnote-definition > sup::after content: "." -html - overflow-y: scroll - 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) @@ -130,11 +143,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 @@ -143,16 +160,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 @@ -171,7 +187,7 @@ article > section.post color: var(--fg-href-visited) img - border-radius: 8px + border-radius: var(--border-radius) max-width: 100% article.single h2.title @@ -180,21 +196,28 @@ article.single h2.title div.banner > div.info display: inline-flex - > a:first-of-type - padding-right: .2rem - div.banner > nav.tags margin-left: 1rem -article > header - margin: 0 +aside.gutter + display: flex + flex-direction: column + + grid-column: gutter + + > span + display: inline-flex + justify-content: center + font-size: 2em + color: var(--fg-color-gutter) -article > header > img.avatar - position: absolute - left: 0 - width: 64px + margin: 0 - border-radius: 4px + +img.avatar + width: 100% + + border-radius: var(--border-radius) border: 1px solid var(--border-color-light) article > header > div.banner @@ -208,18 +231,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 @@ -229,15 +254,12 @@ figure > a display: block @media (max-width: 480px) - article:not(.single) - div.info > time - display: none - - div.info > h2.title::before - display: none + aside.gutter + display: none - article > header > img.avatar - width: 48px + main + grid-template-columns: minmax(auto, 38em) + grid-template-areas: "main" article - padding-left: 62px + padding-left: 0 |