diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 282 |
1 files changed, 191 insertions, 91 deletions
diff --git a/static/style.css b/static/style.css index dc87e2b..86f95df 100644 --- a/static/style.css +++ b/static/style.css @@ -1,79 +1,86 @@ body { - font-size: 16px; + font-size: 17px; margin: 20px auto; padding: 10px 15px; max-width: 800px; - font-family: "Merriweather", serif; + font-family: + "PT Sans", + -apple-system, + system-ui, + BlinkMacSystemFont, + sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; - line-height: 35px; + line-height: 1.5; hyphens: initial; } :root { - --dark--header-color: #fff; - --dark--p-color: #eee; - --dark--link-color: #bbf; - --dark--bg-color: #222; - --dark--blockquote-color: #ddd; - --dark--blockquote-bg-color: #60606020; - --dark--code-bg-color: #353535; - --dark--h2-bg-color: #fd501bb0; - --dark--syntax-0: #eee; - --dark--syntax-1: #ffb29a; - --dark--syntax-2: #bbf; - --dark--syntax-3: #92d392; + --dark--bg-color: #1b1f29; + --dark--p-color: #eff1f8; + --dark--header-color: #ffffff; + --dark--link-color: #5da9e9; + --dark--blockquote-color: #eff1f8; + --dark--blockquote-bg-color: #ffffff10; + --dark--code-bg-color: #ffffff0d; + --dark--h2-bg-color: #6d326d40; + + --dark--syntax-0: #eff1f8; + --dark--syntax-1: #5da9e9; + --dark--syntax-2: #f8b67b; + --dark--syntax-3: #b884b8; - --light--header-color: #1a1a1a; - --light--p-color: #101010; - --light--link-color: #007973; - --light--bg-color: #fff; - --light--blockquote-color: #606060; - --light--blockquote-bg-color: #c8c8c820; - --light--code-bg-color: #eee; - --light--h2-bg-color: #f73e0030; - --light--syntax-0: #101010; - --light--syntax-1: #f73e00; - --light--syntax-2: #007973; - --light--syntax-3: #1038d8; + --light--bg-color: #ffffff; + --light--p-color: #1a1a1a; + --light--header-color: #003f91; + --light--link-color: #3980bc; + --light--blockquote-color: #1a1a1a; + --light--blockquote-bg-color: #eff1f866; + --light--code-bg-color: #eff1f8; + --light--h2-bg-color: #6d326d1a; + + --light--syntax-0: #1a1a1a; + --light--syntax-1: #6d326d; + --light--syntax-2: #3980bc; + --light--syntax-3: #003f91; } @media (prefers-color-scheme: dark) { :root { --header-color: var(--dark--header-color); - --p-color: var(--dark--p-color); + --p-color: var(--dark--p-color); --link-color: var(--dark--link-color); --bg-color: var(--dark--bg-color); --blockquote-color: var(--dark--blockquote-color); --blockquote-bg-color: var(--dark--blockquote-bg-color); --code-bg-color: var(--dark--code-bg-color); - --h2-bg-color: var(--dark--h2-bg-color); + --h2-bg-color: var(--dark--h2-bg-color); - --syntax-0: var(--dark--syntax-0); - --syntax-1: var(--dark--syntax-1); - --syntax-2: var(--dark--syntax-2); - --syntax-3: var(--dark--syntax-3); + --syntax-0: var(--dark--syntax-0); + --syntax-1: var(--dark--syntax-1); + --syntax-2: var(--dark--syntax-2); + --syntax-3: var(--dark--syntax-3); } } @media (prefers-color-scheme: light) { :root { --header-color: var(--light--header-color); - --p-color: var(--light--p-color); + --p-color: var(--light--p-color); --link-color: var(--light--link-color); --bg-color: var(--light--bg-color); --blockquote-color: var(--light--blockquote-color); --blockquote-bg-color: var(--light--blockquote-bg-color); --code-bg-color: var(--light--code-bg-color); - --h2-bg-color: var(--light--h2-bg-color); + --h2-bg-color: var(--light--h2-bg-color); - --syntax-0: var(--light--syntax-0); - --syntax-1: var(--light--syntax-1); - --syntax-2: var(--light--syntax-2); - --syntax-3: var(--light--syntax-3); + --syntax-0: var(--light--syntax-0); + --syntax-1: var(--light--syntax-1); + --syntax-2: var(--light--syntax-2); + --syntax-3: var(--light--syntax-3); } } @@ -114,25 +121,27 @@ html { background-color: var(--bg-color); } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { color: var(--header-color); + line-height: 1.2; } -h2, h4, h6 { - padding: 0 8px; - display: inline-block; - background-color: var(--h2-bg-color); -} - -a, a:visited { +a, +a:visited { color: var(--link-color); text-decoration: none; - font-weight: bold; + font-weight: normal; cursor: pointer; text-underline-position: under; } -a:hover, a:focus { +a:hover, +a:focus { text-decoration: underline; } @@ -166,30 +175,39 @@ a:hover, a:focus { } code { - padding: 6px; - background-color: var(--code-bg-color); + padding: 3px 5px; white-space: nowrap; + border: 1px solid var(--blockquote-color); } -pre, div.sourceCode { +pre, +div.sourceCode { padding: 8px 10px; - overflow-x: scroll; + overflow-x: scroll; color: inherit; - background-color: var(--code-bg-color); } .sourceCode { - line-height: 22px; + line-height: 1.3; + border: 1px solid var(--blockquote-color); +} + +.sourceCode code, +.sourceCode pre { + border: none; } blockquote { display: block; color: var(--blockquote-color); - background-color: var(--blockquote-bg-color); border-left: 10px solid var(--link-color); margin: 20px 0; - padding: 2px 20px; - quotes: "\201C""\201D""\2018""\2019"; + padding: 2px 15px; + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +blockquote p { + margin: 10px 0; } img { @@ -232,7 +250,14 @@ small { color: var(--blockquote-color); } -ul, ol { +h1 small { + opacity: 0.65; + font-weight: 400; + font-size: 20px; +} + +ul, +ol { margin-left: 10px; } @@ -255,7 +280,7 @@ li::marker { } .archive-entry a { - line-height: 25px; + line-height: 1.5; display: block; margin-bottom: 6px; } @@ -294,37 +319,112 @@ table { p { margin: 20px 0; - line-height: 32px; + line-height: 1.5; } /* Syntax highlighting, overrides Pandoc generated styles */ -code.sourceCode span { color: var(--syntax-0); } -code span.al { color: var(--syntax-1); font-weight: bold; } /* Alert */ -code span.an { color: var(--syntax-0); font-weight: bold; font-style: italic; } /* Annotation */ -code span.at { color: var(--syntax-3); } /* Attribute */ -code span.bn { color: var(--syntax-3); } /* BaseN */ -code span.bu { color: var(--syntax-3); } /* BuiltIn */ -code span.cf { color: var(--syntax-3); font-weight: bold; } /* ControlFlow */ -code span.ch { color: var(--syntax-2); } /* Char */ -code span.cn { color: var(--syntax-3); } /* Constant */ -code span.co { color: var(--syntax-0); font-style: italic; opacity: 0.7; } /* Comment */ -code span.cv { color: var(--syntax-2); font-weight: bold; font-style: italic; } /* CommentVar */ -code span.do { color: var(--syntax-0); font-style: italic; } /* Documentation */ -code span.dt { color: var(--syntax-1); } /* DataType */ -code span.dv { color: var(--syntax-3); } /* DecVal */ -code span.er { color: var(--syntax-1); font-weight: bold; } /* Error */ -code span.ex { } /* Extension */ -code span.fl { color: var(--syntax-3); } /* Float */ -code span.fu { color: var(--syntax-1); } /* Function */ -code span.im { color: var(--syntax-3); font-weight: bold; } /* Import */ -code span.in { color: var(--syntax-3); font-weight: bold; font-style: italic; } /* Information */ -code span.kw { color: var(--syntax-3); font-weight: bold; } /* Keyword */ -code span.op { color: var(--syntax-2); } /* Operator */ -code span.ot { color: var(--syntax-0); } /* Other */ -code span.pp { color: var(--syntax-1); } /* Preprocessor */ -code span.sc { color: var(--syntax-2); } /* SpecialChar */ -code span.ss { color: var(--syntax-2); } /* SpecialString */ -code span.st { color: var(--syntax-2); } /* String */ -code span.va { color: var(--syntax-1); } /* Variable */ -code span.vs { color: var(--syntax-2); } /* VerbatimString */ -code span.wa { color: var(--syntax-3); font-weight: bold; font-style: italic; } +code.sourceCode span { + color: var(--syntax-0); +} +code span.al { + color: var(--syntax-1); + font-weight: bold; +} /* Alert */ +code span.an { + color: var(--syntax-0); + font-weight: bold; + font-style: italic; +} /* Annotation */ +code span.at { + color: var(--syntax-3); +} /* Attribute */ +code span.bn { + color: var(--syntax-3); +} /* BaseN */ +code span.bu { + color: var(--syntax-3); +} /* BuiltIn */ +code span.cf { + color: var(--syntax-3); + font-weight: bold; +} /* ControlFlow */ +code span.ch { + color: var(--syntax-2); +} /* Char */ +code span.cn { + color: var(--syntax-3); +} /* Constant */ +code span.co { + color: var(--syntax-0); + font-style: italic; + opacity: 0.7; +} /* Comment */ +code span.cv { + color: var(--syntax-2); + font-weight: bold; + font-style: italic; +} /* CommentVar */ +code span.do { + color: var(--syntax-0); + font-style: italic; +} /* Documentation */ +code span.dt { + color: var(--syntax-1); +} /* DataType */ +code span.dv { + color: var(--syntax-3); +} /* DecVal */ +code span.er { + color: var(--syntax-1); + font-weight: bold; +} /* Error */ +code span.ex { +} /* Extension */ +code span.fl { + color: var(--syntax-3); +} /* Float */ +code span.fu { + color: var(--syntax-1); +} /* Function */ +code span.im { + color: var(--syntax-3); + font-weight: bold; +} /* Import */ +code span.in { + color: var(--syntax-3); + font-weight: bold; + font-style: italic; +} /* Information */ +code span.kw { + color: var(--syntax-3); + font-weight: bold; +} /* Keyword */ +code span.op { + color: var(--syntax-2); +} /* Operator */ +code span.ot { + color: var(--syntax-0); +} /* Other */ +code span.pp { + color: var(--syntax-1); +} /* Preprocessor */ +code span.sc { + color: var(--syntax-2); +} /* SpecialChar */ +code span.ss { + color: var(--syntax-2); +} /* SpecialString */ +code span.st { + color: var(--syntax-2); +} /* String */ +code span.va { + color: var(--syntax-1); +} /* Variable */ +code span.vs { + color: var(--syntax-2); +} /* VerbatimString */ +code span.wa { + color: var(--syntax-3); + font-weight: bold; + font-style: italic; +} |