diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/base.css | 147 | ||||
| -rw-r--r-- | css/terminal.css | 124 |
2 files changed, 150 insertions, 121 deletions
diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..d81d724 --- /dev/null +++ b/css/base.css @@ -0,0 +1,147 @@ +:root { + --fg: black; + --bg: #fff8e7; /* cosmic latte */ + --accent: #c588b0; +} + +/* UTILITY CLASSES */ +.inline { display: inline; } +.center { text-align: center; } +.clearfix::after { clear: both; display: block; content: ""; } + +/* MAIN STYLE */ +body { + font: 100%/1.4 sans-serif; + color: var(--fg); + background-color: var(--bg); +} +header, +section, +article { + max-width: 45rem; + padding: 1rem; + margin: auto; +} + +/* headers */ +h1 { + font: bold 200%/1 sans-serif; + margin: 0.5em 0 0 0; + border-bottom: 0.25em solid var(--accent); +} +h2 { + font: bold 168%/1 sans-serif; + margin: 0.5em 0 0 0; +} +h3 { + font: bold 141%/1 sans-serif; + margin: 0.5em 0 0 0; +} +h4 { + font: bold 119%/1 sans-serif; + margin: 0.5em 0 0 0; +} + +/* images */ +figure { + border: 1px solid; + margin: auto; + padding: 0.5em; + text-align: center; + width: min-content; +} +figure.fullwidth { + width: initial; +} +figure.fullwidth > img { + max-width: 100%; +} + +/* tables */ +table { + margin: 0.5em; +} +tr:nth-of-type(odd) { + background: var(--bg); +} +tr:nth-of-type(even) { + background: grey; +} +tr td:first-child { + white-space: nowrap; +} +td { + padding: 0 0.5em; +} +th { + border: 1px solid; + padding: 0 0.5em; +} + +/* misc */ +a:hover, +a:focus { + text-decoration: none; +} +section, +article { + border-bottom: 1px solid; +} +pre, +code { + font: 100%/1.25 monospace; +} +blockquote, +pre { + margin: 1em; + border-left: 0.25em solid; + padding-left: 1em; +} +details { + border: 1px solid; + padding: 0.5em; +} + +/* header */ +header > nav { + display: inline-block; +} +header > nav > ul { + list-style-type: none; + margin: 0 0 0.5em 0; + padding: 0; +} +header > nav > ul > li { + display: inline; +} +header > nav > ul > li > a { + padding: 0.5em; +} +header > nav a.active { + background: var(--accent); + color: var(--bg); +} +#decor-moons { + float: right; + user-select: none; + overflow: hidden; +} + +/* dark mode */ +@media(prefers-color-scheme: dark) { + :root { + --fg: #fff8e7; + --bg: #1d2021; + --accent: #ddadcc; + } + body { + line-height: 1.5; + word-spacing: 0.1em; + } + a { + color: #cedeff; + } + a:visited { + color: #d4bff8; + } +} diff --git a/css/terminal.css b/css/terminal.css index 509a1a6..98a3e5f 100644 --- a/css/terminal.css +++ b/css/terminal.css @@ -3,9 +3,9 @@ src: url("../files/fonts/DejaVuSansMono.ttf"); } :root { - --fg: #90ff90; - --link: #3e3; - --visited: #b9ffb0; + --fg: #86ff86; + --link: #42f042; + --visited: #b7ffaf; --bg: #1d2021; --bg2: black; --selection: #466639; @@ -52,41 +52,12 @@ body { background-color: var(--bg); background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%); background-size: 100% 3px; - color: var(--fg); - font: 100%/1.6 var(--font-body); - margin: auto; - max-width: 75ch; - word-spacing: .05em; } ::selection { background: var(--selection); color: white; text-shadow: none; } -a { - color: var(--link); -} -a:visited { - color: var(--visited); -} -a:hover, -a:focus { - text-decoration: none; -} -code { - font: 100%/1.25 var(--font-mono); -} -pre > code { - font: 87.5%/1.1 var(--font-mono); -} -footer { - font: 75%/1.25 var(--font-accent); -} -h1 { - font: bold 200%/1 var(--font-accent); - margin: 0.5em 0 0 0; - border-bottom: 0.25em solid; -} h1::after { content: "█"; animation: blink 2.4s steps(2) infinite; @@ -102,92 +73,3 @@ h1::after { opacity: 50%; } } -h2 { - font: bold 141%/1 var(--font-accent); - margin: 0.4em 0 0 0; -} -h3 { - font: bold 117%/1 var(--font-accent); -} -/* NAVIGATION */ -header > nav { - display: inline-block; /* forces single line nav... not ideal but works for now FIXME */ -} -header > nav > ul { - font: 100%/1.5 var(--font-accent); - list-style-type: none; - margin: 0 0 0.4em 0; - padding: 0; -} -header > nav > ul > li { - display: inline; -} -header > nav > ul > li > a { - padding: 0.4em; -} -header > nav a.active { - background: var(--fg); - color: var(--bg); -} -/* SECTION */ -main, -section, -article { - border-bottom: 1px solid; -} -/* IMAGES */ -figure { - border: 1px solid; - margin: auto; - padding: 0.4em; - text-align: center; - width: min-content; -} -figure.fullwidth { - width: initial; -} -figure.fullwidth > img { - max-width: 100%; -} -/* DETAILS */ -details { - border: 1px solid; - padding: 0.4em; -} -/* BLOCKQUOTE */ -blockquote, -pre { - margin: 1em; - border-left: 0.25em solid var(--fg); - padding-left: 1em; -} -/* TABLES */ -table { - margin: 0.4em; -} -tr:nth-of-type(odd) { - background: var(--bg); -} -tr:nth-of-type(even) { - background: var(--bg2); -} -tr td:first-child { - white-space: nowrap; -} -td { - padding: 0 0.4em; -} -th { - border: 1px solid; - padding: 0 0.4em; -} -table.center-cells td, -table.center-cells th { - text-align: center; -} -/* DECORATIONS */ -#decor-moons { - float: right; - user-select: none; - overflow: hidden; -} |