path: root / src / styles.css

/*
 * 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 {
  --bg-color: white;
  --fg-color: black;

  --a-color: #336700;
  --a-hover-color: #3ea100;
  --accent-line-color: #004080;
  --alternating-row-color: #eef0f2;
  --bg-selection-color: #338fff;
  --blockquote-color: #6a737d;
  --blockquote-border-color: #dfe2e5;
  --body-bg: #dbdbdb;
  --border-color: black;
  --code-bg-color: #e2e4e6;
  --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;
}

/* Global */

body {
    background-color: var(--body-bg);
    border-color: var(--border-color);
    color: var(--fg-color);
    min-height: calc(100vh - 16px);
  }
  nav          { background-color: var(--bg-color); }
  body, td, th { font: 18px sans-serif; }
  *            { line-height: 1.3em; }

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-icon        { min-width: 1.3em; vertical-align: text-bottom; }
  .borderless, .oldschool-badge, .file-icon { border: none; }

  .setting-btn { border: none; vertical-align: middle; }
  .btn:hover   { cursor: pointer; }

  /* image-show.js */
  .clicked-image {
      background-color: var(--bg-color);
      border: none;
      height: 100vh;
      left: 0;
      max-width: none;
      max-height: none;
      object-fit: contain;
      padding: 1em;
      position: fixed;
      top: 0;
      width: 100vw;
      z-index: 2;
    }
    .body-on-clicked-image { overflow: hidden; }


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; }
.spacer     { flex: 1; }
.no-wrap {
    color: inherit;
    vertical-align: baseline;
    white-space: nowrap;
  }

ul, ol { padding-inline-start: 30px; }

h1, h2, h3, h4, h5, h6, b {
    border-color: var(--border-color);
    color: var(--header-color);
    line-height: 1.25em;
  }
  h1 { font-size: 1.7em; margin-block-end: 0.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 */

  .h-anchor {
      border: none !important;
      display: inline;
    }
    .h-anchor img {
        border: none;
        height: 1.3em;
        vertical-align: text-bottom;
      }
  .h-anchor 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;
    }

  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 */
code, pre {
  background-color: var(--pre-bg-color);
  font-family: monospace;
  line-height: 1em;
}
  pre {
      overflow: auto;
      padding: 0.9em;
      word-break: normal;
      word-wrap: normal;
    }
  code {
      margin: 0;
      font-size: 85%;
      padding: 0 0.4em;
    }
  pre code {
      border: 0;
      display: inline;
      overflow: visible;
      padding: 0;
      word-wrap: normal;
    }
  pre > code {
      white-space: pre;
      word-break: normal;
      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: 0.6em 0;
    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), table th:not(:empty) { padding: 0.5em; }
  table th:not(:empty) {
      font-size: 1.1em;
      font-weight: bold;
    }

  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 { font-size: 1.2em; }
  dt * { vertical-align: middle; }
  dd   { line-height: 1.5em; margin-bottom: 1em; }


/* 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 */

#content-wrapper {
    border-right: 3px solid var(--accent-line-color);
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 16px);
  }
  #sidebar {
      font-size: 1.2em;
      max-width: 11.2em;
      text-align: left;
      background-color: var(--body-bg);
      margin-right: 8px;
    }
    #sidebar > * {
        border: 3px solid var(--accent-line-color);
        box-sizing: border-box;
        padding: 1rem 1rem;
        width: 100%;
      }
    #sidebar > :not(:first-child) { margin-top: 1.5rem; }

    #header, #footer { font-family: Arial; }
    #header {
        border-right: none;
        font-size: 1.5em;
      }
    #index {
        border-right: none;
        border-bottom: none;
      }
    #settingsWrapper {
        border-top: none;
        border-bottom: none;
        margin: 0.58em 0 1em 0;
        font-size: 1.2em;
      }
    #footer {
        font-size: 0.7em;
        overflow-x: hidden;
        border-left: none;
        border-top: none;
      }
    #footer > * { white-space: nowrap; }

    /* expand-navbar.js */
    #expandNavbarBtn                { float: right; margin: 0.25em 0 0 1em; }
    .sidebar-hidden                 { min-height: auto; position: absolute; }
    .sidebar-hidden > :not(#header) { display: none; }
    .sidebar-hidden + .noMaxWidth   { margin-top: 6em; }

    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;
      }
    article, .centered {
        margin-left: auto;
        margin-right: auto;
      }
      .section {
          margin-bottom: 1.5em;
          background-color: var(--bg-color);
          padding: 0.5em 1em;
        }
      #contents-container { float: right; margin-left: 2.5em; }
        #contents-container > h2 { margin-top: -1rem; }
      #pagenav {
          filter: opacity(64%);
          font-size: 0.8em;
          margin: 0 0 3rem 2rem;
        }
        #pagenav > * {
            white-space: nowrap;
          }
      /* 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;
    margin-bottom: 0.5em;
    row-gap: 0;
  }
  .arrowed-list > *, .arrowed-list > *:hover {
      border: none;
      line-height: 1.2em;
      padding: none;
      display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
    }
  .arrowed-list > *::before {
      color: var(--border-color);
      content: "\251C  ";
    }
  .arrowed-list > *:last-child::before {
      content: "\2514  ";
    }

/* Index page styling */

#index-contents {
    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 {
      border-top: none;
      max-width: calc(100vw - 16px - 3px);
    }
  table td, table th { word-break: break-all; }

  #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: 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 {
      display: none !important;
    }

  body { margin: 0; }
    body, article {
        background-color: white;
        border: none !important;
      }

  pre, code { white-space: pre-wrap !important; }
}

/* presentation.js */
.nodisplay { display: none; }

/* File tables */
.file-wrapper { margin: 0.5em 0; }
  .file-wrapper > summary {
      background: url('/img/folder-plus.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.svg') no-repeat left top;
    }
  .file-wrapper > summary:hover { cursor: pointer; }

  .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) */

/* Constant, Chars         */ .SH-cst, .SH-chr { color: #d787af; }
/* Comment                 */ .SH-com          { color: #8a8a8a; }
/* Keyword                 */ .SH-kwd          { color: #d75f5f; }
/* Second keyword color    */ .SH-kwd2         { color: #ff8700; }
/* Third keyword color     */ .SH-kwd3         { color: #87af87; }
/* Type                    */ .SH-typ          { color: #ffaf00; }
/* Class                   */ .SH-cls          { color: #87afaf; }
/* Function names, Strings */ :not(.SH-cls) > .SH-fnc, .SH-str { color: #afaf00; }
.SH-none { color: var(--fg-color); }