@import "settings.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.
/*
  ~*~ General Styles ~*~
*/

html {
  scroll-behavior: smooth;
  /* font-size:       62.5%; */
  position:        relative;
  min-height:      100%;
  font-family:     'Montserrat', 'Avenir', 'Avenir Next LT Pro', 'Corbel', 'URW Gothic', source-sans-pro, sans-serif;
}

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

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

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

h1, h2, h3, h4, h5, h6 {
  line-height:   1.1;
  font-family:   'Montserrat', 'Lato', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Noto Sans', sans-serif;
  font-weight:   500;
  margin-top:    2rem;
  margin-bottom: 1rem;
}

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

p {
  margin-top:    0;
  margin-bottom: 1rem;
  /* 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;
  }
}

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

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

/* Links */

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

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

/* Illustrations */

figure {
  margin:    auto;
}

img, video, object {
  display:   block;
  height:    auto;
  margin:    0 auto;
  max-width: 100%;
}

svg {
  height:    auto;
  max-width: 100%;
}


/* Verbatim Code */

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

pre {
  display:          block;
  background-color: initial;
  border-radius:    12px;
  font-family:      'IBM Plex Mono', Consolas, Monaco, monospace;
  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:   2.5rem;
  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;
  width:                100%;
  overflow-x:           auto;
  display:              block;
  font-variant-numeric: lining-nums tabular-nums;
  text-align:           justify;
}

table caption {
  margin-bottom: 0.75rem;
}

tbody {
  margin-top:    0.5em;
  border-top:    1px solid var(--color-typography);
  border-bottom: 1px solid var(--color-typography);
}

th {
  border-top: 1px solid var(--color-typography);
}


td, th {
  padding: 0.5em;
  border-bottom: 1px solid var(--color-faded);
}

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

.illustration {
  display:   block;
  margin:    0 auto;
  height:    auto;
  max-width: 100%;
}

/* ~*~ Header ~*~ */

#top-bar {
  margin: 16px 0 3rem;
}

#top-bar 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);
}

#top-bar li {
  display: inline;
  margin-bottom: 0;
}

#top-bar .home-button {
  margin-right: auto;
}

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

#top-bar a:hover, #top-bar a: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:    1rem;
  padding-bottom: 16px;
  border-top:     1px solid var(--color-faded);
}


/*
  ~*~ Post Typography ~*~
*/

article {
  margin-bottom: 40px;
}

#title-block-header {
  margin: 15vh 20px 15vh;
}

h1.title {
  font-size: max(2rem, calc(1rem + 3vw));
  margin-bottom: 20px;
}

.subtitle {
  display:       block;
  color:         var(--color-faded);
  font-style:    italic;
  margin-bottom: 0.5rem;
  text-indent:   1.5rem;
}


#title-block-header .date {
  text-align: center;
  font-size:  1.3rem;
  color:      var(--color-faded);
}

#share-this-page {
  max-width:  var(--article-width);
  text-align: right;
}

.share-link {
  display: inline-block;
  margin:  1rem 1rem 0 1rem;
}

.hr-text {
  display:        flex;
  align-items:    center;
  text-align:     center;
  color:          var(--color-faded);
  font-size:      1rem;
  font-variant:   small-caps;
  letter-spacing: 0.05rem;
}

.hr-text::before, .hr-text::after {
  content:       '';
  flex:          1;
  border-bottom: 1px solid var(--color-faded);
}

.hr-text::before {
  margin-right: .25rem;
}

.hr-text::after {
  margin-left: .25rem;
}

/*
  ~*~ Post List ~*~
*/

.post-list ul {
  max-width:       var(--article-width);
  margin:          0 auto;
  padding:         0;
  list-style-type: none;
}

.post-list li {
  display: block;
  margin:  0;
}

.post-list a {
  color:           var(--color-typography);
  font-weight:     500;
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-content:   center;
  align-items:     center;
  padding:         0.6rem 0.6rem;
  border-radius:   10px;
  transition:      background 0.3s ease-in-out;
}

.post-list a:hover {
/* TODO: custom property */
  background-color: var(--color-crystal);
  transition:       background 0.3s ease-in-out;

}

.post-list .date {
  font-family: monospace;
  color:       var(--color-faded);
  margin-left: 2rem;
  text-align:  center;
  white-space: nowrap;
}


/*
  ~*~ About Me Page ~*~
*/

.hero {
  max-width:    42rem;
  display:      block;
  justify-self: center;
}

.hero .profile {
  object-fit:    cover;
  margin:        0 auto;
  border-radius: 50%;
  display:       block;
  max-height:    50vh;
  aspect-ratio:  1 / 1;
  min-height: 0;
  height: 80vw;
}

.hero .description {
  margin:          0;
  display:         flex;
  justify-content: flex-start;
  flex-direction:  column;
  padding:         20px;
  gap:             1rem;
}

.name {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  align-items:     flex-end;
  justify-self:    center;
}

.name .title {
  font-size:     min(8vw, 48pt);
  margin-top:    0;
  margin-bottom: 0;
}

.ipa {
  text-align: right;
  font-size:  1.3rem;
  color:      var(--color-faded);
}

.hero .salute {
  text-align:    left;
  margin-top:    0;
  margin-bottom: 0;
}

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

#layout-grid {
  display: grid;
  grid-template-columns: [full-bleed-start] 16px 1fr [main-start] min(var(--article-width), calc(100% - 32px)) [main-end] 1fr 16px [full-bleed-end];
}

#layout-grid > * {
  grid-column: main;
}

.full-bleed {
  grid-column: 1 / -1 !important;
}

/*
  ~*~ Vendored ~*~
*/

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