eric/the-monospace-web-pandoc
1
0
Fork 0
mirror of https://github.com/frainfreeze/the-monospace-web-pandoc synced 2025-12-30 02:59:50 -08:00
Code Issues Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
Oskar Wickström
2024-08-22 22:32:11 +02:00
parent 8adba46abe
commit 86bb6c7944
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
index.css
View File

@@ -3,6 +3,8 @@
--line-height: 1.25rem; --line-height: 1.25rem;
--border-thickness: 2px; --border-thickness: 2px;
--bold-weight: 700; --bold-weight: 700;
--text-color: #000;
--background-color: #fff;
font-family: var(--font-family); font-family: var(--font-family);
font-optical-sizing: auto; font-optical-sizing: auto;
@@ -32,8 +34,8 @@ html {
padding: 0; padding: 0;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #fff; background: var(--background-color);
color: #000; color: var(--text-color);
} }
body { body {
@@ -76,7 +78,7 @@ hr {
height: var(--line-height); height: var(--line-height);
margin: calc(var(--line-height) * 1.5) 0; margin: calc(var(--line-height) * 1.5) 0;
border: none; border: none;
color: #000; color: var(--text-color);
} }
hr:after { hr:after {
display: block; display: block;
@@ -85,7 +87,7 @@ hr:after {
top: calc(var(--line-height) / 2 - var(--border-thickness)); top: calc(var(--line-height) / 2 - var(--border-thickness));
left: 0; left: 0;
width: 100%; width: 100%;
border-top: calc(var(--border-thickness) * 3) double #000; border-top: calc(var(--border-thickness) * 3) double var(--text-color);
height: 0; height: 0;
} }
@@ -93,11 +95,8 @@ a {
text-decoration-thickness: var(--border-thickness); text-decoration-thickness: var(--border-thickness);
} }
a:link { a:link, a:visited {
color: #000; color: var(--text-color);
}
a:visited {
color: #333;
} }
p { p {
@@ -130,7 +129,7 @@ table {
} }
th, td { th, td {
border: var(--border-thickness) solid #000; border: var(--border-thickness) solid var(--text-color);
padding: padding:
calc((var(--line-height) / 2)) calc((var(--line-height) / 2))
calc(1ch - var(--border-thickness) / 2) calc(1ch - var(--border-thickness) / 2)
@@ -233,7 +232,7 @@ li {
position: relative; position: relative;
padding-left: 1.5ch; padding-left: 1.5ch;
margin-left: 1.5ch; margin-left: 1.5ch;
border-left: var(--border-thickness) solid #000; border-left: var(--border-thickness) solid var(--text-color);
} }
.tree ul li:before { .tree ul li:before {
position: absolute; position: absolute;
@@ -242,7 +241,7 @@ li {
left: 0; left: 0;
content: ""; content: "";
width: 1ch; width: 1ch;
border-bottom: var(--border-thickness) solid #000; border-bottom: var(--border-thickness) solid var(--text-color);
} }
.tree ul li:last-child { .tree ul li:last-child {
border-left: none; border-left: none;
@@ -254,13 +253,13 @@ li {
left: 0; left: 0;
content: ""; content: "";
height: calc(var(--line-height) / 2); height: calc(var(--line-height) / 2);
border-left: var(--border-thickness) solid #000; border-left: var(--border-thickness) solid var(--text-color);
} }
/* DEBUG UTILITIES */ /* DEBUG UTILITIES */
.grid { .grid {
--color: #eeeeff; --color: color-mix(in srgb, var(--text-color) 10%, var(--background-color) 90%);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -279,3 +278,10 @@ li {
body :not(.grid) { body :not(.grid) {
/*background: rgba(255, 0, 0, 0.1);*/ /*background: rgba(255, 0, 0, 0.1);*/
} }
@media (prefers-color-scheme: dark) {
:root {
--text-color: #fff;
--background-color: #000;
}
}