59 lines
2.0 KiB
CSS
59 lines
2.0 KiB
CSS
|
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--accent: #1e90ff;
|
||
|
|
--main: #111;
|
||
|
|
--bg: #eee;
|
||
|
|
--bg2: #e3e3e3;
|
||
|
|
--bg3: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dark mode alt colors */
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--main: #ddd;
|
||
|
|
--bg: #111;
|
||
|
|
--bg2: #131313;
|
||
|
|
--bg3: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark-invert {filter: invert(1);}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Layout */
|
||
|
|
body {color:var(--main);background-color: var(--bg);text-align:justify;font-family:'IBM Plex Serif', serif;font-size: 1.1em;}
|
||
|
|
main {display:block;max-width:55em;margin:1em auto;background:var(--bg);padding:2em;}
|
||
|
|
header {background: #000;line-height:2.8rem;padding:0.5em 2em;display:flex;align-items: center;justify-content:space-between;}
|
||
|
|
footer {margin: 1em;text-align: center;}
|
||
|
|
|
||
|
|
nav {display: grid;grid-auto-flow: column;grid-column-gap: 2em}
|
||
|
|
header a {text-decoration:none;font-family: 'Chakra Petch', sans-serif;}
|
||
|
|
|
||
|
|
/* Text elements */
|
||
|
|
p {line-height: 1.5em;font-weight:300;}
|
||
|
|
dfn {color:var(--accent);text-decoration: underline dashed var(--main) 1px;}
|
||
|
|
a {color: var(--accent);}
|
||
|
|
strong {font-weight: 700}
|
||
|
|
|
||
|
|
ul {list-style: none;list-style-position:inside;padding-left:1em}
|
||
|
|
ul li::before {content: "> ";color:var(--accent);margin:0;}
|
||
|
|
|
||
|
|
/* Headers */
|
||
|
|
h1,h2,h3,h4,h5,h6 {font-family: 'Chakra Petch', sans-serif;}
|
||
|
|
h1 img {height:1.8em;padding:.3em .3em .3em 0;vertical-align:middle;}
|
||
|
|
h2::before {content: "> ";color:var(--accent);}
|
||
|
|
h3::before {content: "# ";color:var(--accent);}
|
||
|
|
|
||
|
|
/* Quotes */
|
||
|
|
blockquote {display: block;font-style:italic;overflow-x: scroll;padding:1em;margin:1em;border-left: 3px solid var(--accent);}
|
||
|
|
|
||
|
|
/* Code blocks */
|
||
|
|
code {font-family: monospace; background: var(--bg3);padding:0.5em 0.5em;}
|
||
|
|
pre code {display: block;white-space: pre;overflow-x: scroll;padding:1em;margin:1em;border-left: 3px solid var(--accent);}
|
||
|
|
|
||
|
|
.boxes {margin:0;padding:0;display:flex;justify-content:space-around;gap:0.5em;}
|
||
|
|
.boxes > * {padding: 3em 1em;background:var(--accent);flex: 1 1 0;text-align:center;border-radius:0.4em;background-size:cover;text-shadow: 0 0 5px #000000;}
|
||
|
|
|
||
|
|
.status-closed {color: #FF441F;}
|
||
|
|
.status-open {color: #1FFF1F;}
|