diff options
1 files changed, 177 insertions, 188 deletions
| -rw-r--r-- | src/styles.csma | 365 |
diff --git a/src/styles.csma b/src/styles.csma index 28d30c7..3927a25 100644 --- a/src/styles.csma +++ b/src/styles.csma @@ -77,54 +77,55 @@ -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; } <Button> { .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 */ + -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); } } - <Browser compatibility> {} - <Sidebar> - <Content> + <Browser compatibility> { + /* Inside _header we use <span class="br"></span>, instead of <br>, 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; } + } + + nav, article { background-color: var(--bg-color); } + <Sidebar> {} + <Content> {} <JavaScript/image-show.js> - /* lowdown classes and related settings */ - .footnotes { font-size: 0.9em; margin-top: 3em; } - a[rev="footnote"] { border: none; } + <Lowdown> { + .footnotes { font-size: 0.9em; margin-top: 3em; } + a[rev="footnote"] { border: none; } + } } -<Webpage> { -<Browser compatibility> { - /* Inside _header we use <span class="br"></span>, instead of <br>, 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; } - -} -} +<Sidebar> +<Content> +<Sidebar> { /* * Sidebar */ -<Sidebar> { #sidebar { background-color: var(--body-bg); font-size: 1.2em; @@ -140,22 +141,27 @@ #sidebar > :not(:first-child) { margin-top: 8px; } #sidebar a { border: none; } - <Sidebar/Header> - <Sidebar/Page links> - <Sidebar/Settings> - <Sidebar/Footer> + <Header> {} + <Page links> {} + <Settings> {} + <Footer> {} <JavaScript/expand-navbar.js> } -<Sidebar/Header> { +<Sidebar> { +<Header> +{ #header { border-right: none; font-size: 1.5em; } } +} -<Sidebar/Page links> { +<Sidebar> { +<Page links> +{ #index { border-right: none; border-bottom: none; @@ -174,8 +180,11 @@ display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */ } } +} -<Sidebar/Settings> { +<Sidebar> { +<Settings> +{ #settingsWrapper { border-top: none; border-bottom: none; @@ -191,8 +200,11 @@ } #settingsWrapper > .setting-btn { font-size: 0.5em; } } +} -<Sidebar/Footer> { +<Sidebar> { +<Footer> +{ #footer { font-size: 0.7em; overflow-x: hidden; @@ -201,12 +213,13 @@ } #footer > * { white-space: nowrap; } } +} +<Content> { /* * Content */ -<Content> { #content-wrapper { min-height: calc(100vh - 16px); display: flex; @@ -214,10 +227,11 @@ border-right: 3px solid var(--accent-line-color); } - <Content/Article> + <Article> {} } -<Content/Article> { +<Article> +<Article> { article { border-top: 3px solid var(--accent-line-color); box-sizing: border-box; @@ -233,57 +247,69 @@ } .noMaxWidth { max-width: initial; } - <Post content> + <Gap> {} + <Footer> {} - <Gap> { - .gap, .gap-small { - background-color: var(--body-bg); - margin: 0 -1em; - } - .gap { height: 1.5em; } - .gap-small { height: 0.5em; } - } + <Contents in page> {} + <Pagenav> {} + <Paragraphs with icons> {} + <Page specific> {} - <Footer> { - article > footer { - margin: 0 -1em; - padding: 0.5em; - border: 3px solid var(--accent-line-color); - border-left: none; - border-right: none; - } + <Headers> + <Anchor> + <Italics> + <Bold> + <Blockquote> + <Post card> + <Images> + <Code> + <Table> + + .no-wrap { + color: inherit; + vertical-align: baseline; + white-space: nowrap; } <JavaScript/back-to-top.js> } -<Article/Post content> { - <Post content/Contents in page> - <Post content/Pagenav> - <Post content/Headers> - <Post content/Anchor> - <Post content/Emphasis> - <Post content/Bold> - <Post content/Blockquote> - <Post content/Definition list> - <Post content/Images> - <Post content/Code> - <Post content/Paragraphs with icons> - <Post content/Page specific> +<Article> { +<Gap> +{ + .gap, .gap-small { + background-color: var(--body-bg); + margin: 0 -1em; + } + .gap { height: 1.5em; } + .gap-small { height: 0.5em; } +} +} - .no-wrap { - color: inherit; - vertical-align: baseline; - white-space: nowrap; +<Article> { +<Footer> +{ + article > footer { + margin: 0 -1em; + padding: 0.5em; + border: 3px solid var(--accent-line-color); + border-left: none; + border-right: none; } } +} -<Post content/Contents in page> { +<Article> { +<Contents in page> +{ #contents-container { float: right; margin-left: 2.5em; background-color: var(--bg-color); padding-right: 0.5em; } #contents-container > h2 { margin-top: -1rem; } } +} -<Post content/Pagenav> { +<Article> { +<Pagenav> +{ #pagenav { filter: opacity(64%); font-size: 0.8em; @@ -292,8 +318,43 @@ #pagenav > * { white-space: nowrap; } #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; } } +} + +<Article> { +<Paragraphs with icons> +{ + .special-par { + margin-bottom: 0.25em; + position: relative; + padding: 0.5em; + padding-left: calc(32px + 1em); + } + .warn-par { border: 1px dashed #fac848; } + .important-par { border: 1px solid #f46062; } + .special-par-icon { vertical-align: middle; } + .special-par > .special-par-icon { + position: absolute; + left: 0.5em; + top: calc(50% - 16px); + } +} +} + +<Article> { +<Page specific> +{ + <About page> { + #about-image { + float: right; + margin-right: 1em; + margin-top: 2em; + max-width: 7.6em; + } + } +} +} -<Post content/Headers> { +<Headers> { h1, h2, h3, h4, h5, h6 { color: var(--header-color); display: inline-block; @@ -301,16 +362,18 @@ border-bottom: 2px solid var(--border-color); } h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; } + h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * { margin-top: 0; } .h-anchor { color: var(--fg-color); border: none; } + /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */ h2 + .h-anchor { font-size: 1.4em; } h3 + .h-anchor { font-size: 1.1em; } } -<Post content/Anchor> { +<Anchor> { a, a strong { border-bottom: 1px dashed; color: var(--a-color); @@ -321,15 +384,15 @@ a:hover, a strong:hover { color: var(--a-hover-color); } } -<Post content/Emphasis> { +<Italics> { i, em { color: var(--em-color); } } -<Post content/Bold> { +<Bold> { strong { color: var(--strong-color); } } -<Post content/Blockquote> { +<Blockquote> { blockquote { border-left: .25em solid var(--blockquote-border-color); color: var(--blockquote-color); @@ -342,7 +405,7 @@ blockquote > :last-child { margin-bottom: 0; } } -<Post content/Definition list> { +<Post card> { dt, dd { border: 2px solid var(--border-color); border-bottom: none; @@ -360,7 +423,7 @@ } } -<Post content/Images> { +<Images> { img { box-sizing: border-box; max-width: 100%; @@ -375,7 +438,7 @@ .borderless, .oldschool-badge, .file-type-icon { border: none; } } -<Post content/Code> { +<Code> { /* 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); @@ -411,6 +474,10 @@ } dd code { font-size: 0.8em; } + <Syntax highlighting> {} +} + +<Table> { table { border-spacing: 0; border-collapse: collapse; @@ -439,34 +506,6 @@ } } -<Post content/Paragraphs with icons> { - .special-par { - margin-bottom: 0.25em; - position: relative; - padding: 0.5em; - padding-left: calc(32px + 1em); - } - .warn-par { border: 1px dashed #fac848; } - .important-par { border: 1px solid #f46062; } - .special-par-icon { vertical-align: middle; } - .special-par > .special-par-icon { - position: absolute; - left: 0.5em; - top: calc(50% - 16px); - } -} - -<Post content/Page specific> { - <About page> { - #about-image { - float: right; - margin-right: 1em; - margin-top: 2em; - max-width: 7.6em; - } - } -} - /* Small screen support */ @media screen and ((max-width: 610px) or (max-height: 610px)) { @@ -509,9 +548,6 @@ .slide, .absolute-slide { transform: none !important; margin: 0; } } -/* presentation.js */ -.nodisplay { display: none; } - <JavaScript> { <expand-navbar.js> { #expandNavbarBtn { float: right; margin-left: 1em; } @@ -552,82 +588,35 @@ } .body-on-clicked-image { overflow: hidden; } } -} -/* Syntax highlighting */ - -.HI-comment { color: var(--hi-comment); } -.HI-const { color: var(--hi-const); } -.HI-string { color: var(--hi-string); } -.HI-char { color: var(--hi-char); } -.HI-number { color: var(--hi-number); } -.HI-bool { color: var(--hi-bool); } -.HI-float { color: var(--hi-float); } -.HI-identifier { color: var(--hi-identifier); } -.HI-function { color: var(--hi-function); } -.HI-statement { color: var(--hi-statement); } -.HI-conditional { color: var(--hi-conditional); } -.HI-repeat { color: var(--hi-repeat); } -.HI-operator { color: var(--hi-operator); } -.HI-keyword { color: var(--hi-keyword); /* Label and Exception are keywords */ } -.HI-preproc { color: var(--hi-preproc); } -.HI-type { color: var(--hi-type); } -.HI-storageclass { color: var(--hi-storageclass); } -.HI-structure { color: var(--hi-structure); } -.HI-typedef { color: var(--hi-typedef); } -.HI-ignore { color: var(--hi-ignore); } -.HI-comment * { color: inherit; } /* If text inside a comment is matched, don't show it */ + <presentation.js> { + .nodisplay { display: none; } + } +} +<JavaScript/presentation.js> -/* - * Format follows the following specs: - * - short rules are put on one line - * This means that the last character from the rule is at MOST on column 80 - * - otherwise in the format - * - * rules { - * thing: value; - * thing: value; - * ... - * } - * - * - below the ending curly brace, on the same identation, there are related stylings - * these include all stylings directly changing that rule and classes that are directly related - * each of these are, as mentioned, indents the same level as that closing brace - * each follows the same rules from above (and can have further more indented related stylings) - * all rules are ordered in this format (where ? is any combinator, and something is just a name) - * - * rule { - * ... - * } - * something ? rule { ... } - * rule ? something { ... } - * rule::something { ... } - * #something { ... } - * .something { ... } - * - * - when a related rule has the big rule and other classes, its preferrable that they're in - * descending order from without class/id to id and then class. example - * - * rule { - * ... - * } - * something ? rule { ... } - * something ? rule, #something { ... } - * something ? rule, .something { ... } - * - * - as you've noticed, multiple blocks that are on one line, below each other, should have their - * opening braces aligned, but only if the distance isn't "too big" (usually > 15-20 characters is too big) - * - * rule { - * ... - * } - * something ? rule { ... } - * something-else ? rule { ... } - * something-else-1 ? rule, something-else-2 ? rule { ... } - * something-else-3 ? rule, something-else-4 ? rule { ... } - * - * - empty lines between related rules, to further separate certain related rules from others, are permittable - * in a class list, putting rules on new lines (starting with the same identation as the first) is also permittable - * - * - properties inside rules should be ordered lexicographically, and properties that start with a dash should be at the bottom - */ +<Code> { +<Syntax highlighting> { + .HI-comment { color: var(--hi-comment); } + .HI-const { color: var(--hi-const); } + .HI-string { color: var(--hi-string); } + .HI-char { color: var(--hi-char); } + .HI-number { color: var(--hi-number); } + .HI-bool { color: var(--hi-bool); } + .HI-float { color: var(--hi-float); } + .HI-identifier { color: var(--hi-identifier); } + .HI-function { color: var(--hi-function); } + .HI-statement { color: var(--hi-statement); } + .HI-conditional { color: var(--hi-conditional); } + .HI-repeat { color: var(--hi-repeat); } + .HI-operator { color: var(--hi-operator); } + .HI-keyword { color: var(--hi-keyword); /* Label and Exception are keywords */ } + .HI-preproc { color: var(--hi-preproc); } + .HI-type { color: var(--hi-type); } + .HI-storageclass { color: var(--hi-storageclass); } + .HI-structure { color: var(--hi-structure); } + .HI-typedef { color: var(--hi-typedef); } + .HI-ignore { color: var(--hi-ignore); } + .HI-comment * { color: inherit; } /* If text inside a comment is matched, don't show it */ +} +} |