andrew/blog
andrew
/
blog
mirror of https://github.com/andrewgioia/blog.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Cleans up prefers-color-scheme styles to use just css variables in a much better way

This commit is contained in:
Andrew Gioia 2020-08-15 21:07:39 -04:00
parent 4c6a400ed8
commit 2261aedd81
4 changed files with 50 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
assets/scss/_dark.scss
View File

@ -1,60 +1,23 @@
// dark mode preference // dark mode preference
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { :root {
background: var(--bg-dark); --background: #{$black-dk};
color: var(--text-dark); --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 { main aside h1 {
border-top-color: var(--border-dark); background: var(--text-color-title);
h1 { background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%);
a { -webkit-background-clip: text;
color: var(--text-dark-hl); background-clip: text;
} color: transparent;
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);
}
} }
#toc { #toc {
background: rgba(0,0,0,.75); 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"); 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);
}
} }

4
assets/scss/_variables.scss
View File

@ -11,7 +11,8 @@ $black-dk: #21252b;
$white: #fff; $white: #fff;
$navy-md: #002953; $navy-md: #002953;
$navy-dk: #032140; $navy-dk: #032140;
$gray: #d6d7df; $gray-lt: #d6d7df;
$gray-md: #565c66;
$purple-lt: #9690ea; $purple-lt: #9690ea;
$purple-md: #736be3; $purple-md: #736be3;
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; $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; $font-size-base: 18px;
$blue-lt: #29baff; $blue-lt: #29baff;
$blue-md: #0069ff; $blue-md: #0069ff;
$screen-narrow: 414px;
$screen-mobile: 640px; $screen-mobile: 640px;
$screen-tablet: 768px; $screen-tablet: 768px;
$screen-laptop: 1024px; $screen-laptop: 1024px;

63
assets/scss/main.scss
View File

@ -7,23 +7,17 @@
@import "variables"; @import "variables";
:root { :root {
--bg-normal: #{$tan-lt}; --background: #{$tan-lt};
--bg-dark: #{$black-dk}; --background-accent: #{$white};
--border-normal: #{$white}; --border-accent: #{$tan-md};
--border-dark: #{$black-md}; --border-subdued: #{$white};
--font-size-base: #{$font-size-base}; --font-size-base: #{$font-size-base};
--link-color-normal: #{$blue-md}; --link-color: #{$blue-md};
--link-color-dark: #{$blue-lt}; --text-color: #{$navy-md};
--text-normal: #{$navy-md}; --text-color-accent: #{$navy-dk};
--text-normal-hl: #{$navy-dk}; --text-color-subdued: #{$tan-md};
--text-dark: #{$gray}; --text-color-title: #{$purple-md};
--text-dark-hl: #{$white}; --text-color-h3: #{$teal-md};
--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};
--screen-mobile: #{$screen-mobile}; --screen-mobile: #{$screen-mobile};
--screen-tablet: #{$screen-tablet}; --screen-tablet: #{$screen-tablet};
--screen-laptop: #{$screen-laptop}; --screen-laptop: #{$screen-laptop};
@ -41,8 +35,8 @@ html {
body { body {
align-items: center; align-items: center;
background: var(--bg-normal); background: var(--background);
color: var(--text-normal); color: var(--text-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: $font-family-base; font-family: $font-family-base;
@ -51,7 +45,7 @@ body {
header { header {
align-self: stretch; align-self: stretch;
border-top: 1vmax solid var(--border-normal); border-top: 1vmax solid var(--border-subdued);
padding: 5vmin 6vmin 0; padding: 5vmin 6vmin 0;
h1 { h1 {
@ -59,11 +53,11 @@ header {
margin: 0; margin: 0;
a { a {
color: var(--text-normal); color: var(--text-color);
} }
span { span {
color: var(--text-subdued-normal); color: var(--text-color-subdued);
&.slug { &.slug {
text-transform: lowercase; text-transform: lowercase;
@ -130,7 +124,7 @@ main {
// after the first one, put a top border to divide them // after the first one, put a top border to divide them
+ section { + section {
border-top: 0.5vmax solid var(--border-normal); border-top: 0.5vmax solid var(--border-subdued);
padding-top: max(2vmax, 1.5rem); padding-top: max(2vmax, 1.5rem);
} }
} }
@ -142,7 +136,7 @@ main {
text-align: center; text-align: center;
h1 { h1 {
color: var(--text-title-normal); color: var(--text-color-title);
font-family: $font-family-title; font-family: $font-family-title;
font-size: max(3.75vmax, 2rem); font-size: max(3.75vmax, 2rem);
font-weight: 800; font-weight: 800;
@ -164,7 +158,7 @@ main {
flex-direction: column; flex-direction: column;
h2 { // section titles, outset width h2 { // section titles, outset width
color: var(--text-normal-hl); color: var(--text-color-accent);
font-size: max(2.25vmax, 1.5rem); font-size: max(2.25vmax, 1.5rem);
font-weight: 800; font-weight: 800;
letter-spacing: -0.05rem; letter-spacing: -0.05rem;
@ -174,7 +168,7 @@ main {
} }
h3 { // subsection headers, body width h3 { // subsection headers, body width
color: var(--h3-normal); color: var(--text-color-h3);
font-size: max(2vmax, 1.375rem); font-size: max(2vmax, 1.375rem);
margin: 2vmax 10vmin 1vmax; margin: 2vmax 10vmin 1vmax;
text-align: center; text-align: center;
@ -264,7 +258,7 @@ main {
margin: max(1vmax, 0.75rem) 0; margin: max(1vmax, 0.75rem) 0;
p { p {
border-left: 1vmax solid var(--text-subdued-normal); border-left: 1vmax solid var(--border-accent);
padding-left: 2vmax; padding-left: 2vmax;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -323,13 +317,14 @@ footer {
} }
&.border { &.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; padding-top: 5vmax;
&::before { &::before {
align-items: center; align-items: center;
background: var(--bg-normal); background: var(--background);
border-radius: 100%; border-radius: 100%;
color: var(--border-accent);
content: $icon-barracuda; content: $icon-barracuda;
display: flex; display: flex;
font-family: 'andrew'; font-family: 'andrew';
@ -429,7 +424,7 @@ a[href^="#fn:"]:after{ content: ']' }
a, a,
b { b {
color: var(--link-color-normal); color: var(--link-color);
font-style: normal; font-style: normal;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@ -484,7 +479,7 @@ b {
// paragraph links // paragraph links
p a:hover { p a:hover {
border-bottom: 2px solid var(--link-color-normal); border-bottom: 2px solid var(--link-color);
} }
// specific link effects // specific link effects
@ -539,7 +534,7 @@ ul {
width: 100%; width: 100%;
li a { li a {
background: var(--border-normal); background: var(--background-accent);
border-radius: 1000rem; border-radius: 1000rem;
display: block; display: block;
font-size: max(1.25vmax, 1rem); font-size: max(1.25vmax, 1rem);
@ -547,7 +542,7 @@ ul {
padding: 1vmax 2vmax; padding: 1vmax 2vmax;
&:hover { &:hover {
background: var(--link-color-normal); background: var(--link-color);
border: none; border: none;
color: #fff; color: #fff;
} }
@ -558,13 +553,13 @@ ul {
// horizontal rules // horizontal rules
hr { hr {
border: none; 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; margin: 3vmax 0;
} }
// extras // extras
span.tag { span.tag {
background: var(--border-normal); background: var(--background-accent);
padding: 0.25vmax 1vmax; padding: 0.25vmax 1vmax;
} }

2
package.json
View File

@ -12,7 +12,7 @@
"sass": "sass --no-source-map assets/scss/main.scss public/css/style.css", "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", "watch": "sass --no-source-map --watch assets/scss/main.scss public/css/style.css",
"tidy": "tidy -config tidy.conf -mq public/**/*.html", "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/", "copy": "cp -R public/* /var/www/blog.andrewgioia.com/",
"editing": "hugo --environment development --watch=true", "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/" "publish": "hugo && sass --no-source-map assets/scss/main.scss public/css/style.css && cp -R public/* /var/www/blog.andrewgioia.com/"