From 903fff4be7c45de2c68a19847bf57095d5e4512f Mon Sep 17 00:00:00 2001 From: Adrian Cochrane Date: Sat, 26 Jun 2021 12:32:16 +1200 Subject: [PATCH] Add stylesheet based on elementary OS & Solarized, with darkmode. --- assets/pantheon.css | 66 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 assets/pantheon.css diff --git a/assets/pantheon.css b/assets/pantheon.css new file mode 100644 index 0000000..cbad00c --- /dev/null +++ b/assets/pantheon.css @@ -0,0 +1,66 @@ +/* Styles inspired by elementary OS's Pantheon desktop, & Solarized Light. */ + +:root { + --silver100: #fafafa; + --silver300: #d4d4d4; + --silver500: #abacae; + --silver700: #7e8087; + --silver900: #555761; + + --black100: #666; + --black300: #4d4d4d; + --black500: #333; + --black700: #1a1a1a; + --black900: #000; +} +body {font-family: sans-serif;} +body.fill {padding: 0; margin: 0;} +body.fill > :only-child {height: 100%} + +header, footer, main { + display: flex; + flex-direction: row; + align-items: center; + padding: 2px; +} +header {background: var(--silver500); border-bottom: thin solid black;} +footer {border-top: thin solid var(--silver500)} +main {align-items: stretch; padding: 0} +main > :not(iframe) {padding: 2px} +header > hr, footer > hr { + border: none; + flex-grow: 1; +} +main > *:not(aside) {flex-grow: 2} +main > aside {background: var(--silver300); flex-grow: 1; min-width: 100px;} +iframe {width: 100%; border: none;} + +/* --- */ + +blockquote { /* Only being used for code..., though appropriate I'm quoting that code from the download. */ + background: #fdf6e3; color: #586e75; padding: 5px; margin: 0; font: monospace; + voice-family: inherit; +} +.tok-symbol {color: #586e75; speak-as: spell-out literal-punctuation; pause: none; rest: none;} +.tok-qualify {color: #cb4b16; voice-stress: strong voice-volume: soft;} +.tok-keyword {color: #6c71c4; voice-stress: reduced} +.tok-ident {color: #dc322f; voice-stress: strong;} +.tok-string {color: #859900; voice-pitch: high;} +.tok-comment {color: #839496; voice-volume: soft;} + +@media (prefers-color-scheme: dark) { + body { + background: var(--black700); + color: var(--silver300); + } + main > aside, header {background: var(--black500)} + blockquote {background: #002b36; color: #93a1a1} + .tok-symbol {color: #93a1a1} +} + +/* --- */ + +.silent {speak: never} +dl > dt {font-weight: bold; text-align: center;} +dl > dd {margin: 0;} +.disclosure {float: right} -- 2.30.2