Summary Files Commits Branches @commit @diff @stats
path: root / src / styles.csma
diff options
context:
space:
mode:
Commite80e02cb52f4d7d67b257a5f72e7fbe28c5b74f9 (patch)
Author
 Syndamia <kamen@syndamia.com>
2024-08-10 15:31:25 +0300
Committer
 Syndamia <kamen@syndamia.com>
2024-08-10 15:31:25 +0300
Filesf5d7c0751d05f413df029d944c13a25c14b88396 /src/styles.csma
syndamia.com-e80e02cb52f4d7d67b257a5f72e7fbe28c5b74f9.tar
syndamia.com-e80e02cb52f4d7d67b257a5f72e7fbe28c5b74f9.tar.gz
syndamia.com-e80e02cb52f4d7d67b257a5f72e7fbe28c5b74f9.zip
Parentb4b2ccdc3e145065b3b16af36447112c33a45047 (diff)
feat!: Removed CSMA, made minor styling changes
1 files changed, 0 insertions, 656 deletions
-rw-r--r--src/styles.csma656
diff --git a/src/styles.csma b/src/styles.csma
deleted file mode 100644
index 29d63fe..0000000
--- a/src/styles.csma
+++ /dev/null
@@ -1,656 +0,0 @@
-:root {
- --bg-color: white;
- --fg-color: black;
-
- --body-bg: #ebe3d2;
- --accent-line-color: #004080;
-
- --a-color: #336700;
- --a-hover-color: #3ea100;
- --bg-selection-color: #338fff;
- --blockquote-color: #6a737d;
- --blockquote-border-color: #dfe2e5;
- --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: #fbfdff;
- --alternating-row-color: #eef0f2;
-
- --terminal-fg: black;
- --terminal-bg: 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');
-}
-
-<Webpage>
-<Webpage> {
- 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;
- }
- 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 */
- user-select: none;
- }
- .btn:hover { cursor: pointer; }
- .btn:active { transform: scale(0.9); }
- }
-
- <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> {
- .footnotes { font-size: 0.9em; margin-top: 3em; }
- a[rev="footnote"] { border: none; }
- }
-}
-
-<Sidebar>
-<Content>
-
-<Sidebar> {
-/*
- * 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; }
-
- <Header> {}
- <Page links> {}
- <Settings> {}
- <Footer> {}
-
- <JavaScript/expand-navbar.js>
-}
-
-<Sidebar> {
-<Header>
-{
- #header {
- border-right: none;
- font-size: 1.5em;
- }
-}
-}
-
-<Sidebar> {
-<Page links>
-{
- #index {
- border-right: none;
- border-bottom: none;
- }
- .arrowed-list {
- margin: 0 0 0.5em 0.3em;
- padding-left: 0.5em;
- row-gap: 0;
- grid-column-start: 1;
- grid-column-end: 1;
- display: grid;
- border-left: 2px solid var(--border-color);
- }
- .arrowed-list > *, .arrowed-list > *:hover {
- line-height: 1.2em;
- display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
- }
-}
-}
-
-<Sidebar> {
-<Settings>
-{
- #settingsWrapper {
- border-top: none;
- border-bottom: none;
- font-size: 1.2em;
- line-height: 1em;
- }
- .setting-btn {
- text-align: center;
- display: inline-block;
- line-height: 1em;
- border: 1px solid var(--border-color);
- padding: 0.4em;
- }
- #settingsWrapper > .setting-btn { font-size: 0.5em; }
-}
-}
-
-<Sidebar> {
-<Footer>
-{
- #footer {
- font-size: 0.7em;
- overflow-x: hidden;
- border-left: none;
- border-top: none;
- }
- #footer > * { white-space: nowrap; }
-}
-}
-
-<Content> {
-/*
- * Content
- */
-
- #content-wrapper {
- min-height: calc(100vh - 16px);
- display: flex;
- flex-direction: row;
- border-right: 3px solid var(--accent-line-color);
- }
-
- <Article> {}
-}
-
-<Article>
-<Article> {
- article {
- border-top: 3px solid var(--accent-line-color);
- box-sizing: border-box;
- flex: 1;
- max-width: 56em; /* Equivalent to 50em on 19px font-size */
- margin-bottom: 1em;
- overflow: auto;
- padding: 0 1em;
- }
- article {
- margin-left: auto;
- margin-right: auto;
- }
- .noMaxWidth { max-width: initial; }
-
- <Gap> {}
- <Footer> {}
-
- <Contents in page> {}
- <Pagenav> {}
- <Paragraphs with icons> {}
- <Teaching> {}
- <Page specific> {}
-
- <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> {
-<Gap>
-{
- .gap, .gap-small {
- background-color: var(--body-bg);
- margin: 0 -1em;
- }
- .gap { height: 1.5em; }
- .gap-small { height: 0.5em; }
-}
-}
-
-<Article> {
-<Footer>
-{
- article > footer {
- margin: 0 -1em;
- padding: 0.5em;
- border: 3px solid var(--accent-line-color);
- border-left: none;
- border-right: none;
- }
-}
-}
-
-<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; }
-}
-}
-
-<Article> {
-<Pagenav>
-{
- #pagenav {
- filter: opacity(64%);
- font-size: 0.8em;
- margin: 0 0 3rem 2rem;
- }
- #pagenav strong, #pagenav a { white-space: nowrap; }
- #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
-
- #pagenav-breadcrumb { font-weight: bold; }
- #pagenav-breadcrumb em { font-weight: normal; }
-}
-}
-
-<Article> {
-<Paragraphs with icons>
-{
- .special-par {
- position: relative;
- padding: 0.5em;
- padding-left: calc(32px + 1em);
- }
- .question-par { border-left: 2px solid #4a85cb; }
- .warn-par { border: 2px dashed #fac848; }
- .important-par { border: 2px solid #f46062; }
- .special-par-icon { vertical-align: middle; }
- .special-par > .special-par-icon {
- position: absolute;
- left: 0.5em;
- top: calc(50% - 16px);
- }
-}
-}
-
-<Article> {
-<Teaching> {
- .exercise-solution {
- float: right;
- font-weight: bold;
- }
-
- /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 https://stackoverflow.com/a/47560151/12036073 */
- h2 ~ .exercise-solution { font-size: 1.4em; margin-top: 0.6em; }
- h3 ~ .exercise-solution { font-size: 1.1em; margin-top: 0.8em; }
-}
-}
-
-<Article> {
-<Page specific>
-{
- <About page> {
- #about-image {
- float: right;
- margin-right: 1em;
- margin-top: 2em;
- max-width: 7.6em;
- }
- }
-}
-}
-
-<Headers> {
- h1, h2, h3, h4, h5, h6 {
- color: var(--header-color);
- display: inline-block;
- line-height: 1.25em;
- 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; }
-}
-
-<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); }
-}
-
-<Italics> {
- i, em { color: var(--em-color); }
-}
-
-<Bold> {
- strong { color: var(--strong-color); }
-}
-
-<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 card> {
- 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;
- }
-}
-
-<Images> {
- img {
- box-sizing: border-box;
- max-width: 100%;
- }
- img, hr { border: 1px solid var(--border-color); }
- dt img, .svg { box-sizing: border-box; max-height: 1em; }
- .pixelated-render { image-rendering: pixelated; }
- .oldschool-badge { height: 38px; }
- .flag { max-width: 1.3em; } /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
-
- .file-type-icon { min-width: 1.3em; vertical-align: middle; }
- .borderless, .oldschool-badge, .file-type-icon { border: none; }
-}
-
-<Code> {
- /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
- code, pre {
- font-family: monospace;
- font-size: 85%;
- }
-
- <Pre elem> {
- pre {
- overflow: auto;
- word-break: normal;
- word-wrap: normal;
- }
- }
-
- <Code elem> {
- code {
- background-color: var(--pre-bg-color);
- 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: 0.9em;
- width: 100%;
- box-sizing: border-box;
- }
-
- table code {
- font-size: 0.7em;
- white-space: normal;
- }
- dd code { font-size: 0.8em; }
- }
-
- <Syntax highlighting> {}
- .language-terminal {
- color: var(--terminal-fg);
- background-color: var(--terminal-bg);
- }
-}
-
-<Table> {
- 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 {
- 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);
- }
-}
-
-/* Small screen support */
-
-@media screen and ((max-width: 610px) or (max-height: 610px)) {
- article {
- border-top: none;
- max-width: calc(100vw - 16px - 3px);
- }
- table td, table th { word-break: break-all; }
-
- #about-image { max-width: 4.38em; }
-
- #content-wrapper { flex-direction: column; }
- #sidebar {
- max-width: initial;
- margin: 0;
- }
- #sidebar > * { border-right: none; }
- .sidebar-hidden { position: initial; }
- .sidebar-hidden > :not(#header) { display: none; }
- .sidebar-hidden + .noMaxWidth { margin-top: 0; }
- /* page-width.js */
- #changeWidthBtn { display: none; }
-}
-
-/* Printing support */
-
-@media print {
- h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img,
- nav, #scrollBtn, .gap, .gap-small {
- display: none !important;
- }
-
- body { margin: 0; }
- body, article {
- background-color: white;
- border: none !important;
- }
-
- pre, code { white-space: pre-wrap !important; }
- .language-terminal { color: var(--fg-color); background-color: var(--bg-color); }
- .slide, .absolute-slide { transform: none !important; margin: 0; }
-}
-
-<JavaScript> {
- <expand-navbar.js> {
- #expandNavbarBtn { float: right; margin-left: 1em; }
- .sidebar-hidden { min-height: auto; position: absolute; }
- .sidebar-hidden > :not(#header) { display: none; }
- .sidebar-hidden + .noMaxWidth { margin-top: 6em; }
- }
-
- <back-to-top.js> {
- #scrollBtn {
- font-size: 1.66rem;
- padding: 0 0.15em;
- bottom: 1rem;
- right: 1rem;
- z-index: 1;
- transition-duration: 0.5s;
- background-color: var(--bg-color);
- display: none;
- position: fixed;
- border: 1px solid;
- }
- }
-
- <image-show.js> {
- .clicked-image {
- height: 100vh;
- width: 100vw;
- max-width: none;
- max-height: none;
- padding: 1em;
- background-color: var(--bg-color);
- left: 0;
- top: 0;
- z-index: 2;
- border: none;
- object-fit: contain;
- position: fixed;
- }
- .body-on-clicked-image { overflow: hidden; }
- }
-
- <presentation.js> {
- .nodisplay { display: none; }
- }
-}
-<JavaScript/presentation.js>
-
-<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 */
-}
-}