diff options
1 files changed, 159 insertions, 139 deletions
| -rw-r--r-- | src/styles.csma | 298 |
diff --git a/src/styles.csma b/src/styles.csma index c15b609..28d30c7 100644 --- a/src/styles.csma +++ b/src/styles.csma @@ -61,7 +61,9 @@ src: url('/font/tabler-icons-subset.ttf') format('truetype'); } -body { +<Webpage> +<Webpage> { + body { min-height: calc(100vh - 16px); background-color: var(--body-bg); border-color: var(--border-color); @@ -79,9 +81,8 @@ body { body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; } * { line-height: 1.3em; } - - - .btn, .h-anchor { + <Button> { + .btn, .h-anchor { /* Thanks https://stackoverflow.com/a/4407335/12036073 */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ @@ -90,142 +91,34 @@ body { -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } - .btn:hover { cursor: pointer; } - .btn:active { transform: scale(0.9); } - - <JavaScript/image-show.js> - - -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; + .btn:hover { cursor: pointer; } + .btn:active { transform: scale(0.9); } } + <Browser compatibility> {} + <Sidebar> + <Content> -/* 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; - } + <JavaScript/image-show.js> -/* Very old/unfinished browser compatibility */ + /* lowdown classes and related settings */ + .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; } + .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; } + .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> -<Content> +} +} /* * Sidebar @@ -247,10 +140,10 @@ dt, dd { #sidebar > :not(:first-child) { margin-top: 8px; } #sidebar a { border: none; } - <Header> - <Page links> - <Settings> - <Footer> + <Sidebar/Header> + <Sidebar/Page links> + <Sidebar/Settings> + <Sidebar/Footer> <JavaScript/expand-navbar.js> } @@ -338,6 +231,7 @@ dt, dd { margin-left: auto; margin-right: auto; } + .noMaxWidth { max-width: initial; } <Post content> @@ -364,12 +258,24 @@ dt, dd { } <Article/Post content> { - <Contents in page> - <Pagenav> - <Headers> - <Images> - <Paragraphs with icons> - <Page specific> + <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> + + .no-wrap { + color: inherit; + vertical-align: baseline; + white-space: nowrap; + } } <Post content/Contents in page> { @@ -404,6 +310,56 @@ dt, dd { h3 + .h-anchor { font-size: 1.1em; } } +<Post content/Anchor> { + 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); } +} + +<Post content/Emphasis> { + i, em { color: var(--em-color); } +} + +<Post content/Bold> { + strong { color: var(--strong-color); } +} + +<Post content/Blockquote> { + 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; } +} + +<Post content/Definition list> { + 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; + } +} + <Post content/Images> { img { box-sizing: border-box; @@ -419,6 +375,70 @@ dt, dd { .borderless, .oldschool-badge, .file-type-icon { border: none; } } +<Post content/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); + 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); + } +} + <Post content/Paragraphs with icons> { .special-par { margin-bottom: 0.25em; |