[styles] Reworked overall code structure and layout

2 files changed, 407 insertions, 646 deletions

diff --git a/src/darkmode.css b/src/darkmode.css
index e91818c..fd995a5 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -1,31 +1,32 @@
 :root {
-  --body-bg: #000000;
-  --fg-color: #ffeede;
   --bg-color: #262626;
-  --fg-selection-color: #001121;
+  --fg-color: #ffeede;
+
+  --a-color: #cd81a7;
+  --a-hover-color: #eeaacd;
+  --accent-line-color: #d47408;
+  --alternating-row-color: #353535;
   --bg-selection-color: #81949f;
-  --border-color: #777;
   --blockquote-color: #919191;
   --blockquote-border-color: #919191;
-  --header-color: #d49408;
-  --accent-line-color: #d47408;
-  --strong-color: #c35b5b;
-  --a-color: #cd81a7;
-  --a-hover-color: #eeaacd;
+  --body-bg: #000000;
+  --border-color: #777;
   --code-bg-color: #414141;
-  --pre-bg-color: #414141;
   --em-color: #e17b08;
+  --fg-selection-color: #001121;
+  --header-color: #d49408;
+  --pre-bg-color: #414141;
+  --strong-color: #c35b5b;
   --table-border-color: #777;
   --tr-bg-color: #262626;
-  --alternating-row-color: #353535;
 }
 
   /* This selects the link images, next to headings */
 h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary {
-  /* Refer to styles.css on why this is necessary */
-  filter: none; 
-}
+    /* Refer to styles.css on why this is necessary */
+    filter: none; 
+  }
 
 #scrollBtn {
-  background-color: var(--bg-color);
-}
+    background-color: var(--bg-color);
+  }
diff --git a/src/styles.css b/src/styles.css
index 163a231..cee4c39 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,514 +1,417 @@
+/*
+ * Format follows the following specs:
+ * - short rules (length includes all selectors; short means roughtly < 62 chars) are put on one line
+ * - 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
+ */
+
 :root {
-  --body-bg: #dbdbdb;
-  --fg-color: black;
   --bg-color: white;
-  --fg-selection-color: white;
+  --fg-color: black;
+
+  --a-color: #336700;
+  --a-hover-color: #3ea100;
+  --accent-line-color: #004080;
+  --alternating-row-color: #eef0f2;
   --bg-selection-color: #338fff;
-  --border-color: black;
   --blockquote-color: #6a737d;
   --blockquote-border-color: #dfe2e5;
-  --header-color: #006b8f;
-  --accent-line-color: #004080;
-  --strong-color: black;
-  --a-color: #336700;
-  --a-hover-color: #3ea100;
+  --body-bg: #dbdbdb;
+  --border-color: black;
   --code-bg-color: #e2e4e6;
-  --pre-bg-color: #f6f8fa;
   --em-color: black;
+  --fg-selection-color: white;
+  --header-color: #006b8f;
+  --pre-bg-color: #f6f8fa;
+  --strong-color: black;
   --table-border-color: black;
   --tr-bg-color: #fff;
-  --alternating-row-color: #eef0f2;
 }
 
 /* Custom mouse text selection colors */
 
-::-moz-selection {
-  color: var(--fg-selection-color);
-  background: var(--bg-selection-color);
-}
-
 ::selection {
-  color: var(--fg-selection-color);
   background: var(--bg-selection-color);
-}
+  color: var(--fg-selection-color);
+  }
+  ::-moz-selection {
+    background: var(--bg-selection-color);
+    color: var(--fg-selection-color);
+    }
+
 
 /* Global */
 
 body {
-  min-height: calc(100vh - 16px);
-  color: var(--fg-color);
-  background-color: var(--body-bg);
-  border-color: var(--border-color);
-}
-
-body > * {
-  background-color: var(--bg-color);
-}
-
-body, td, th {
-  font: 18px sans-serif;
-  line-height: 1.3em;
-}
+    background-color: var(--body-bg);
+    border-color: var(--border-color);
+    color: var(--fg-color);
+    min-height: calc(100vh - 16px);
+  }
+  body > *     { background-color: var(--bg-color); }
+  body, td, th { font: 18px sans-serif; line-height: 1.3em; }
 
 img {
-  max-width: 100%;
-  box-sizing: border-box;
-  image-rendering: crisp-edges;
-}
-
-.pixelated-render {
-  image-rendering: pixelated;
-}
-
-.borderless, .oldschool-badge, .file-icon {
-  border: none;
-}
+    box-sizing: border-box;
+    image-rendering: crisp-edges;
+    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; }
+  .file-icon        { min-width: 1.3em; vertical-align: text-bottom; }
+  .borderless, .oldschool-badge, .file-icon { border: none; }
 
-.oldschool-badge {
-  height: 38px;
-}
+  .setting-btn { border: none !important; vertical-align: middle; }
+  .btn:hover   { cursor: pointer; }
 
-.file-icon {
-  vertical-align: text-bottom;
-  min-width: 1.3em;
-}
+  /* image-show.js */
+  .clicked-image {
+      background-color: var(--bg-color);
+      border: none;
+      height: 100vh;
+      left: 0;
+      max-width: none !important;
+      max-height: none !important;
+      object-fit: contain;
+      padding: 1em;
+      position: absolute;
+      top: 0;
+      width: 100vw;
+      z-index: 2;
+    }
+    .body-on-clicked-image { overflow: hidden; }
 
-img, hr {
-  border: 1px solid var(--border-color);
-}
 
-strong {
-  color: var(--strong-color);
-}
+strong { color: var(--strong-color); }
 
 a, a strong {
-  text-decoration: none;
-  color: var(--a-color);
-  border-bottom: 1px dashed;
-}
-
-a:hover, a strong:hover {
-  color: var(--a-hover-color);
-}
-
-a * {
-  color: var(--fg-color);
-}
-
-sup a {
-  border: none;
-}
+    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);
-}
 
-article {
-  flex: 1;
-  max-width: 56em; /* Equivalent to 50em on 19px font-size */
-  min-height: calc(100vh - 228px);
-  overflow: auto;
-  padding: 0 1em;
-  box-sizing: border-box;
-  border-top: 3px solid var(--accent-line-color);
-}
+i, em { color: var(--em-color); }
 
-.noMaxWidth {
-  max-width: initial;
-}
-
-.spacer {
-  flex: 1;
-}
+.noMaxWidth { max-width: initial; }
+.spacer     { flex: 1; }
+.no-wrap {
+    color: inherit;
+    vertical-align: baseline;
+    white-space: nowrap;
+  }
 
-ul, ol {
-  padding-inline-start: 30px;
-}
+ul, ol { padding-inline-start: 30px; }
 
 h1, h2, h3, h4, h5, h6, b {
-  color: var(--header-color);
-  border-color: var(--border-color);
-  line-height: 1.25em;
-}
-
-h1 {
-  font-size: 1.7em;
-  margin-block-end: 0.5em;
-}
-
-h2 {
-  margin-top: 2.5em;
-}
-
-h3 {
-  margin-top: 2em;
-}
-
-h1 + *, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * {
-  margin-top: 0;
-}
-
-h1 ~ h1 {
-  margin-top: 0;
-}
-
-h1::before, h2::before, h3::before, h4::before, h5::before {
-  content: "\2550  ";
-  color: var(--border-color);
-}
-
-h1::after, h2::after, h3::after, h4::after, h5::after {
-   color: var(--border-color);
-}
-
-h1::after {
-   content: " \2550 \2550 \2550 \2550 \2550";
-}
-
-h2::after {
-   content: " \2550 \2550 \2550";
-}
-
-h3::after {
-   content: " \2550";
-}
-
-h4 {
-   border-bottom: 2px solid var(--border-color);
-}
-
-/* Show link icon next to headings */
-
-h2, h3, h4, h5, h6 {
-  display: inline-block;
-}
-
-h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
-  display: inline;
-  border: none !important;
-}
-
-h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img {
-  height: 1.3em;
-  border: none;
-  vertical-align: text-bottom;
-}
-
-h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary {
-  /* Since link images are made for dark mode, and have white-ish foreground,
-   * this filter makes them black (when in light mode)
-   */
-  filter: invert(1) brightness(0);
-}
-
-  /* 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: 1em;
-}
-
-code {
-  padding: .2em .4em;
-  margin: 0;
-  font-size: 85%;
-  background-color: var(--code-bg-color);
-}
+    border-color: var(--border-color);
+    color: var(--header-color);
+    line-height: 1.25em;
+  }
+  h1 { font-size: 1.7em; margin-block-end: 0.5em; }
+  h2 { margin-top: 2.5em; }
+  h3 { margin-top: 2em; }
+  h4 { border-bottom: 2px solid var(--border-color); }
+  h2, h3, h4, h5, h6 { display: inline-block; } /* For link to appear next to heading */
 
-pre code {
-  display: inline;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  line-height: inherit;
-  word-wrap: normal;
-  background-color: var(--code-bg-color);
-  border: 0;
-}
+  /* Heading link */ h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
+      border: none !important;
+      display: inline;
+    }
+  /* Heading link */ h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img {
+      border: none;
+      height: 1.3em;
+      vertical-align: text-bottom;
+    }
+  /* Heading link */ h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img,
+  .icon, .file-icon, .file-wrapper > summary {
+      /* Since link images are made for dark mode, and have white-ish foreground,
+       * this filter makes them black (when in light mode)
+       */
+      filter: invert(1) brightness(0);
+    }
+  h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * {
+      margin-top: 0;
+    }
 
-pre > code {
-  padding: 0;
-  margin: 0;
-  font-size: 100%;
-  word-break: normal;
-  white-space: pre;
-  background-color: inherit;
-  border: 0;
-}
+  h1::before, h2::before, h3::before, h4::before, h5::before {
+      color: var(--border-color);
+      content: "\2550  ";
+    }
+    h1::after, h2::after, h3::after, h4::after, h5::after {
+        color: var(--border-color);
+      }
+    h1::after { content: " \2550 \2550 \2550 \2550 \2550"; }
+    h2::after { content: " \2550 \2550 \2550"; }
+    h3::after { content: " \2550"; }
 
+/* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
 pre {
-  padding: 16px;
-  overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  background-color: var(--pre-bg-color);
-  word-break: normal;
-  word-wrap: normal;
-}
-
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 100%;
-  overflow: auto;
-}
-
-table td, table th {
-  word-break: normal !important;
-}
-
-table td:not(:empty) {
-  padding: 0.5em;
-}
-
-table th:not(:empty) {
-  font-size: 1.1em;
-  padding: 0.2em;
-  font-weight: 600;
-}
-
-table code {
-  white-space: normal;
-  font-size: 0.7em;
-}
-
-table td:not(:first-of-type), table th:not(:first-of-type) {
-  border-left: 2px dashed var(--table-border-color);
-}
+    background-color: var(--pre-bg-color);
+    font-size: 85%;
+    line-height: 1.45;
+    overflow: auto;
+    padding: 16px;
+    word-break: normal;
+    word-wrap: normal;
+  }
+  code, pre {
+      font-family: monospace;
+      font-size: 1em;
+    }
 
-table tr:not(:first-of-type) {
-  background-color: var(--tr-bg-color);
-}
+  code {
+      background-color: var(--code-bg-color);
+      font-size: 85%;
+      margin: 0;
+      padding: .2em .4em;
+    }
+  pre code {
+      background-color: var(--code-bg-color);
+      border: 0;
+      display: inline;
+      line-height: inherit;
+      margin: 0;
+      overflow: visible;
+      padding: 0;
+      word-wrap: normal;
+    }
+  pre > code {
+      background-color: inherit;
+      font-size: 100%;
+      white-space: pre;
+      word-break: normal;
+    }
+  table code {
+      font-size: 0.7em;
+      white-space: normal;
+    }
+  dd code { font-size: 0.8em; }
 
-thead tr {
-  border-bottom: 2px dashed var(--table-border-color);
-}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+    width: 100%;
+  }
+  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:not(:empty) { padding: 0.5em; }
+  table th:not(:empty) {
+      font-size: 1.1em;
+      font-weight: 600;
+      padding: 0.2em;
+    }
 
-table tr:nth-child(2n), thead tr {
-  background-color: var(--alternating-row-color);
-}
+  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 {
-  margin: 0;
-  margin-top: 0;
-  margin-bottom: 16px;
-  padding: 0 1em;
-  color: var(--blockquote-color);
-  border-left: .25em solid var(--blockquote-border-color);
-}
-
-blockquote > :first-child {
-  margin-top: 0;
-}
-
-blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-dt {
-  font-size: 1.2em;
-}
-
-dt * {
-  vertical-align: middle;
-}
-
-dt a {
-  border: none;
-}
-
-dt img, .svg {
-  max-height: 1em;
-  box-sizing: border-box;
-}
+    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; }
 
-dd {
-  margin-bottom: 1em;
-  line-height: 1.5em;
-}
+dt { font-size: 1.2em; }
+  dt * { vertical-align: middle; }
+  dd   { line-height: 1.5em; margin-bottom: 1em; }
 
-dd code {
-  font-size: 0.8em;
-}
-
-.no-wrap {
-  white-space: nowrap;
-  color: inherit;
-  vertical-align: baseline;
-}
 
 /* lowdown classes and related settings */
 
-.footnotes {
-  font-size: 0.9em;
-  margin-top: 3em;
-}
-
-a[rev="footnote"] {
-  border: none;
-}
+.footnotes { font-size: 0.9em; margin-top: 3em; }
+  a[rev="footnote"] { border: none; }
 
 /* Main elements: content-wrapper, sidebar, article, header, footer */
 
 #content-wrapper {
-  display: flex;
-  flex-direction: row;
-  min-height: calc(100vh - 16px);
-  border-right: 3px solid var(--accent-line-color);
-}
-
-.sidebar {
-  max-width: 11.2em;
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  font-size: 1.2em;
-  padding: 0 1em;
-  border: 3px solid var(--accent-line-color);
-  border-right: none;
-  border-top: none;
-}
-
-.centered, article {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.header, .footer {
-  font-family: Arial;
-}
+    border-right: 3px solid var(--accent-line-color);
+    display: flex;
+    flex-direction: row;
+    min-height: calc(100vh - 16px);
+  }
+  .sidebar {
+      border: 3px solid var(--accent-line-color);
+      border-top: none;
+      border-right: none;
+      display: flex;
+      flex-direction: column;
+      font-size: 1.2em;
+      max-width: 11.2em;
+      padding: 0 1em;
+      text-align: left;
+    }
+    #settingsWrapper { margin: 0.58em 0 1em 0; font-size: 1.2em; }
+    .header, .footer { font-family: Arial; }
+    .header          { margin: 0.8em 0; font-size: 1.5em; }
+    .footer {
+        font-size: 0.7em;
+        margin-bottom: 1em;
+        overflow-x: hidden;
+      }
+    .footer > * { white-space: nowrap; }
 
-.header {
-  font-size: 1.5em;
-  margin: 0.8em 0;
-}
+    /* 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: 5em; }
 
-.footer {
-  overflow-x: hidden;
-  font-size: 0.7em;
-  margin-bottom: 1em;
-}
-
-.footer > * {
-  white-space: nowrap;
-}
+    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 */
+        min-height: calc(100vh - 228px);
+        overflow: auto;
+        padding: 0 1em;
+      }
+    article, .centered {
+        margin-left: auto;
+        margin-right: auto;
+      }
+      /* back-to-top.js */
+      #scrollBtn {
+        background-color: transparent;
+        bottom: 1em;
+        border: 1px solid;
+        display: none;
+        font-size: 1rem;
+        position: fixed;
+        padding: 0.3em;
+        right: 1em;
+        transition-duration: 0.5s;
+        z-index: 1;
+      }
 
 /* Main elements helpers */
 
 .arrowed-list {
-  display: grid;
-  grid-column-start: 1;
-  grid-column-end: 1;
-  row-gap: 0;
-  margin-bottom: 0.5em;
-}
-
-.arrowed-list > *, .arrowed-list > *:hover {
-  border: none;
-  padding: none;
-  line-height: 1.2em;
-}
-
-.arrowed-list > *::before {
-  content: "\251C  ";
-  color: var(--border-color);
-}
-
-.arrowed-list > *:last-child::before {
-  content: "\2514  ";
-}
-
-#settingsWrapper {
-  font-size: 1.2em;
-  margin: 0.58em 0 1em 0;
-}
+    display: grid;
+    grid-column-start: 1;
+    grid-column-end: 1;
+    margin-bottom: 0.5em;
+    row-gap: 0;
+  }
+  .arrowed-list > *, .arrowed-list > *:hover {
+      border: none;
+      line-height: 1.2em;
+      padding: none;
+    }
+  .arrowed-list > *::before {
+      color: var(--border-color);
+      content: "\251C  ";
+    }
+  .arrowed-list > *:last-child::before {
+      content: "\2514  ";
+    }
 
 /* Index page styling */
 
 #index-contents {
-  width: 100%;
-  padding: 0 1em;
-  box-sizing: border-box;
-  min-height: 7.6em;
-}
-
-#index-contents-text {
-  float: none;
-}
-
-#index-contents-img {
-  max-width: 7.6em;
-  float: left;
-  margin-right: 1em;
-}
-
-#index-list {
-  margin-block-end: calc(1em + 10px);
-}
-
-/* Script-specific styling */
-
-#expandNavbarBtn {
-  float: right;
-}
-
-.sidebar-hidden {
-  min-height: auto;
-  position: absolute;
-}
-
-.sidebar-hidden > :not(.header) {
-  display: none;
-}
-
-.sidebar-hidden + .noMaxWidth {
-  margin-top: 5em;
-}
+    box-sizing: border-box;
+    min-height: 7.6em;
+    padding: 0 1em;
+    width: 100%;
+  }
+  #index-contents-text { float: none; }
+  #index-contents-img {
+      float: left;
+      margin-right: 1em;
+      max-width: 7.6em;
+    }
+  #index-list { margin-block-end: calc(1em + 10px); }
 
 /* Small screen support */
 
 @media screen and (max-width: 610px) {
-  article {
-    max-width: calc(100vw - 16px - 3px);
-  }
-
-  #content-wrapper {
-    flex-direction: column;
-  }
-
-  #index-contents {
-    padding: 0;
-    min-height: 4.38em;
-  }
+  article            { max-width: calc(100vw - 16px - 3px); }
+  table td, table th { word-break: break-all; }
 
-  #index-contents-img {
-    max-width: 4.38em;
-  }
+  #content-wrapper { flex-direction: column; }
+    #index-contents {
+        min-height: 4.38em;
+        padding: 0;
+      }
+    #index-contents-img { max-width: 4.38em; }
 
   .sidebar {
-    max-width: initial;
-    margin-right: 8px;
-    padding-right: 1em;
-  }
-  .sidebar-hidden {
-    position: initial;
-  }
-  .sidebar-hidden > :not(.header) {
-    display: none;
-  }
-  .sidebar-hidden + .noMaxWidth {
-    margin-top: 0;
-  }
-
-  table td, table th {
-    word-break: break-all;
-  }
-
-  #changeWidthBtn {
-    display: none;
-  }
+      margin-right: 8px;
+      max-width: initial;
+      padding-right: 1em;
+    }
+    .sidebar-hidden                 { position: initial; }
+    .sidebar-hidden > :not(.header) { display: none; }
+    .sidebar-hidden + .noMaxWidth   { margin-top: 0; }
+    /* page-width.js */
+    #changeWidthBtn { display: none; }
 }
 
 /* Printing support */
@@ -516,199 +419,56 @@ a[rev="footnote"] {
 @media print {
   h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img,
   nav, #scrollBtn {
-    display: none !important;
-  }
-  body {
-    margin: 0;
-  }
-  body, article {
-    background-color: white;
-    border: none !important;
-  }
-}
-
-/* Script specific styling */
-
-.btn:hover {
-  cursor: pointer;
-}
-
-.clicked-image {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  max-width: none !important;
-  max-height: none !important;
-  border: none;
-  object-fit: contain;
-  left: 0;
-  top: 0;
-  padding: 1em;
-  z-index: 2;
-  background-color: var(--bg-color);
-}
-
-.body-on-clicked-image {
-  overflow: hidden;
-}
-
-#scrollBtn {
-  font-size: 1rem;
-  position: fixed;
-  right: 1em;
-  bottom: 1em;
-  z-index: 1;
-  border: 1px solid;
-  transition-duration: 0.5s;
-  padding: 0.3em;
+      display: none !important;
+    }
 
-  background-color: transparent;
-  display: none;
+  body { margin: 0; }
+    body, article {
+        background-color: white;
+        border: none !important;
+      }
 }
 
-.setting-btn {
-  vertical-align: middle;
-  border: none !important;
-}
-
-#presentCont {
-  display: none;
-}
+/* presentation.js */
+#presentCont { display: none; }
 
 /* File tables */
+.file-wrapper { margin: 0.5em 0; }
+  .file-wrapper > summary {
+      background: url('/img/folder-plus-tabler.svg') no-repeat left top;
+      list-style: none;
+      padding-left: 1.5em;
+      user-select: none;
+      -webkit-user-select: none;  
+      -moz-user-select: none;    
+      -ms-user-select: none;      
+    }
+  .file-wrapper[open] > summary {
+      background: url('/img/folder-minus-tabler.svg') no-repeat left top;
+    }
+  .file-wrapper > summary:hover { cursor: pointer; }
 
-.file-wrapper {
-  margin: 0.5em 0;
-}
-
-.file-wrapper > summary {
-  background: url('/img/folder-plus-tabler.svg') no-repeat left top;
-  list-style: none;
-  padding-left: 1.5em;
-  -webkit-user-select: none;  
-  -moz-user-select: none;    
-  -ms-user-select: none;      
-  user-select: none;
-}
-
-.file-wrapper[open] > summary {
-  background: url('/img/folder-minus-tabler.svg') no-repeat left top;
-}
-
-.file-wrapper > summary:hover {
-  cursor: pointer;
-}
-
-.file-wrapper > .file-list {
-  margin-left: 1.5em;
-}
-
-.file-list {
-  table-layout: auto;
-  border-collapse: collapse;
-  width: auto;
-}
-
-.file-list td, .file-list tr {
-  border: none !important;
-  padding: 0.2em 0.4em !important;
-}
-
-.file-list tr > td:first-child {
-  padding: 0.2em 0 0.2em 0.2em !important;
-}
+  .file-wrapper > .file-list { margin-left: 1.5em; }
+  .file-list {
+      border-collapse: collapse;
+      table-layout: auto;
+      width: auto;
+    }
+    .file-list td, .file-list tr {
+        border: none !important;
+        padding: 0.2em 0.4em !important;
+      }
+    .file-list tr > td:first-child {
+        padding: 0.2em 0 0.2em 0.2em !important;
+      }
 
 /* Syntax highlighting (colours are inspired from gruvbox) */
 
-.cst, .chr { /* Constant, Chars */
-  color: #d787af;
-}
-
-.com { /* Comment */
-  color: #8a8a8a;
-}
-
-.kwd { /* Keyword */
-  color: #d75f5f;
-}
-
-.kwD { /* Second keyword color */
-  color: #87af87;
-}
-
-.kWD { /* Third keyword color */
-  color: #ff8700;
-}
-
-.typ { /* Type */
-  color: #ffaf00;
-}
-
-.cls { /* Class */
-  color: #87afaf;
-}
-
-.fnc, .str { /* Function names, Strings */
-  color: #afaf00;
-}
-
-/* OpenSans font */
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-Regular.ttf);
-  font-weight: normal;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-Bold.ttf);
-  font-weight: bold;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-ExtraBold.ttf);
-  font-weight: 800;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-Italic.ttf);
-  font-weight: normal;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-BoldItalic.ttf);
-  font-weight: bold;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-ExtraBoldItalic.ttf);
-  font-weight: 800;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-Semibold.ttf);
-  font-weight: 600;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url(/fonts/open-sans/OpenSans-SemiboldItalic.ttf);
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
+/* Constant, Chars         */ .cst, .chr { color: #d787af; }
+/* Comment                 */ .com       { color: #8a8a8a; }
+/* Keyword                 */ .kwd       { color: #d75f5f; }
+/* Second keyword color    */ .kwD       { color: #87af87; }
+/* Third keyword color     */ .kWD       { color: #ff8700; }
+/* Type                    */ .typ       { color: #ffaf00; }
+/* Class                   */ .cls       { color: #87afaf; }
+/* Function names, Strings */ .fnc, .str { color: #afaf00; }