From aacba20c5c54828f86d5f4b563187b251b3891dd Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 20 Nov 2023 09:06:21 +0200 Subject: [styles] Started work on a CSMA port --- src/styles.csma | 613 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 613 insertions(+) create mode 100644 src/styles.csma diff --git a/src/styles.csma b/src/styles.csma new file mode 100644 index 0000000..c15b609 --- /dev/null +++ b/src/styles.csma @@ -0,0 +1,613 @@ +:root { + --bg-color: white; + --fg-color: black; + + --a-color: #336700; + --a-hover-color: #3ea100; + --accent-line-color: #004080; + --alternating-row-color: #eef0f2; + --bg-selection-color: #338fff; + --blockquote-color: #6a737d; + --blockquote-border-color: #dfe2e5; + --body-bg: #ebe3d2; + --border-color: black; + --code-bg-color: var(--hi-bg); + --em-color: black; + --fg-selection-color: white; + --header-color: #006b8f; + --pre-bg-color: var(--hi-bg); + --strong-color: black; + --table-border-color: black; + --tr-bg-color: white; + + /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */ + --hi-fg: var(--fg-color); + --hi-bg: #f5f5e2; + --hic-gray: #928374; + --hic-red: #fb4934; + --hic-green: #79740e; + --hic-blue: #076678; + --hic-yellow: #b57614; + --hic-purple: #8f3f71; + --hic-aqua: #427b58; + --hic-orange: #af3a03; + + --hi-comment: var(--hic-gray); + --hi-const: var(--hic-purple); + --hi-string: var(--hic-green); + --hi-char: var(--hic-purple); + --hi-number: var(--hic-purple); + --hi-bool: var(--hic-purple); + --hi-float: var(--hic-purple); + --hi-identifier: var(--hic-blue); + --hi-function: var(--hic-green); + --hi-statement: var(--hic-red); + --hi-conditional: var(--hic-red); + --hi-repeat: var(--hic-red); + --hi-operator: var(--hi-fg); + --hi-keyword: var(--hic-red); /* Label and Exception are keywords */ + --hi-preproc: var(--hic-aqua); + --hi-type: var(--hic-yellow); + --hi-storageclass: var(--hic-orange); + --hi-structure: var(--hic-aqua); + --hi-typedef: var(--hic-aqua); + --hi-ignore: var(--hi-fg); +} + +/* Global */ + +@font-face { + font-family: 'Tabler'; + src: url('/font/tabler-icons-subset.ttf') format('truetype'); +} + +body { + min-height: calc(100vh - 16px); + background-color: var(--body-bg); + border-color: var(--border-color); + color: var(--fg-color); + overflow-wrap: break-word; + + /* Stuff to make sure the font is rendered correctly on Safari + * https://stackoverflow.com/a/56065714/12036073 */ + font-rendering: optimizeLegibility; + font-weight: 400; + -webkit-font-kerning: normal; + -webkit-font-smoothing: antialiased; + } + nav, article { background-color: var(--bg-color); } + body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; } + * { line-height: 1.3em; } + + + + .btn, .h-anchor { + /* Thanks https://stackoverflow.com/a/4407335/12036073 */ + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; + } + .btn:hover { cursor: pointer; } + .btn:active { transform: scale(0.9); } + + + + +strong { color: var(--strong-color); } +a, a strong { + border-bottom: 1px dashed; + color: var(--a-color); + text-decoration: none; + } + sup a, dt a { border: none; } + a * { color: var(--fg-color); } + a:hover, a strong:hover { color: var(--a-hover-color); } + + +i, em { color: var(--em-color); } + +.noMaxWidth { max-width: initial; } +.no-wrap { + color: inherit; + vertical-align: baseline; + white-space: nowrap; + } + + +/* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */ +code, pre { + background-color: var(--pre-bg-color); + font-family: monospace; + font-size: 85%; + } + pre { + overflow: auto; + padding: 0.9em; + word-break: normal; + word-wrap: normal; + } + code { + margin: 0; + padding: 0 0.4em; + } + pre code { + border: 0; + display: inline-block; + font-size: 100%; + overflow: visible; + padding: 0; + word-wrap: normal; + } + pre > code { + white-space: pre-wrap; + word-break: break-all; + padding-right: 0.9em; + } + table code { + font-size: 0.7em; + white-space: normal; + } + dd code { font-size: 0.8em; } + +table { + border-spacing: 0; + border-collapse: collapse; + margin: 1em 0; + overflow: auto; + } + table td, table th { word-break: normal !important; } + table td:not(:first-of-type), table th:not(:first-of-type) { + border-left: 2px dashed var(--table-border-color); + } + table td, table th { padding: 0.5em; } + table th { + font-size: 1.1em; + font-weight: bold; + } + table td:empty { height: 1em; } + + table tr:not(:first-of-type) { + background-color: var(--tr-bg-color); + } + thead tr { + border-bottom: 2px dashed var(--table-border-color); + } + table tr:nth-child(2n), thead tr { + background-color: var(--alternating-row-color); + } + +blockquote { + border-left: .25em solid var(--blockquote-border-color); + color: var(--blockquote-color); + margin: 0; + margin-top: 0; + margin-bottom: 16px; + padding: 0 1em; + } + blockquote > :first-child { margin-top: 0; } + blockquote > :last-child { margin-bottom: 0; } + +dt, dd { + border: 2px solid var(--border-color); + border-bottom: none; + border-top: none; + padding: 0 0.5em; + } + dt { font-size: 1.2em; padding-top: 0.2em; } + dt * { vertical-align: middle; } + dd { + line-height: 1.5em; + margin-bottom: 1em; + margin-left: 0; + padding-bottom: 0.4em; + padding-left: 49px; + } + +/* Very old/unfinished browser compatibility */ + + /* Inside _header we use , instead of
, because if your browser + * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve + * the "vertical" layout */ +.br { display: block; } +.brt { display: block; height: 0.8em; } + /* Without CSS, certain stuff look bad or confusing, so with this I can add elements which + * add elements for helping with website usage, but which shouldn't be seen otherwise */ +.nocss-aid { display: none; } + +/* lowdown classes and related settings */ + +.footnotes { font-size: 0.9em; margin-top: 3em; } + a[rev="footnote"] { border: none; } + +/* Main elements: content-wrapper, sidebar, article, header, footer */ + + + + +/* + * Sidebar + */ + + { + #sidebar { + background-color: var(--body-bg); + font-size: 1.2em; + margin-right: 8px; + max-width: 11.2em; + } + #sidebar > * { + border: 3px solid var(--accent-line-color); + box-sizing: border-box; + padding: 1rem 1rem; + width: 100%; + } + #sidebar > :not(:first-child) { margin-top: 8px; } + #sidebar a { border: none; } + +
+ + +