path: root / src / styles.csma

: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:                 #ebe3d2;
  --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:             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');
}

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;
  }
  nav, article { background-color: var(--bg-color); }
  body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
  *            { line-height: 1.3em; }

  

  .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); }

  <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;
  }


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

/* Very old/unfinished 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; }

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

<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);
  }

  <Content/Article>
}

<Content/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;
  }

  <Post content>

  <Gap> {
    .gap, .gap-small {
      background-color: var(--body-bg);
      margin: 0 -1em;
    }
    .gap       { height: 1.5em; }
    .gap-small { height: 0.5em; }
  }

  <Footer> {
    article > footer {
      margin: 0 -1em;
      padding: 0.5em;
      border: 3px solid var(--accent-line-color);
      border-left: none;
      border-right: none;
    }
  }

  <JavaScript/back-to-top.js>
}

<Article/Post content> {
  <Contents in page>
  <Pagenav>
  <Headers>
  <Images>
  <Paragraphs with icons>
  <Page specific>
}

<Post content/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; }
}

<Post content/Pagenav> {
  #pagenav {
    filter: opacity(64%);
    font-size: 0.8em;
    margin: 0 0 3rem 2rem;
  }
  #pagenav > * { white-space: nowrap; }
  #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
}

<Post content/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; }
}

<Post content/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; }
}

<Post content/Paragraphs with icons> {
  .special-par {
    margin-bottom: 0.25em;
    position: relative;
    padding: 0.5em;
    padding-left: calc(32px + 1em);
  }
  .warn-par { border: 1px dashed #fac848; }
  .important-par { border: 1px solid #f46062; }
  .special-par-icon { vertical-align: middle; }
  .special-par > .special-par-icon {
    position: absolute;
    left: 0.5em;
    top: calc(50% - 16px);
  }
}

<Post content/Page specific> {
  <About page> {
    #about-image {
      float: right;
      margin-right: 1em;
      margin-top: 2em;
      max-width: 7.6em;
    }
  }
}

/* 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; }
  .slide, .absolute-slide { transform: none !important; margin: 0; }
}

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

<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; }
  }
}

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

/*
 * Format follows the following specs:
 * - short rules are put on one line
 *   This means that the last character from the rule is at MOST on column 80
 * - 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
 */