cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce dark mode and add fonts to base variables

Browse Source
This commit is contained in:
Mohsen Azimi 2022-03-19 20:38:41 -03:00 committed by GitHub
parent dc3e7c49f2
commit 44dbdc7c80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css/index.css
View File

@ -1,13 +1,41 @@
/* Colors */ /* Colors */
:root { :root {
--lightgray: #e0e0e0; /* levels go from closer to background color (0) to opposite to background color (100) */
--gray: #C0C0C0; --color-gray-level-20: #e0e0e0;
--darkgray: #333; --color-gray-level-50: #C0C0C0;
--navy: #17050F; --color-gray-level-90: #333;
--blue: #082840;
--white: #fff; --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 */ /* Global stylesheet */
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -17,9 +45,9 @@ html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: -apple-system, system-ui, sans-serif; font-family: var(--font-family-default);
color: var(--darkgray); color: var(--text-color-default);
background-color: var(--white); background-color: var(--background-color-default);
} }
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -34,10 +62,10 @@ p,
line-height: 1.45; line-height: 1.45;
} }
a[href] { a[href] {
color: var(--blue); color: var(--text-color-link-default);
} }
a[href]:visited { a[href]:visited {
color: var(--navy); color: var(--text-color-link-visited);
} }
main { main {
padding: 1rem; padding: 1rem;
@ -46,7 +74,7 @@ main :first-child {
margin-top: 0; margin-top: 0;
} }
header { header {
border-bottom: 1px dashed var(--lightgray); border-bottom: 1px dashed var(--color-gray-level-20);
} }
header:after { header:after {
content: ""; content: "";
@ -63,7 +91,7 @@ table th {
pre, pre,
code { 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; line-height: 1.5;
} }
pre { pre {
@ -141,7 +169,7 @@ code {
.postlist-date, .postlist-date,
.postlist-item:before { .postlist-item:before {
font-size: 0.8125em; /* 13px /16 */ font-size: 0.8125em; /* 13px /16 */
color: var(--darkgray); color: var(--color-gray-level-90);
} }
.postlist-date { .postlist-date {
word-spacing: -0.5px; word-spacing: -0.5px;
@ -173,8 +201,8 @@ code {
margin-left: 0.6666666666667em; /* 8px /12 */ margin-left: 0.6666666666667em; /* 8px /12 */
margin-top: 0.5em; /* 6px /12 */ margin-top: 0.5em; /* 6px /12 */
margin-bottom: 0.5em; /* 6px /12 */ margin-bottom: 0.5em; /* 6px /12 */
color: var(--darkgray); color: var(--color-gray-level-90);
border: 1px solid var(--gray); border: 1px solid var(--color-gray-level-50);
border-radius: 0.25em; /* 3px /12 */ border-radius: 0.25em; /* 3px /12 */
text-decoration: none; text-decoration: none;
line-height: 1.8; line-height: 1.8;
@ -185,7 +213,8 @@ a[href].post-tag:visited {
} }
a[href].post-tag:hover, a[href].post-tag:hover,
a[href].post-tag:focus { 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 { .postlist-item > .post-tag {
align-self: center; align-self: center;