From 2261aedd81a3b2f894107d61746bf9c5a90019ae Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Sat, 15 Aug 2020 21:07:39 -0400 Subject: [PATCH] Cleans up prefers-color-scheme styles to use just css variables in a much better way --- assets/scss/_dark.scss | 81 ++++++++----------------------------- assets/scss/_variables.scss | 4 +- assets/scss/main.scss | 63 +++++++++++++---------------- package.json | 2 +- 4 files changed, 50 insertions(+), 100 deletions(-) diff --git a/assets/scss/_dark.scss b/assets/scss/_dark.scss index 1decff5..351bdcb 100644 --- a/assets/scss/_dark.scss +++ b/assets/scss/_dark.scss @@ -1,60 +1,23 @@ // dark mode preference @media (prefers-color-scheme: dark) { - body { - background: var(--bg-dark); - color: var(--text-dark); + :root { + --background: #{$black-dk}; + --background-accent: #{$black-md}; + --border-accent: #{$gray-md}; + --border-subdued: #{$black-md}; + --link-color: #{$blue-lt}; + --text-color: #{$gray-lt}; + --text-color-accent: #{$white}; + --text-color-subdued: #{$black-lt}; + --text-title-title: #{$purple-lt}; + --text-color-h3: #{$teal-lt}; } - header { - border-top-color: var(--border-dark); - h1 { - a { - color: var(--text-dark-hl); - } - span { - color: var(--text-subdued-dark); - } - } - } - a, - b { - color: var(--link-color-dark); - } - p a:hover { - border-bottom: 2px solid var(--link-color-dark); - } - main { - aside { - h1 { - background: var(--text-title-dark); - background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } - } - article { - h2 { - color: var(--text-dark-hl); - } - h3 { - color: var(--h3-dark); - } - blockquote { - p { - border-left-color: var(--border-dark); - } - } - } - &#list { - section + section { - border-top-color: var(--border-dark); - } - } - } - footer { - section#author.border::before { - background: var(--bg-dark); - } + main aside h1 { + background: var(--text-color-title); + background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; } #toc { background: rgba(0,0,0,.75); @@ -62,14 +25,4 @@ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d6d7df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A"); } } - ul.tags li a { - background: var(--border-dark); - - &:hover { - background: var(--link-color-dark); - } - } - span.tag { - background: var(--border-dark); - } } \ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 6a4667e..9453540 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -11,7 +11,8 @@ $black-dk: #21252b; $white: #fff; $navy-md: #002953; $navy-dk: #032140; -$gray: #d6d7df; +$gray-lt: #d6d7df; +$gray-md: #565c66; $purple-lt: #9690ea; $purple-md: #736be3; $font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; @@ -19,6 +20,7 @@ $font-family-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica $font-size-base: 18px; $blue-lt: #29baff; $blue-md: #0069ff; +$screen-narrow: 414px; $screen-mobile: 640px; $screen-tablet: 768px; $screen-laptop: 1024px; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 22ea7d6..52a4b82 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -7,23 +7,17 @@ @import "variables"; :root { - --bg-normal: #{$tan-lt}; - --bg-dark: #{$black-dk}; - --border-normal: #{$white}; - --border-dark: #{$black-md}; + --background: #{$tan-lt}; + --background-accent: #{$white}; + --border-accent: #{$tan-md}; + --border-subdued: #{$white}; --font-size-base: #{$font-size-base}; - --link-color-normal: #{$blue-md}; - --link-color-dark: #{$blue-lt}; - --text-normal: #{$navy-md}; - --text-normal-hl: #{$navy-dk}; - --text-dark: #{$gray}; - --text-dark-hl: #{$white}; - --text-title-normal: #{$purple-md}; - --text-title-dark: #{$purple-lt}; - --text-subdued-normal: #{$tan-md}; - --text-subdued-dark: #{$black-lt}; - --h3-normal: #{$teal-md}; - --h3-dark: #{$teal-lt}; + --link-color: #{$blue-md}; + --text-color: #{$navy-md}; + --text-color-accent: #{$navy-dk}; + --text-color-subdued: #{$tan-md}; + --text-color-title: #{$purple-md}; + --text-color-h3: #{$teal-md}; --screen-mobile: #{$screen-mobile}; --screen-tablet: #{$screen-tablet}; --screen-laptop: #{$screen-laptop}; @@ -41,8 +35,8 @@ html { body { align-items: center; - background: var(--bg-normal); - color: var(--text-normal); + background: var(--background); + color: var(--text-color); display: flex; flex-direction: column; font-family: $font-family-base; @@ -51,7 +45,7 @@ body { header { align-self: stretch; - border-top: 1vmax solid var(--border-normal); + border-top: 1vmax solid var(--border-subdued); padding: 5vmin 6vmin 0; h1 { @@ -59,11 +53,11 @@ header { margin: 0; a { - color: var(--text-normal); + color: var(--text-color); } span { - color: var(--text-subdued-normal); + color: var(--text-color-subdued); &.slug { text-transform: lowercase; @@ -130,7 +124,7 @@ main { // after the first one, put a top border to divide them + section { - border-top: 0.5vmax solid var(--border-normal); + border-top: 0.5vmax solid var(--border-subdued); padding-top: max(2vmax, 1.5rem); } } @@ -142,7 +136,7 @@ main { text-align: center; h1 { - color: var(--text-title-normal); + color: var(--text-color-title); font-family: $font-family-title; font-size: max(3.75vmax, 2rem); font-weight: 800; @@ -164,7 +158,7 @@ main { flex-direction: column; h2 { // section titles, outset width - color: var(--text-normal-hl); + color: var(--text-color-accent); font-size: max(2.25vmax, 1.5rem); font-weight: 800; letter-spacing: -0.05rem; @@ -174,7 +168,7 @@ main { } h3 { // subsection headers, body width - color: var(--h3-normal); + color: var(--text-color-h3); font-size: max(2vmax, 1.375rem); margin: 2vmax 10vmin 1vmax; text-align: center; @@ -264,7 +258,7 @@ main { margin: max(1vmax, 0.75rem) 0; p { - border-left: 1vmax solid var(--text-subdued-normal); + border-left: 1vmax solid var(--border-accent); padding-left: 2vmax; margin-top: 0; margin-bottom: 0; @@ -323,13 +317,14 @@ footer { } &.border { - border-top: max(0.25vmax, 0.25rem) solid var(--border-dark); + border-top: max(0.25vmax, 0.25rem) solid var(--border-accent); padding-top: 5vmax; &::before { align-items: center; - background: var(--bg-normal); + background: var(--background); border-radius: 100%; + color: var(--border-accent); content: $icon-barracuda; display: flex; font-family: 'andrew'; @@ -429,7 +424,7 @@ a[href^="#fn:"]:after{ content: ']' } a, b { - color: var(--link-color-normal); + color: var(--link-color); font-style: normal; position: relative; text-decoration: none; @@ -484,7 +479,7 @@ b { // paragraph links p a:hover { - border-bottom: 2px solid var(--link-color-normal); + border-bottom: 2px solid var(--link-color); } // specific link effects @@ -539,7 +534,7 @@ ul { width: 100%; li a { - background: var(--border-normal); + background: var(--background-accent); border-radius: 1000rem; display: block; font-size: max(1.25vmax, 1rem); @@ -547,7 +542,7 @@ ul { padding: 1vmax 2vmax; &:hover { - background: var(--link-color-normal); + background: var(--link-color); border: none; color: #fff; } @@ -558,13 +553,13 @@ ul { // horizontal rules hr { border: none; - border-top: max(0.25vmax, 0.25rem) solid var(--border-dark); + border-top: max(0.25vmax, 0.25rem) solid var(--border-accent); margin: 3vmax 0; } // extras span.tag { - background: var(--border-normal); + background: var(--background-accent); padding: 0.25vmax 1vmax; } diff --git a/package.json b/package.json index b7aa54c..fa73a72 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "sass": "sass --no-source-map assets/scss/main.scss public/css/style.css", "watch": "sass --no-source-map --watch assets/scss/main.scss public/css/style.css", "tidy": "tidy -config tidy.conf -mq public/**/*.html", - "tidy-bash": "find . -name '*.html' -type f -print -exec tidy -config ../tidy.conf -mq '{}' \;", + "tidy-bash": "find . -name '*.html' -type f -print -exec tidy -config ../tidy.conf -mq '{}' \\;", "copy": "cp -R public/* /var/www/blog.andrewgioia.com/", "editing": "hugo --environment development --watch=true", "publish": "hugo && sass --no-source-map assets/scss/main.scss public/css/style.css && cp -R public/* /var/www/blog.andrewgioia.com/"