specter/gmi-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

light/dark mode

Browse source
This commit is contained in:
Talon Poole 2021-01-26 00:54:35 +00:00
parent d58ca6a03a
commit 7fb47e6b05
1 changed files with 78 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
gmi.css
View file

@ -14,18 +14,11 @@
--sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
}
@media (prefers-color-scheme:dark) {
--foreground: white;
--background: black
}
body {
max-width: 48rem;
background-color: var(--background);
padding: .5rem;
margin: 0 auto
margin: 0 auto;
}
h1,
h2,
h3 {
@ -34,15 +27,15 @@ h3 {
}
h1 {
font-size: 3rem
font-size: 3rem;
}
h2 {
font-size: 2.25rem
font-size: 2.25rem;
}
h3 {
font-size: 1.5rem
font-size: 1.5rem;
}
p {
@ -51,17 +44,6 @@ p {
line-height: var(--line-height);
}
h1,
h2,
h3,
p,
a,
ul,
blockquote {
color: var(--foreground);
background-color: var(--background)
}
br {
line-height: 1
}
@ -74,11 +56,6 @@ a::before {
vertical-align: middle
}
a:hover {
color: var(--background);
background-color: var(--foreground)
}
a {
font-size: var(--font-size);
font-family: var(--serif);
@ -105,7 +82,6 @@ blockquote {
font-size: var(--font-size);
font-family: var(--serif);
line-height: var(--line-height);
border-left: .5rem solid var(--foreground);
padding-left: .75rem;
}
@ -113,8 +89,6 @@ pre {
font-size: 1rem;
font-family: var(--mono);
line-height: 1;
color: var(--background);
background-color: var(--foreground);
padding: 1.25rem;
overflow-y: auto;
}
@ -124,6 +98,31 @@ pre+blockquote {
padding-bottom: .5rem;
}
/* colors */
html, body {
color: var(--foreground);
background-color: var(--background);
}
h1,
h2,
h3,
p,
a,
ul,
blockquote {
color: var(--foreground);
background-color: var(--background)
}
blockquote {
border-left: .5rem solid var(--foreground);
}
pre {
color: var(--background);
background-color: var(--foreground);
}
::selection,
::-moz-selection {
color: var(--background);
@ -135,3 +134,52 @@ pre::-moz-selection {
color: var(--foreground);
background-color: var(--background);
}
a:hover {
color: var(--background);
background-color: var(--foreground)
}
@media (prefers-color-scheme: dark) {
html, body {
color: var(--background);
background-color: var(--foreground);
}
h1,
h2,
h3,
p,
a,
ul,
blockquote {
color: var(--background);
background-color: var(--foreground)
}
blockquote {
border-left: .5rem solid var(--background);
}
pre {
color: var(--foreground);
background-color: var(--background);
}
::selection,
::-moz-selection {
color: var(--foreground);
background-color: var(--background);
}
pre::selection,
pre::-moz-selection {
color: var(--background);
background-color: var(--foreground);
}
a:hover {
color: var(--foreground);
background-color: var(--background)
}
}