@import "settings.css";
@import "post.css";

/* These are the blog's main styles.
*
* Originally, it was based on sakura-earthly.css v1.3.1
* (https://github.com/oxalorg/sakura/)
* but eventually converged to something different.
* Check Sakura out if you are interested in something more polished,
* and less specific to this site.
*/

/*
  ~*~ CSS Reset ~*~
Adapted from
  - https://www.joshwcomeau.com/css/custom-css-reset/
  - https://meyerweb.com/eric/tools/css/reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin:  0;
  padding: 0;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/*
  ~*~ General Styles ~*~
*/

html {
  scroll-behavior: smooth;
  /* font-size:       62.5%; */
  position:        relative;
  min-height:      100%;
  font-family:     var(--font-base);
}

body {
  background-color: var(--color-background);
  color:            var(--color-typography);
  margin:           0;
  font-size:        var(--font-size-base);
  line-height:      1.618;
  overflow-wrap:    break-word;
  word-wrap:        break-word;
  word-break:       break-word;
  hyphens:          auto;
  text-rendering:   optimizeLegibility;
  font-kerning:     normal;
}


::selection {
  color:            var(--color-typography);
  background-color: var(--color-crystal);
}

/* ~*~ Typography ~*~ */

p {
  margin-top:    0.3rem;
  margin-bottom: 0.7rem;
  text-wrap:     pretty;
  font-variant-numeric: oldstyle-nums;
  /* Hiphenate on desktop but not on mobile.
   There is too little space on small screens for this to look good. */
  text-align: justify;
}

@media (max-width: 382px) {
  p {
    text-align: left;
    hyphens:    none;
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height:   1.1;
  font-family:   var(--font-heading);
  font-weight:   600;
  text-wrap:     balance;
  margin-top:    2em;
  margin-bottom: 1em;
}

h1 {
  text-align: center;
  font-size:  2.0rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 1rem;
}

small, sub, sup {
  font-size: 75%;
}

label, legend, fieldset {
  margin-bottom: 0.5rem;
  font-weight:   600;
}

@media print {
  html {
    background-color: white;
  }

  body {
    background-color: transparent;
    color:            black;
    font-size:        12pt;
  }

  p, h2, h3 {
    orphans:          3;
    widows:           3;
  }

  h2, h3, h4 {
    page-break-after: avoid;
  }
}

/* Links */

a, a:visited {
  position:        relative;
  text-decoration: none;
  color:           var(--color-accent);
}

a:hover {
  color: var(--color-attention);
}

/* Illustrations */

figure {
  margin:    auto;
}

img, picture, video, canvas, svg, object {
  display: block;
  max-width: 100%;
}

img, video, object, svg {
  height:    auto;
  margin:    0 auto;
}

/* Verbatim Code */

.sourceCode {
 background-color:  transparent;
 overflow:          visible;
}

pre {
  display:          block;
  background-color: initial;
  font-family:      var(--font-code);
  overflow-x:       auto;
}

code {
  font-size:        1rem;
  padding:          0 0.5rem;
  white-space:      pre-wrap;
  hyphens:          manual;
}

pre > code {
  padding:          0;
  white-space:      pre;
  overflow:         visible;
  overflow-wrap:    normal;
}

/* Decorations */

hr {
  width:            100%;
  background-color: var(--color-typography);
  border:           none;
  height:           1px;
  margin:           1em 0;
}

ul {
  padding-left:    1.4rem;
  margin-top:      0;
  margin-bottom:   1.4rem;
  list-style-type: square;
}

ol {
  padding-left: 1.7rem;
  margin-top:   1rem;
}

li {
  margin-bottom: 0.4rem;
}

/* Nested lists */
li > ol, li > ul {
  margin-top: 0;
}

/* Quotes */

blockquote {
  margin-left:      0;
  margin-right:     0;
  margin-bottom:    2.5rem;

  padding-left:     1.0rem;
  padding-top:      0.8rem;
  padding-bottom:   0.8rem;
  padding-right:    0.8rem;

  border-left:      5px solid var(--color-accent);
}

blockquote p {
  margin-bottom: 0;
}

/* Tables -- PANDOC + Sakura */

table {
  margin:               1rem auto;
  border-collapse:      collapse;
  max-width:                100%;
  overflow-x:           auto;
  display:              table;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

table caption {
  margin-bottom: 0.75rem;
}

th {
  text-align: center;
  background: var(--color-lightning);
}

td, th {
  padding: 1rem;
}

tr {
  transition: background 0.6s;

  &:hover {
    background: var(--color-super);
  }
}

/*
  ~*~ Class-dependent ~*~ ======================================================
*/

/* ~*~ Header ~*~ */

#top-bar {
  width: calc(var(--article-width));
  margin: 16px auto 3rem;

  ul {
    font-size:       1.2rem;
    margin:          0;
    padding:         0;
    overflow:        hidden;
    list-style-type: none;
    display:         flex;
    flex-wrap:       wrap;
    column-gap:      5%;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-typography);
  }

  li {
    display: inline;
    margin-bottom: 0;
  }

  .home-button {
    margin-right: auto;
  }

  a {
    text-decoration: none;
    color:           var(--color-faded);
    transition: color 0.3s ease-in;

    &:hover,
    &:active {
      border: none;
      color:  var(--color-typography);
      transition: color 0.3s ease-out;
    }
  }
}


/*
  ~*~ Footer ~*~
*/

body {
  margin-bottom: 8rem;
}

#bottom-bar {
  font-size:      0.75rem;
  color:          var(--color-typography);
  text-align:     center;
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         0;
  margin-left:    auto;
  margin-right:   auto;
  max-width:      500px;
  overflow:       hidden;
  padding-top:    16px;
  padding-bottom: 16px;
  border-top:     1px solid var(--color-faded);
}


/*
  ~*~ Toggle Button for Checkbox ~*~
*/

input[type="checkbox"] {
  appearance:     none;              /* https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling */
  position:       relative;
  width:          1.5rem;
  height:         1.5rem;
  border:         1px solid var(--color-typography);
  border-radius:  3px;
  cursor:         pointer;
  transition:     background-color 0.3s;
  vertical-align: middle;
  display:        inline-grid;
  place-content:  center;
}

input[type="checkbox"]::before {
  content:       "";
  width:         1rem;
  height:        1rem;
  border-radius: 3px;
  transform:     scale(0);
  box-shadow:    inset 1rem 1rem var(--color-accent);
  transition:    0.3s transform ease-in-out;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:checked {
  border:  1px solid var(--color-accent);
}

input[type="checkbox"]:focus {
  border: 2px solid currentColor;
}

input[type="checkbox"]:hover {
  box-shadow: inset 0px 0px 2px var(--color-typography);
}

/*
  ~*~ Vendored ~*~
*/

/* make equations scrollable */
.katex-display {
  overflow: auto hidden;
  margin-top: 0;
  margin-bottom: 0;
}