diff options
Diffstat (limited to 'Que/style.css')
-rw-r--r-- | Que/style.css | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/Que/style.css b/Que/style.css new file mode 100644 index 0000000..f8d1ca4 --- /dev/null +++ b/Que/style.css @@ -0,0 +1,136 @@ +<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> +<style> +:root { + /* base (http://chriskempson.com/projects/base16/) */ + --base00: #181818; + --base01: #282828; + --base02: #383838; + --base03: #585858; + --base04: #b8b8b8; + --base05: #d8d8d8; + --base06: #e8e8e8; + --base07: #f8f8f8; + + /* highlights */ + --base08: #ab4642; + --base09: #dc9656; + --base0A: #f7ca88; + --base0B: #a1b56c; + --base0C: #86c1b9; + --base0D: #7cafc2; + --base0E: #ba8baf; + --base0F: #a16946; +} + +/* dark theme */ +@media ( prefers-color-scheme: dark ), + ( prefers-color-scheme: no-preference ) +{ + body + { color: var(--base05); + ; background: var(--base00) + } + + header, h1, h2, h3 + { color: var(--base0A) } + + a:link, a:visited + { color: var(--base0D) } + + a:hover + { color: var(--base0C) } + + pre + { background-color: var(--base01) } + + code + { color: var(--base0B) + } + + hr + { border: 0 + ; height: 1px + ; width: 100% + ; margin: 2rem + ; background-image: linear-gradient( + to right, + /* same as --base0A */ + rgba(186, 139, 175, 0), + rgba(186, 139, 175, 0.75), + rgba(186, 139, 175, 0)) + } +} + +/* light theme */ + +@media ( prefers-color-scheme: light) +{ + body + { background-color: var(--base07) + ; color: var(--base00) + } + + a:link, a:visited + { color: var(--base0D) } + + a:hover + { color: var(--base0C) } + + pre + { background-color: var(--base06) } + + code + { color: var(--base0B) } +} + +/* structure and layout */ + +body +{ max-width: 900px +; margin: 40px auto +; padding: 0 10px +; font: 18px/1.5 + "Source Sans Pro", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji" +; display: flex +; flex-direction: column +; align-items: auto +} + +header#title-block-header, +h1, +h2, +h3 +{ line-height: 1.2 +; align-self: center +; text-transform: lowercase +} + +pre +{ padding: .5rem } + +pre, code +{ overflow-x: scroll +; white-space: pre +; font-family: "Source Code Pro", monospace; +} + +#quescripts-btn +{ border-width: 2px +; border-style: solid +} + +#quescripts-btn +{ font-size: 1.2rem +; padding: 1rem +; text-decoration: none +; text-align: center +; display: block +; max-width: 400px +; margin: auto +} +</style> |