mirror of
https://github.com/andrewgioia/blog.git
synced 2024-12-22 18:39:55 +00:00
Cleans up prefers-color-scheme styles to use just css variables in a much better way
This commit is contained in:
parent
4c6a400ed8
commit
2261aedd81
@ -1,75 +1,28 @@
|
|||||||
// 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 {
|
|
||||||
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%);
|
background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
color: transparent;
|
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);
|
||||||
&::before {
|
&::before {
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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/"
|
||||||
|
Loading…
Reference in New Issue
Block a user