From cfaa25889314416e525855e04dff50f42f0ec787 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Thu, 23 Nov 2023 12:59:16 +0200
Subject: [styles] Roughly organized styles into macros

---
 src/styles.csma | 298 ++++++++++++++++++++++++++++++--------------------------
 1 file changed, 159 insertions(+), 139 deletions(-)

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;
-- 
cgit v1.3.1-23-gd82d