diff options
| -rw-r--r-- | scss/style.scss | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/scss/style.scss b/scss/style.scss index ff443b9..29c7226 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,16 +1,19 @@ @import '_webfonts'; @import '_responsive_fonts'; -$font-sans: Alegreya Sans, sans; -$font-serif: Alegreya, serif; -$font-mono: Iosevka, Inconsolata, monospace; +:root { + --font-sans: Alegreya Sans, sans; + --font-serif: Alegreya, serif; + --font-mono: Iosevka, Inconsolata, monospace; -$font-size-pre: 85%; + --font-size-pre: 85%; -$yellow: #ffd400; -$canary: #ffffc3; -$canary-text: #191900; -$mute-text: #5a5a5a; + --fg-color-canary: #191900; + --fg-color-mute: #5a5a5a; + + --bg-color-canary: #ffffc3; + --bg-color-yellow: #ffd400; +} body { background-color: white; @@ -21,7 +24,7 @@ body { margin: 1rem auto; padding: 0 1rem; - font-family: $font-sans; + font-family: var(--font-sans); font-size: 1.3rem; } @@ -46,13 +49,13 @@ h1 { } code { - font-family: $font-mono; - font-size: $font-size-pre; + font-family: var(--font-mono); + font-size: var(--font-size-pre); } pre { - background-color: $canary; - color: $canary-text; + background-color: var(--bg-color-canary); + color: var(--fg-color-canary); overflow: auto; padding: .7rem; } @@ -62,7 +65,7 @@ pre.clear { } pre.indent { - font-size: $font-size-pre; + font-size: var(--font-size-pre); border-left: 4px solid lightgrey; @@ -71,7 +74,7 @@ pre.indent { } blockquote { - background-color: $canary; + background-color: var(--bg-color-canary); padding: .7rem; } @@ -100,7 +103,7 @@ nav li > article { display: flex; font-size: 60%; - color: $mute-text; + color: var(--fg-color-mute); } a { align-self: flex-start; } @@ -152,7 +155,7 @@ section.post { figure { figcaption { - color: $mute-text; + color: var(--fg-color-mute); text-align: center; font-size: smaller; |