diff options
Diffstat (limited to '_css')
-rw-r--r-- | _css/style.css | 296 |
1 files changed, 164 insertions, 132 deletions
diff --git a/_css/style.css b/_css/style.css index 0e3fb5a..7397b4a 100644 --- a/_css/style.css +++ b/_css/style.css @@ -1,80 +1,110 @@ /* Variables */ :root { - --block-bg: #eeeeec; - --fade-fg: #888a85; - --link-fg: #436e58; - --text-fg: #2e3436; + --black: #1c1b19; + --red: #ef2f27; + --green: #519f50; + --yellow: #fbb829; + --blue: #2c78bf; + --magenta: #e02c6d; + --cyan: #0aaeb3; + --white: #d0bfa1; + --bright-black: #918175; + --bright-red: #f75341; + --bright-green: #98bc37; + --bright-yellow: #fed06e; + --bright-blue: #68a8e4; + --bright-magenta: #ff5c8f; + --bright-cyan: #53fde9; + --bright-white: #fce8c3; + + --block-bg: var(--black); + --fade-fg: var(--bright-black); + --link-fg: var(--green); + --text-bg: #121212; + --text-fg: var(--bright-white); +} + +@media (prefers-color-scheme: light) { + :root { + --block-bg: #eeeeec; + --fade-fg: #888a85; + --link-fg: #436e58; + --text-bg: #ffffff; + --text-fg: #2e3436; + } } /* Default font and layout */ html { - box-sizing: border-box; - color: var(--text-fg); - max-width: 36rem; - margin: auto; - padding: 1rem; + background-color: var(--text-bg); + box-sizing: border-box; + color: var(--text-fg); + margin: auto; + max-width: 36rem; + padding: 1rem; + scrollbar-color: var(--text-fg) var(--block-bg); } /* Keep minimum font size to the usual default of 16px */ @media (min-width: 800px) { - html { - font-size: min(23px, 2vw); - margin-left: auto; - margin-right: auto; - } + html { + font-size: min(23px, 2vw); + margin-left: auto; + margin-right: auto; + } } .franklin-content .row { display: block } .franklin-content .left { - float: left; - margin-right: 1rem; + float: left; + margin-right: 1rem; } .franklin-content .right { float: right } .franklin-content .container img { - width: auto; - padding-left: 0; + width: auto; + padding-left: 0; } .franklin-content .footnote { - position: relative; - top: -0.5em; - font-size: 70%; + position: relative; + top: -0.5em; + font-size: 70%; } /* Foot/copyright */ .franklin-content .page-foot a { - text-decoration: none; - color: var(--fade-fg); - text-decoration: underline; + text-decoration: none; + color: var(--fade-fg); + text-decoration: underline; } .page-foot { - font-size: 80%; - color: var(--fade-fg); - margin: 3rem 0; + font-size: 80%; + color: var(--fade-fg); + margin: 3rem 0; } /* Text geometry */ .franklin-content p { - hyphens: auto; - line-height: 1.4rem; - text-align: justify; + hyphens: auto; + line-height: 1.4rem; + text-align: justify; } /* Titles */ .franklin-content h1 { - padding-bottom: 0.5em; - border-bottom: 3px double lightgrey; - margin-top: 2em; + padding-bottom: 0.5rem; + border-bottom: 0.15rem solid var(--fade-fg); + margin-top: 2rem; } .franklin-content h2 { - padding-bottom: 0.3em; - border-bottom: 1px solid lightgrey; - margin-top: 2em; + padding-bottom: 0.3rem; + border-bottom: 0.08rem solid var(--fade-fg); + margin-top: 2rem; } .franklin-content h1 a, @@ -83,7 +113,7 @@ html { .franklin-content h4 a, .franklin-content h5 a, .franklin-content h6 a { - color: var(--text-fg); + color: var(--text-fg); } .franklin-content h1 a:hover, @@ -92,50 +122,34 @@ html { .franklin-content h4 a:hover, .franklin-content h5 a:hover, .franklin-content h6 a:hover { - text-decoration: none; -} - -.franklin-content table { - margin-left: auto; - margin-right: auto; - border-collapse: collapse; - text-align: center; + text-decoration: none; } .franklin-toc ol ol { - list-style-type: lower-alpha; -} - -.franklin-content th, -td { - font-size: 75%; - padding: 10px; - border: 1px solid black; + list-style-type: lower-alpha; } .franklin-content blockquote { - background: var(--block-bg); - border-left: 0.25rem solid var(--fade-fg); - font-style: italic; - margin: 0; - padding: 0.5em 10px; + background: var(--block-bg); + border-left: 0.25rem solid var(--fade-fg); + font-style: italic; + margin: 0; + padding: 0.6rem 0.6rem; } .franklin-content blockquote p { display: inline } /* General formatting */ /* Spacing between bullet points. */ -.franklin-content li p { - margin: 10px 0; -} +.franklin-content li p { margin: 0.6em 0 } .franklin-content a { - color: var(--link-fg); - text-decoration: none; + color: var(--link-fg); + text-decoration: none; } .franklin-content a:hover { - text-decoration: underline; + text-decoration: underline; } /* Hyperrefs and footnotes */ @@ -143,107 +157,95 @@ td { .franklin-content .bibref a { color: green; } .franklin-content sup { - font-size: 70%; - vertical-align: super; + font-size: 70%; + vertical-align: super; } .franklin-content table.fndef { - margin: 0; - margin-bottom: 10px; + margin: 0; + margin-bottom: 0.6em; } -.franklin-content .fndef tr, -td { - padding: 0; - border: 0; - text-align: left; +.franklin-content .fndef tr, td { + padding: 0; + border: 0; + text-align: left; } .franklin-content .fndef tr { - border-left: 2px solid lightgray; + border-left: 0.1em solid var(--fade-fg); } .franklin-content .fndef td.fndef-backref { - vertical-align: top; - font-size: 70%; - padding-left: 5px; + vertical-align: top; + font-size: 70%; + padding-left: 0.04em; } .franklin-content .fndef td.fndef-content { - font-size: 80%; - padding-left: 10px; - width: 100%; + font-size: 80%; + padding-left: 0.6em; + width: 100%; } /* Images */ .franklin-content img { - width: 100%; + width: 100%; } .franklin-content .img-small img { - width: 50%; - text-align: center; - padding-left: 20%; + width: 50%; + text-align: center; + padding-left: 20%; } /* KaTeX */ -body { counter-reset: eqnum; } .katex { font-size: 1em !important; } .katex-display .katex { - /* Overwrite KaTeX settings. */ - display: inline-block; + /* Overwrite KaTeX settings. */ + display: inline-block; - /* Allow display equations to wrap on small screens. */ - white-space: normal; + /* Allow display equations to wrap on small screens. */ + white-space: normal; } /* * No numbering, for now + * body { counter-reset: eqnum } + * * .katex-display::after { - * counter-increment: eqnum; - * content: "(" counter(eqnum) ")"; - * position: relative; - * float: right; - * padding-right: 5px; + * counter-increment: eqnum; + * content: "(" counter(eqnum) ")"; + * position: relative; + * float: right; + * padding-right: 5px; * } */ -/* Code highlight */ -code, .hljs { - background-color: var(--block-bg); - padding: 0.1em 0.2em; - font-size: inherit; -} - -.hljs-meta { - color: var(--link-fg); - font-weight: bold; -} - /* Boxes */ .colbox-blue { - background-color: #729fcf42; - padding: 0.1rem 0.5rem; - border-left: 0.25rem solid #3465e4; + background-color: #51affe25; + padding: 0.1rem 0.5rem; + border-left: 0.25rem solid var(--blue); } /* Header */ header { - margin: 2rem -0.5rem; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; + margin: 2rem -0.5rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; } header a { - border-bottom: solid; - color: var(--link-fg); - font-weight: bold; - margin: 0 0.5rem; - text-decoration: none; - transition: color 0.3s ease; + border-bottom: solid; + color: var(--link-fg); + font-weight: bold; + margin: 0 0.5rem; + text-decoration: none; + transition: color 0.3s ease; } header a:hover { color: var(--text-fg) } @@ -252,15 +254,45 @@ nav ul { margin: 0 } /* Table */ table { - line-height: 1em; - margin-left: auto; - margin-right: auto; - border-collapse: collapse; - text-align: center; - margin-bottom: 1.5em; -} - -tr, th, td, table tbody tr td { border: 0.1rem solid var(--fade-fg) } -tr, th, td { padding: 0.69rem } -tr:first-of-type { background: var(--block-bg); } -tr:first-of-type > th { text-align: center } + border-bottom: 0.15em solid var(--text-fg); + border-collapse: collapse; + border-top: 0.15em solid var(--text-fg); + line-height: 1em; + margin-bottom: 1.5em; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +tr:first-of-type > th { border-bottom: 0.08em solid var(--text-fg) } +tr, th, td { padding: 0.5em } + +/* highlight.js */ +code, .hljs { + background-color: var(--block-bg); + font-size: inherit; + padding: 0.1em 0.2em; +} + +.hljs { + display: block; + line-height: 1.45em; + overflow-x: auto; +} + +.hljs-built_in .hljs-name, .hljs-title, .hljs-type { color: var(--cyan) } +.hljs-code, .hljs-selector-class { color: var(--bright-blue) } +.hljs-comment, .hljs-deletion, .hljs-meta { color: var(--fade-fg) } +.hljs-comment, .hljs-emphasis { font-style: italic; } +.hljs-string { color: var(--bright-green) } +.hljs-strong { font-weight: bold; } + +.hljs-bullet, .hljs-quote, .hljs-link, .hljs-number, +.hljs-regexp, .hljs-literal { color: var(--bright-magenta) } + +.hljs-keyword, .hljs-selector-tag, .hljs-section, +.hljs-attribute, .hljs-variable { color: var(--red) } + +.hljs-subst, .hljs-symbol, .hljs-selector-id, .hljs-selector-attr, +.hljs-selector-pseudo, .hljs-template-tag, .hljs-template-variable, +.hljs-addition { color: var(--red) } |