diff options
Diffstat (limited to '')
| -rw-r--r-- | sass/_responsive_fonts.sass | 2 | ||||
| -rw-r--r-- | sass/style.sass | 125 |
2 files changed, 77 insertions, 50 deletions
diff --git a/sass/_responsive_fonts.sass b/sass/_responsive_fonts.sass index 12fa50f..6c990a0 100644 --- a/sass/_responsive_fonts.sass +++ b/sass/_responsive_fonts.sass @@ -1,6 +1,6 @@ @mixin font-size($size) html - font-size: $size; + font-size: $size @media (max-width: 480px) @include font-size(12px) diff --git a/sass/style.sass b/sass/style.sass index 1553227..f5852fa 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -8,17 +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 @@ -26,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: 'ยท' @@ -52,11 +62,12 @@ a.tag &::before content: "#" -a.bold-hover:hover - text-decoration: none - text-shadow: 0px 0px 1px var(--fg-href) +h2#related + grid-column: main + + display: flex + align-items: center -h3.related margin: 0 h2.title @@ -70,9 +81,14 @@ h2.title &::before @include spacer + a + 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 @@ -80,6 +96,11 @@ code font-family: var(--font-mono) font-size: var(--font-size-pre) +blockquote + border-left: 2px solid var(--border-color-light) + font-size: var(--font-size-quote) + padding: 0 1em + .mute color: var(--fg-color-mute) @@ -104,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) @@ -125,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 @@ -138,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 @@ -166,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 @@ -175,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 -article > header > img.avatar - position: absolute - left: 0 - width: 64px + > span + display: inline-flex + justify-content: center + font-size: 2em + color: var(--fg-color-gutter) - border-radius: 4px + margin: 0 + + +img.avatar + width: 100% + + border-radius: var(--border-radius) border: 1px solid var(--border-color-light) article > header > div.banner @@ -203,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 @@ -224,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 |