diff --git a/.gitignore b/.gitignore index 46f5006..f1876b9 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ public/* +static/syntax-theme-light.css +static/syntax-theme-dark.css +simple.css diff --git a/config.toml b/config.toml index 3028cc6..91f1d18 100644 --- a/config.toml +++ b/config.toml @@ -11,7 +11,11 @@ build_search_index = true # Whether to do syntax highlighting # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola highlight_code = true -highlight_theme = "Ungol" +highlight_theme = "css" +highlight_themes_css = [ + { theme = "ungol-dark", filename = "syntax-theme-dark.css" }, + { theme = "ungol-light", filename = "syntax-theme-light.css" }, +] extra_syntaxes_and_themes = ["highlight_themes"] [extra] diff --git a/highlight_themes/Ungol.tmTheme b/highlight_themes/ungol-dark.tmTheme similarity index 99% rename from highlight_themes/Ungol.tmTheme rename to highlight_themes/ungol-dark.tmTheme index 96b86e5..d9f95d2 100644 --- a/highlight_themes/Ungol.tmTheme +++ b/highlight_themes/ungol-dark.tmTheme @@ -7,7 +7,7 @@ name - Ungol + ungol-dark settings diff --git a/highlight_themes/ungol-light.tmTheme b/highlight_themes/ungol-light.tmTheme new file mode 100644 index 0000000..a4644f5 --- /dev/null +++ b/highlight_themes/ungol-light.tmTheme @@ -0,0 +1,405 @@ + + + + + + + + + name + ungol-light + settings + + + settings + + background + #012A4A + caret + #D0D4FC + foreground + #D0D4FC + invisibles + #012A4A + lineHighlight + #012A4A + selection + #475569 + + + + name + Comment + scope + comment + settings + + foreground + #264f8aff + + + + name + String + scope + string + settings + + foreground + #ffba72ff + + + + name + Number + scope + constant.numeric + settings + + foreground + #73f4ffff + + + + name + Built-in constant + scope + constant.language + settings + + foreground + #73f4ffff + + + + name + User-defined constant + scope + constant.character, constant.other + settings + + foreground + #73f4ffff + + + + name + Variable + scope + variable + settings + + fontStyle + + foreground + #98D7F6 + + + + name + Keyword + scope + keyword + settings + + foreground + #f53c5eff + + + + name + Storage + scope + storage + settings + + fontStyle + + foreground + #f53c5eff + + + + name + Storage type + scope + storage.type + settings + + fontStyle + italic + foreground + #2af89eff + + + + name + Class name + scope + entity.name.class + settings + + fontStyle + underline + foreground + #f2a8ffff + + + + name + Inherited class + scope + entity.other.inherited-class + settings + + fontStyle + italic underline + foreground + #f2a8ffff + + + + name + Function name + scope + entity.name.function + settings + + fontStyle + + foreground + #5ba4ffff + + + + name + Function argument + scope + variable.parameter + settings + + fontStyle + italic + foreground + #a586ffff + + + + name + Tag name + scope + entity.name.tag + settings + + fontStyle + + foreground + #a586ffff + + + + name + Tag attribute + scope + entity.other.attribute-name + settings + + fontStyle + + foreground + #f2a8ffff + + + + name + Library function + scope + support.function + settings + + fontStyle + + foreground + #5ba4ffff + + + + name + Library constant + scope + support.constant + settings + + fontStyle + + foreground + #73f4ffff + + + + name + Library class/type + scope + support.type, support.class + settings + + fontStyle + italic + foreground + #f2a8ffff + + + + name + Library variable + scope + support.other.variable + settings + + fontStyle + + + + + name + Invalid + scope + invalid + settings + + background + #f53c5eff + fontStyle + + foreground + #fcfcecff + + + + name + Invalid deprecated + scope + invalid.deprecated + settings + + background + #a586ffff + foreground + #fcfcecff + + + + name + JSON String + scope + meta.structure.dictionary.json string.quoted.double.json + settings + + foreground + #ffba72ff + + + + name + YAML String + scope + string.unquoted.yaml + settings + + foreground + #ffba72ff + + + + name + diff.header + scope + meta.diff, meta.diff.header + settings + + foreground + #264f8aff + + + + name + diff.deleted + scope + markup.deleted + settings + + foreground + #f53c5eff + + + + name + diff.inserted + scope + markup.inserted + settings + + foreground + #2af89eff + + + + name + diff.changed + scope + markup.changed + settings + + foreground + #ffba72ff + + + + scope + constant.numeric.line-number.find-in-files - match + settings + + foreground + #ae81ffa1 + + + + scope + entity.name.filename + settings + + foreground + #ffef5bff + + + + scope + message.error + settings + + foreground + #ff2c2cff + + + + name + Text + scope + source + settings + + background + + foreground + #D0D4FC + + + + uuid + 0F6F380F-CBFE-4B50-8B01-CFC3034F5DF1 + colorSpaceName + sRGB + semanticClass + theme.light.ungol_light + + \ No newline at end of file diff --git a/static/custom.css b/static/custom.css index 34657d5..bcf0f9c 100644 --- a/static/custom.css +++ b/static/custom.css @@ -1,21 +1,26 @@ :root { - --sans-font: "Ubuntu Nerd Font", Arial, Helvetica, "Helvetica Neue", sans-serif; + --sans-font: "Ubuntu Nerd Font", Arial, Helvetica, sans-serif; --mono-font: "UbuntuMono Nerd Font", monospace; --standard-border-radius: .8rem; /* Light theme */ - --bg: #d1dbe4; - --accent-bg: #a3b7ca; - --text: #212121; - --text-light: #7593af; - --border: #ededf0; - --code: #194a7a; - --preformatted: #476f95; - --marked: #7593af; - --accent: #194a7a; - --accent-hover: #476f95; - --accent-text: var(--bg); - --accent-disabled: ##a3b7ca; + --bg: #FBFBFF; + --text: #093D8D; + --text-light: #2F2997; + --link-text: #6872E5; + --link-text-hover: #32325D; + --border: #B2AFE9; + --border-light: #98D7F6; + --code: #0284C7; + --code-background: #F4F8FF; + --preformatted: #012a4a; + --accent: #008BDF; + --accent-bg: #F5F5FC; + --accent-hover: #E0E0E0; + --accent-text: var(--bg); + --accent-disabled: #2F5977; + --table-border: #ECEBFA; + --table-alternate: #F5F6FC; } /* Dark theme */ @@ -27,9 +32,10 @@ --text-light: #A9AED2; --link-text: #83C3F3; --link-text-hover: #DBEAFE; - --border: #d0d4fc; + --border: var(--text); --border-light: #475569; --code: #A5B4FC; + --code-background: #0F172A; --preformatted: #0F172A; --accent: #60A5FA; --accent-bg: #293548; @@ -47,19 +53,36 @@ } } +*, *::before, *::after { + box-sizing: border-box; +} + +textarea, +select, +input, +progress { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; +} + +html { + font-family: var(--sans-font); + scroll-behavior: smooth; +} + body { + color: var(--text); + background-color: var(--bg); font-size: 1rem; - grid-template-columns: 1fr min(55rem, 90%) 1fr; + line-height: 1.5; + display: grid; + grid-template-columns: 1fr min(50rem, 90%) 1fr; + margin: 0; } -a, -a:visited { - color: var(--link-text); - text-decoration: none; -} - -a:hover { - color: var(--link-text-hover); +body > * { + grid-column: 2; } .button[aria-disabled="true"], @@ -73,6 +96,7 @@ button[disabled] { color: var(--text-light); } +h1.title, header > h1 { color: var(--accent); } @@ -109,6 +133,20 @@ h6 { font-weight: lighter; } +p { + margin: 1.5rem 0; +} + +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +h1, +h2, +h3 { + line-height: 1.1; +} + @media only screen and (max-width: 720px) { h1 { font-size: 2.5rem; @@ -131,14 +169,87 @@ h6 { } } +a, +a:visited { + color: var(--link-text); + text-decoration: none; +} + +a:hover { + color: var(--link-text-hover); +} + +abbr[title] { + cursor: help; + text-decoration-line: underline; + text-decoration-style: dotted; +} + +aside, details, pre, progress { + background-color: var(--accent-bg); + border: 1px solid var(--border); + border-radius: var(--standard-border-radius); + margin-bottom: 1rem; +} + +article h2:first-child, +section h2:first-child, +article h3:first-child, +section h3:first-child { + margin-top: 1rem; +} + +section { + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + padding: 2rem 1rem; + margin: 3rem 0; +} + +section + section, +section:first-child { + border-top: 0; + padding-top: 0; +} + +section + section { + margin-top: 0; +} + +section:last-child { + border-bottom: 0; + padding-bottom: 0; +} /* Tables */ + +table { + border-collapse: separate; + border-spacing: 0; + margin: 1.5rem 0; +} + +figure > table { + width: max-content; + margin: 0; +} + td, th { padding: 0.5rem; padding: 1rem 1.5rem; border-style: solid; + border-width: .1rem; border-color: var(--table-border); + text-align: start; +} + +th { + background-color: var(--bg); + text-transform: uppercase; + font-weight: bold; + font-size: small; + border: none } tr:first-child > td:first-child { @@ -173,34 +284,164 @@ tr:last-child > td { border-bottom-width: .15rem; } -table { - border-collapse: separate; - border-spacing: 0; - box-sizing: border-box; -} - -th { - background-color: var(--bg); - text-transform: uppercase; - font-weight: bold; - font-size: small; - border: none -} - tr:nth-child(even) td { /* Set every other cell slightly darker. Improves readability. */ background-color: var(--table-alternate); } -tr:nth-child(even) { - /* Set every other cell slightly darker. Improves readability. */ - background-color: var(--bg); -} - table caption { margin-bottom: 0.5rem; } +ul > li::marker, ol > li::marker { + color: var(--accent); +} + +ul { + list-style-type: disc; +} + +li:has(input) { + list-style-type: none; +} + +/* Forms */ + +textarea, +select, +input, +button, +.button { + font-size: inherit; + font-family: inherit; + padding: 0.5rem; + margin-bottom: 0.5rem; + border-radius: var(--standard-border-radius); + box-shadow: none; + max-width: 100%; + display: inline-block; +} +textarea, +select, +input { + color: var(--text); + background-color: var(--bg); + border: 1px solid var(--border); +} +label { + display: block; +} +textarea:not([cols]) { + width: 100%; +} + +/* checkbox and radio button style */ +input[type="checkbox"], +input[type="radio"] { + vertical-align: middle; + position: relative; + width: min-content; +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; +} + +input[type="radio"] { + border-radius: 100%; +} + +input[type="checkbox"]:checked, +input[type="radio"]:checked { + background-color: var(--accent); +} + +input[type="checkbox"]:checked::after { + /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */ + content: " "; + width: 0.18em; + height: 0.32em; + border-radius: 0; + position: absolute; + top: 0.05em; + left: 0.17em; + background-color: transparent; + border-right: solid var(--bg) 0.08em; + border-bottom: solid var(--bg) 0.08em; + font-size: 1.8em; + transform: rotate(45deg); +} +input[type="radio"]:checked::after { + /* creates a colored circle for the checked radio button */ + content: " "; + width: 0.25em; + height: 0.25em; + border-radius: 100%; + position: absolute; + top: 0.125em; + background-color: var(--bg); + left: 0.125em; + font-size: 32px; +} + +img, +video { + max-width: 100%; + height: auto; + border-radius: var(--standard-border-radius); +} + +figure { + margin: 0; + display: block; + overflow-x: auto; +} + +figure > img, +figure > picture > img { + display: block; + margin-inline: auto; +} + +blockquote { + margin-inline-start: 2rem; + margin-inline-end: 2rem; + margin-block: 2rem; + padding: 0.4rem 0.8rem; + color: var(--text-light); + background-color: var(--accent-bg); + border-inline-start: none; + border-color: var(--border); + border-radius: var(--standard-border-radius); + border-style: dashed; + border-width: .1rem; + font-style: italic; +} + +cite { + font-size: 0.9rem; + color: var(--text-light); + font-style: normal; +} + +code, +pre, +pre span, +kbd, +samp { + font-family: var(--mono-font); + color: var(--code); +} + +kbd { + color: var(--text); + background-color: var(--code-background); + border-color: var(--border); + border-style: solid; + border-width: .1rem; +} + pre { color: var(--text); padding: 1rem 1.4rem; @@ -226,9 +467,10 @@ pre table td:nth-of-type(1) { samp, code { - background-color: var(--preformatted); + background-color: var(--code-background); border-radius: .25rem; - border-width: 1px; + border-style: dashed; + border-width: 0.05rem; border-color: var(--border-light); font-size: .85rem; font-weight: 500; @@ -237,41 +479,6 @@ code { } pre code { - border-style: none -} - - -ul > li::marker, ol > li::marker { - color: var(--accent); -} - -ul { - list-style-type: disc; -} - -li:has(input) { - list-style-type: none; -} - -kbd { - color: var(--text); + border-style: none; background-color: var(--preformatted); - border-color: var(--border); - border-style: solid; - border-width: .1rem; -} - -blockquote { - margin-inline-start: 2rem; - margin-inline-end: 2rem; - margin-block: 2rem; - padding: 0.4rem 0.8rem; - color: var(--text-light); - background-color: var(--accent-bg); - border-inline-start: none; - border-color: var(--border); - border-radius: var(--standard-border-radius); - border-style: dashed; - border-width: .1rem; - font-style: italic; -} +} \ No newline at end of file diff --git a/static/simple.css b/static/simple.css deleted file mode 100644 index 095fe7b..0000000 --- a/static/simple.css +++ /dev/null @@ -1,754 +0,0 @@ -/* Global variables. */ -:root { - /* Set sans-serif & mono fonts */ - --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, - "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, - "Helvetica Neue", sans-serif; - --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; - --standard-border-radius: 5px; - - /* Default (light) theme */ - --bg: #fff; - --accent-bg: #f5f7ff; - --text: #212121; - --text-light: #585858; - --border: #898EA4; - --accent: #0d47a1; - --accent-hover: #1266e2; - --accent-text: var(--bg); - --code: #d81b60; - --preformatted: #444; - --marked: #ffdd33; - --disabled: #efefef; -} - -/* Dark theme */ -@media (prefers-color-scheme: dark) { - :root { - color-scheme: dark; - --bg: #212121; - --accent-bg: #2b2b2b; - --text: #dcdcdc; - --text-light: #ababab; - --accent: #ffb300; - --accent-hover: #ffe099; - --accent-text: var(--bg); - --code: #f06292; - --preformatted: #ccc; - --disabled: #111; - } - /* Add a bit of transparency so light media isn't so glaring in dark mode */ - img, - video { - opacity: 0.8; - } -} - -/* Reset box-sizing */ -*, *::before, *::after { - box-sizing: border-box; -} - -/* Reset default appearance */ -textarea, -select, -input, -progress { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; -} - -html { - /* Set the font globally */ - font-family: var(--sans-font); - scroll-behavior: smooth; -} - -/* Make the body a nice central block */ -body { - color: var(--text); - background-color: var(--bg); - font-size: 1.15rem; - line-height: 1.5; - display: grid; - grid-template-columns: 1fr min(45rem, 90%) 1fr; - margin: 0; -} -body > * { - grid-column: 2; -} - -/* Make the header bg full width, but the content inline with body */ -body > header { - background-color: var(--accent-bg); - border-bottom: 1px solid var(--border); - text-align: center; - padding: 0 0.5rem 2rem 0.5rem; - grid-column: 1 / -1; -} - -body > header > *:only-child { - margin-block-start: 2rem; -} - -body > header h1 { - max-width: 1200px; - margin: 1rem auto; -} - -body > header p { - max-width: 40rem; - margin: 1rem auto; -} - -/* Add a little padding to ensure spacing is correct between content and header nav */ -main { - padding-top: 1.5rem; -} - -body > footer { - margin-top: 4rem; - padding: 2rem 1rem 1.5rem 1rem; - color: var(--text-light); - font-size: 0.9rem; - text-align: center; - border-top: 1px solid var(--border); -} - -/* Format headers */ -h1 { - font-size: 3rem; -} - -h2 { - font-size: 2.6rem; - margin-top: 3rem; -} - -h3 { - font-size: 2rem; - margin-top: 3rem; -} - -h4 { - font-size: 1.44rem; -} - -h5 { - font-size: 1.15rem; -} - -h6 { - font-size: 0.96rem; -} - -p { - margin: 1.5rem 0; -} - -/* Prevent long strings from overflowing container */ -p, h1, h2, h3, h4, h5, h6 { - overflow-wrap: break-word; -} - -/* Fix line height when title wraps */ -h1, -h2, -h3 { - line-height: 1.1; -} - -/* Reduce header size on mobile */ -@media only screen and (max-width: 720px) { - h1 { - font-size: 2.5rem; - } - - h2 { - font-size: 2.1rem; - } - - h3 { - font-size: 1.75rem; - } - - h4 { - font-size: 1.25rem; - } -} - -/* Format links & buttons */ -a, -a:visited { - color: var(--accent); -} - -a:hover { - text-decoration: none; -} - -button, -.button, -a.button, /* extra specificity to override a */ -input[type="submit"], -input[type="reset"], -input[type="button"] { - border: 1px solid var(--accent); - background-color: var(--accent); - color: var(--accent-text); - padding: 0.5rem 0.9rem; - text-decoration: none; - line-height: normal; -} - -.button[aria-disabled="true"], -input:disabled, -textarea:disabled, -select:disabled, -button[disabled] { - cursor: not-allowed; - background-color: var(--disabled); - border-color: var(--disabled); - color: var(--text-light); -} - -input[type="range"] { - padding: 0; -} - -/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */ -abbr[title] { - cursor: help; - text-decoration-line: underline; - text-decoration-style: dotted; -} - -button:enabled:hover, -.button:not([aria-disabled="true"]):hover, -input[type="submit"]:enabled:hover, -input[type="reset"]:enabled:hover, -input[type="button"]:enabled:hover { - background-color: var(--accent-hover); - border-color: var(--accent-hover); - cursor: pointer; -} - -.button:focus-visible, -button:focus-visible:where(:enabled), -input:enabled:focus-visible:where( - [type="submit"], - [type="reset"], - [type="button"] -) { - outline: 2px solid var(--accent); - outline-offset: 1px; -} - -/* Format navigation */ -header nav { - font-size: 1rem; - line-height: 2; - padding: 1rem 0 0 0; -} - -/* Use flexbox to allow items to wrap, as needed */ -header nav ul, -header nav ol { - align-content: space-around; - align-items: center; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - list-style-type: none; - margin: 0; - padding: 0; -} - -/* List items are inline elements, make them behave more like blocks */ -header nav ul li, -header nav ol li { - display: inline-block; -} - -header nav a, -header nav a:visited { - margin: 0 0.5rem 1rem 0.5rem; - border: 1px solid var(--border); - border-radius: var(--standard-border-radius); - color: var(--text); - display: inline-block; - padding: 0.1rem 1rem; - text-decoration: none; -} - -header nav a:hover, -header nav a.current, -header nav a[aria-current="page"], -header nav a[aria-current="true"] { - border-color: var(--accent); - color: var(--accent); - cursor: pointer; -} - -/* Reduce nav side on mobile */ -@media only screen and (max-width: 720px) { - header nav a { - border: none; - padding: 0; - text-decoration: underline; - line-height: 1; - } -} - -/* Consolidate box styling */ -aside, details, pre, progress { - background-color: var(--accent-bg); - border: 1px solid var(--border); - border-radius: var(--standard-border-radius); - margin-bottom: 1rem; -} - -aside { - font-size: 1rem; - width: 30%; - padding: 0 15px; - margin-inline-start: 15px; - float: right; -} -*[dir="rtl"] aside { - float: left; -} - -/* Make aside full-width on mobile */ -@media only screen and (max-width: 720px) { - aside { - width: 100%; - float: none; - margin-inline-start: 0; - } -} - -article, fieldset, dialog { - border: 1px solid var(--border); - padding: 1rem; - border-radius: var(--standard-border-radius); - margin-bottom: 1rem; -} - -article h2:first-child, -section h2:first-child, -article h3:first-child, -section h3:first-child { - margin-top: 1rem; -} - -section { - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); - padding: 2rem 1rem; - margin: 3rem 0; -} - -/* Don't double separators when chaining sections */ -section + section, -section:first-child { - border-top: 0; - padding-top: 0; -} - -section + section { - margin-top: 0; -} - -section:last-child { - border-bottom: 0; - padding-bottom: 0; -} - -details { - padding: 0.7rem 1rem; -} - -summary { - cursor: pointer; - font-weight: bold; - padding: 0.7rem 1rem; - margin: -0.7rem -1rem; - word-break: break-all; -} - -details[open] > summary + * { - margin-top: 0; -} - -details[open] > summary { - margin-bottom: 0.5rem; -} - -details[open] > :last-child { - margin-bottom: 0; -} - -/* Format tables */ -table { - border-collapse: collapse; - margin: 1.5rem 0; -} - -figure > table { - width: max-content; - margin: 0; -} - -td, -th { - border: 1px solid var(--border); - text-align: start; - padding: 0.5rem; -} - -th { - background-color: var(--accent-bg); - font-weight: bold; -} - -tr:nth-child(even) { - /* Set every other cell slightly darker. Improves readability. */ - background-color: var(--accent-bg); -} - -table caption { - font-weight: bold; - margin-bottom: 0.5rem; -} - -/* Format forms */ -textarea, -select, -input, -button, -.button { - font-size: inherit; - font-family: inherit; - padding: 0.5rem; - margin-bottom: 0.5rem; - border-radius: var(--standard-border-radius); - box-shadow: none; - max-width: 100%; - display: inline-block; -} -textarea, -select, -input { - color: var(--text); - background-color: var(--bg); - border: 1px solid var(--border); -} -label { - display: block; -} -textarea:not([cols]) { - width: 100%; -} - -/* Add arrow to drop-down */ -select:not([multiple]) { - background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%), - linear-gradient(135deg, var(--text) 51%, transparent 49%); - background-position: calc(100% - 15px), calc(100% - 10px); - background-size: 5px 5px, 5px 5px; - background-repeat: no-repeat; - padding-inline-end: 25px; -} -*[dir="rtl"] select:not([multiple]) { - background-position: 10px, 15px; -} - -/* checkbox and radio button style */ -input[type="checkbox"], -input[type="radio"] { - vertical-align: middle; - position: relative; - width: min-content; -} - -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; -} - -input[type="radio"] { - border-radius: 100%; -} - -input[type="checkbox"]:checked, -input[type="radio"]:checked { - background-color: var(--accent); -} - -input[type="checkbox"]:checked::after { - /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */ - content: " "; - width: 0.18em; - height: 0.32em; - border-radius: 0; - position: absolute; - top: 0.05em; - left: 0.17em; - background-color: transparent; - border-right: solid var(--bg) 0.08em; - border-bottom: solid var(--bg) 0.08em; - font-size: 1.8em; - transform: rotate(45deg); -} -input[type="radio"]:checked::after { - /* creates a colored circle for the checked radio button */ - content: " "; - width: 0.25em; - height: 0.25em; - border-radius: 100%; - position: absolute; - top: 0.125em; - background-color: var(--bg); - left: 0.125em; - font-size: 32px; -} - -/* Makes input fields wider on smaller screens */ -@media only screen and (max-width: 720px) { - textarea, - select, - input { - width: 100%; - } -} - -/* Set a height for color input */ -input[type="color"] { - height: 2.5rem; - padding: 0.2rem; -} - -/* do not show border around file selector button */ -input[type="file"] { - border: 0; -} - -/* Misc body elements */ -hr { - border: none; - height: 1px; - background: var(--border); - margin: 1rem auto; -} - -mark { - padding: 2px 5px; - border-radius: var(--standard-border-radius); - background-color: var(--marked); - color: black; -} - -mark a { - color: #0d47a1; -} - -img, -video { - max-width: 100%; - height: auto; - border-radius: var(--standard-border-radius); -} - -figure { - margin: 0; - display: block; - overflow-x: auto; -} - -figure > img, -figure > picture > img { - display: block; - margin-inline: auto; -} - -figcaption { - text-align: center; - font-size: 0.9rem; - color: var(--text-light); - margin-block: 1rem; -} - -blockquote { - margin-inline-start: 2rem; - margin-inline-end: 0; - margin-block: 2rem; - padding: 0.4rem 0.8rem; - border-inline-start: 0.35rem solid var(--accent); - color: var(--text-light); - font-style: italic; -} - -cite { - font-size: 0.9rem; - color: var(--text-light); - font-style: normal; -} - -dt { - color: var(--text-light); -} - -/* Use mono font for code elements */ -code, -pre, -pre span, -kbd, -samp { - font-family: var(--mono-font); - color: var(--code); -} - -kbd { - color: var(--preformatted); - border: 1px solid var(--preformatted); - border-bottom: 3px solid var(--preformatted); - border-radius: var(--standard-border-radius); - padding: 0.1rem 0.4rem; -} - -pre { - padding: 1rem 1.4rem; - max-width: 100%; - overflow: auto; - color: var(--preformatted); -} - -/* Fix embedded code within pre */ -pre code { - color: var(--preformatted); - background: none; - margin: 0; - padding: 0; -} - -/* Progress bars */ -/* Declarations are repeated because you */ -/* cannot combine vendor-specific selectors */ -progress { - width: 100%; -} - -progress:indeterminate { - background-color: var(--accent-bg); -} - -progress::-webkit-progress-bar { - border-radius: var(--standard-border-radius); - background-color: var(--accent-bg); -} - -progress::-webkit-progress-value { - border-radius: var(--standard-border-radius); - background-color: var(--accent); -} - -progress::-moz-progress-bar { - border-radius: var(--standard-border-radius); - background-color: var(--accent); - transition-property: width; - transition-duration: 0.3s; -} - -progress:indeterminate::-moz-progress-bar { - background-color: var(--accent-bg); -} - -dialog { - background-color: var(--bg); - max-width: 40rem; - margin: auto; -} - -dialog::backdrop { - background-color: var(--bg); - opacity: 0.8; -} - -@media only screen and (max-width: 720px) { - dialog { - max-width: calc(100vw - 2rem); - } -} - -/* Superscript & Subscript */ -/* Prevent scripts from affecting line-height. */ -sup, sub { - vertical-align: baseline; - position: relative; -} - -sup { - top: -0.4em; -} - -sub { - top: 0.3em; -} - -/* Classes for notices */ -.notice { - background: var(--accent-bg); - border: 2px solid var(--border); - border-radius: var(--standard-border-radius); - padding: 1.5rem; - margin: 2rem 0; -} - -/* Print */ -@media print { - @page { - margin: 1cm; - } - body { - display: block; - } - body > header { - background-color: unset; - } - body > header nav, - body > footer { - display: none; - } - article { - border: none; - padding: 0; - } - a[href^="http"]::after { - content: " <" attr(href) ">"; - } - abbr[title]:after { - content: " (" attr(title) ")"; - } - a { - text-decoration: none; - } - p { - widows: 3; - orphans: 3; - } - hr { - border-top: 1px solid var(--border); - } - mark { - border: 1px solid var(--border); - } - pre, table, figure, img, svg { - break-inside: avoid; - } - pre code { - white-space: pre-wrap; - } -} diff --git a/templates/base.html b/templates/base.html index e750c8f..974a8b7 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,8 +3,10 @@ - + + + Ungol Blog