diff options
Diffstat (limited to 'website/public/css/base.css')
| -rw-r--r-- | website/public/css/base.css | 774 |
1 files changed, 113 insertions, 661 deletions
diff --git a/website/public/css/base.css b/website/public/css/base.css index a22ca34..a3f8e49 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -1,701 +1,153 @@ -/* Based on simple.css: https://simplecss.org/ */ +/** Variables */ + +:root { + --colour-primary-10: #060300; + --colour-primary-20: #1f1400; + --colour-primary-30: #3c2b00; + --colour-primary-40: #5c4300; + --colour-primary-50: #7f5d00; + --colour-primary-60: #a37800; + --colour-primary-70: #c89500; + --colour-primary-80: #efb300; + --colour-primary-90: #ffd98c; + --colour-primary-95: #ffecc8; + + --colour-hyperlink-10: #000409; + --colour-hyperlink-20: #001829; + --colour-hyperlink-30: #00314d; + --colour-hyperlink-40: #004d75; + --colour-hyperlink-50: #006a9f; + --colour-hyperlink-60: #1388c9; + --colour-hyperlink-70: #41a8ea; + --colour-hyperlink-80: #78c7ff; + --colour-hyperlink-90: #bfe3ff; + --colour-hyperlink-95: #e0f1ff; + + --colour-primary-fg: var(--colour-primary-90); + --colour-primary-bg: var(--colour-primary-10); + --colour-hyperlink: var(--colour-hyperlink-80); + + --font-size-sm: 1rem; + --font-size-base: 1.1rem; + --font-size-md: 1.2rem; + --font-size-lg: 1.5rem; + --font-size-xl: 2rem; + + --spacing-block-sm: 0.75rem; + --spacing-block-md: 1.5rem; + --spacing-block-lg: 2.5rem; + --spacing-block-xl: 5rem; + --spacing-inline-sm: 0.5rem; + --spacing-inline-md: 1.5rem; + --spacing-inline-lg: 3rem; + --spacing-inline-xl: 6rem; +} + +/** Light theme */ +@media (prefers-color-scheme: light) { + --colour-primary-fg: var(--colour-primary-20); + --colour-primary-bg: var(--colour-primary-95); + --colour-hyperlink: var(--colour-hyperlink-40); +} + +/** Base typography */ -/* Global variables. */ -:root, -::backdrop { - /* 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-text: var(--bg); - --code: #d81b60; - --preformatted: #444; - --marked: #ffdd33; - --disabled: #efefef; -} - -/* Dark theme */ -@media (prefers-color-scheme: dark) { - :root, - ::backdrop { - color-scheme: dark; - --bg: #212121; - --accent-bg: #2b2b2b; - --text: #dcdcdc; - --text-light: #ababab; - --accent: #ffb300; - --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; + font-size: var(--font-size-base); + color: var(--colour-primary-fg); + background-color: var(--colour-primary-bg); 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; +small { + font-size: var(--font-size-sm); } -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); +:is(p, h1, h2, h3, h4, h5, h6) { + margin-block-start: var(--spacing-block-sm); + max-width: 30rem; } -/* 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; - } +/** Base layout */ - h3 { - font-size: 1.75rem; - } +body { + margin-inline: var(--spacing-block-lg); + margin-block-end: var(--spacing-block-xl); - h4 { - font-size: 1.25rem; + :is(h1, h2, h3, h4, h5, h6) { + text-align: center; } -} - -/* 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"], -label[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, -label[type="button"]:hover { - filter: brightness(1.4); - 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"] { - 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; + img { + margin-inline: auto; } } -/* 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; -} +@media (min-width: 36rem) { + :is(main, article) { + display: grid; + grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end]; + margin-inline-end: 6rem; + column-gap: var(--spacing-block-sm); -aside { - font-size: 1rem; - width: 30%; - padding: 0 15px; - margin-inline-start: 15px; - float: right; -} -*[dir="rtl"] aside { - float: left; -} + :is(section, header, aside) { + grid-column: content-start / content-end; + } -/* Make aside full-width on mobile */ -@media only screen and (max-width: 720px) { - aside { - width: 100%; - float: none; - margin-inline-start: 0; + :is(h1, h2, h3, h4, h5, h6) { + text-align: start; + } } } -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 { - 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: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; -} - -td, -th { - border: 1px solid var(--border); - text-align: start; - padding: 0.5rem; -} +/** Headings */ -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; +h1 { + font-size: var(--font-size-xl); + font-weight: 900; + margin-block-start: 0; } -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; +h2 { + font-size: var(--font-size-lg); + font-weight: 900; + margin-block-start: var(--spacing-block-xl); } -input[type="radio"] { - border-radius: 100%; +h3, h4, h5, h6 { + font-size: var(--font-size-md); + font-weight: 600; } -input[type="checkbox"]:checked, -input[type="radio"]:checked { - background-color: var(--accent); -} +/** Hyperlinks */ -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; -} +a:is(:link, :visited) { + color: var(--colour-hyperlink); + text-decoration: underline; + display: inline; -/* Makes input fields wider on smaller screens */ -@media only screen and (max-width: 720px) { - textarea, - select, - input { - width: 100%; + :hover { + text-decoration: wavy; } } -/* 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; -} - -figcaption { - text-align: center; - font-size: 0.9rem; - color: var(--text-light); - margin-bottom: 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); -} +/** Navigation bar */ -/* 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); -} +nav { + margin-block: var(--spacing-block-sm); -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 { - max-width: 40rem; - margin: auto; -} - -dialog::backdrop { - background-color: var(--bg); - opacity: 0.8; -} - -@media only screen and (max-width: 720px) { - dialog { - max-width: 100%; - margin: auto 1em; + li { + display: flex; + justify-content: center; + gap: var(--spacing-inline-md); + list-style: none; } } -/* 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; -} - -.hidden { - display: none; -} +/** Blog feed */ -.small-caps { - font-variant: small-caps; +.h-feed { + ul { + list-style: none; + } } |