From 44dbdc7c801b1262a1e52147a0553f6c24d0382e Mon Sep 17 00:00:00 2001 From: Mohsen Azimi Date: Sat, 19 Mar 2022 20:38:41 -0300 Subject: [PATCH 1/4] Introduce dark mode and add fonts to base variables --- css/index.css | 63 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 46 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index 25c9c82..5194188 100644 --- a/css/index.css +++ b/css/index.css @@ -1,13 +1,41 @@ /* Colors */ :root { - --lightgray: #e0e0e0; - --gray: #C0C0C0; - --darkgray: #333; - --navy: #17050F; - --blue: #082840; - --white: #fff; + /* levels go from closer to background color (0) to opposite to background color (100) */ + --color-gray-level-20: #e0e0e0; + --color-gray-level-50: #C0C0C0; + --color-gray-level-90: #333; + + --text-color-default: #000; + --text-color-link-default: #082840; + --text-color-link-visited: #17050F; + --text-color-invese: #fff; + + --background-color-default: #fff; + + + --font-family-default: -apple-system, system-ui, sans-serif; + --font-family-monospace: + Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", + "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; } +@media (prefers-color-scheme: dark) { + :root { + --color-gray-level-20: #e0e0e0; + --color-gray-level-50: #C0C0C0; + --color-gray-level-90: #dad8d8; + + --text-color-default: #fff; + --text-color-link-default: #1269b0; + --text-color-link-visited: #7575a9; + --text-color-invese: #000; + + --background-color-default: #000; + } +} + + /* Global stylesheet */ * { box-sizing: border-box; @@ -17,9 +45,9 @@ html, body { padding: 0; margin: 0; - font-family: -apple-system, system-ui, sans-serif; - color: var(--darkgray); - background-color: var(--white); + font-family: var(--font-family-default); + color: var(--text-color-default); + background-color: var(--background-color-default); } p:last-child { margin-bottom: 0; @@ -34,10 +62,10 @@ p, line-height: 1.45; } a[href] { - color: var(--blue); + color: var(--text-color-link-default); } a[href]:visited { - color: var(--navy); + color: var(--text-color-link-visited); } main { padding: 1rem; @@ -46,7 +74,7 @@ main :first-child { margin-top: 0; } header { - border-bottom: 1px dashed var(--lightgray); + border-bottom: 1px dashed var(--color-gray-level-20); } header:after { content: ""; @@ -63,7 +91,7 @@ table th { pre, code { - font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + font-family: var(--font-family-monospace); line-height: 1.5; } pre { @@ -141,7 +169,7 @@ code { .postlist-date, .postlist-item:before { font-size: 0.8125em; /* 13px /16 */ - color: var(--darkgray); + color: var(--color-gray-level-90); } .postlist-date { word-spacing: -0.5px; @@ -173,8 +201,8 @@ code { margin-left: 0.6666666666667em; /* 8px /12 */ margin-top: 0.5em; /* 6px /12 */ margin-bottom: 0.5em; /* 6px /12 */ - color: var(--darkgray); - border: 1px solid var(--gray); + color: var(--color-gray-level-90); + border: 1px solid var(--color-gray-level-50); border-radius: 0.25em; /* 3px /12 */ text-decoration: none; line-height: 1.8; @@ -185,7 +213,8 @@ a[href].post-tag:visited { } a[href].post-tag:hover, a[href].post-tag:focus { - background-color: var(--lightgray); + background-color: var(--color-gray-level-20); + color: var(--text-color-invese) } .postlist-item > .post-tag { align-self: center; From 3a3440edddfe1862f484dd106c509f40cebb6e98 Mon Sep 17 00:00:00 2001 From: Mohsen Azimi Date: Sat, 19 Mar 2022 20:41:52 -0300 Subject: [PATCH 2/4] update warning color too --- css/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/index.css b/css/index.css index 5194188..10cf7ee 100644 --- a/css/index.css +++ b/css/index.css @@ -223,6 +223,7 @@ a[href].post-tag:focus { /* Warning */ .warning { background-color: #ffc; + color: var(--color-gray-level-50); padding: 1em 0.625em; /* 16px 10px /16 */ } .warning ol:only-child { From 322aba53f8312cfd1b3198a6e505538b1681ddd0 Mon Sep 17 00:00:00 2001 From: Mohsen Azimi Date: Sat, 19 Mar 2022 20:43:04 -0300 Subject: [PATCH 3/4] Update index.css --- css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 10cf7ee..ca17868 100644 --- a/css/index.css +++ b/css/index.css @@ -223,7 +223,7 @@ a[href].post-tag:focus { /* Warning */ .warning { background-color: #ffc; - color: var(--color-gray-level-50); + color: var(--color-gray-level-90); padding: 1em 0.625em; /* 16px 10px /16 */ } .warning ol:only-child { From d05fe05b862a75ff42f2802fe0777fdff766ffbe Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 29 Jun 2022 11:10:24 -0500 Subject: [PATCH 4/4] Some variable cleanup and color changes --- _includes/layouts/base.njk | 2 +- css/index.css | 93 ++++++++++++++++++++------------------ 2 files changed, 51 insertions(+), 44 deletions(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 4c4063b..a9c3217 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -26,7 +26,7 @@ -
+
  1. Edit the _data/metadata.json with your blog’s information.
  2. (Optional) Edit .eleventy.js with your configuration preferences.
    3. diff --git a/css/index.css b/css/index.css index ca17868..f83cadf 100644 --- a/css/index.css +++ b/css/index.css @@ -1,40 +1,36 @@ -/* Colors */ +/* Defaults */ :root { - /* levels go from closer to background color (0) to opposite to background color (100) */ - --color-gray-level-20: #e0e0e0; - --color-gray-level-50: #C0C0C0; - --color-gray-level-90: #333; + --font-family: -apple-system, system-ui, sans-serif; + --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace; +} - --text-color-default: #000; - --text-color-link-default: #082840; +/* Theme colors */ +:root { + --color-gray-20: #e0e0e0; + --color-gray-50: #C0C0C0; + --color-gray-90: #333; + + --background-color: #fff; + + --text-color: var(--color-gray-90); + --text-color-link: #082840; --text-color-link-visited: #17050F; - --text-color-invese: #fff; - - --background-color-default: #fff; - - - --font-family-default: -apple-system, system-ui, sans-serif; - --font-family-monospace: - Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", - "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", - "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; } @media (prefers-color-scheme: dark) { :root { - --color-gray-level-20: #e0e0e0; - --color-gray-level-50: #C0C0C0; - --color-gray-level-90: #dad8d8; + --color-gray-20: #e0e0e0; + --color-gray-50: #C0C0C0; + --color-gray-90: #dad8d8; - --text-color-default: #fff; - --text-color-link-default: #1269b0; - --text-color-link-visited: #7575a9; - --text-color-invese: #000; - - --background-color-default: #000; + /* --text-color is assigned to --color-gray-_ above */ + --text-color-link: #1493fb; + --text-color-link-visited: #a6a6f8; + + --background-color: #15202b; } } - + /* Global stylesheet */ * { @@ -45,10 +41,11 @@ html, body { padding: 0; margin: 0; - font-family: var(--font-family-default); - color: var(--text-color-default); - background-color: var(--background-color-default); + font-family: var(--font-family); + color: var(--text-color); + background-color: var(--background-color); } + p:last-child { margin-bottom: 0; } @@ -61,12 +58,14 @@ p, .tmpl-post li { line-height: 1.45; } + a[href] { - color: var(--text-color-link-default); + color: var(--text-color-link); } a[href]:visited { color: var(--text-color-link-visited); } + main { padding: 1rem; } @@ -74,13 +73,14 @@ main :first-child { margin-top: 0; } header { - border-bottom: 1px dashed var(--color-gray-level-20); + border-bottom: 1px dashed var(--color-gray-20); } header:after { content: ""; display: table; clear: both; } + table { margin: 1em 0; } @@ -106,7 +106,6 @@ pre { -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; - -moz-hyphens: none; -ms-hyphens: none; hyphens: none; padding: 1em; @@ -169,7 +168,7 @@ code { .postlist-date, .postlist-item:before { font-size: 0.8125em; /* 13px /16 */ - color: var(--color-gray-level-90); + color: var(--color-gray-90); } .postlist-date { word-spacing: -0.5px; @@ -201,8 +200,8 @@ code { margin-left: 0.6666666666667em; /* 8px /12 */ margin-top: 0.5em; /* 6px /12 */ margin-bottom: 0.5em; /* 6px /12 */ - color: var(--color-gray-level-90); - border: 1px solid var(--color-gray-level-50); + color: var(--color-gray-90); + border: 1px solid var(--color-gray-50); border-radius: 0.25em; /* 3px /12 */ text-decoration: none; line-height: 1.8; @@ -213,20 +212,28 @@ a[href].post-tag:visited { } a[href].post-tag:hover, a[href].post-tag:focus { - background-color: var(--color-gray-level-20); - color: var(--text-color-invese) + background-color: var(--color-gray-20); } .postlist-item > .post-tag { align-self: center; } -/* Warning */ -.warning { - background-color: #ffc; - color: var(--color-gray-level-90); +/* Infobox */ +:root { + --color-infobox: #ffc; +} +@media (prefers-color-scheme: dark) { + :root { + --color-infobox: #082840; + } +} + +.infobox { + background-color: var(--color-infobox); + color: var(--color-gray-90); padding: 1em 0.625em; /* 16px 10px /16 */ } -.warning ol:only-child { +.infobox ol:only-child { margin: 0; }