/* Main style sheet for Moeka
 * Copyright (C) 2023 Daniel Schadt
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

$font-prefix: '../fonts' !default;
@import "plex/ibm-plex.scss";
@import "source-serif.scss";

$link-color: #35317A;
$link-hover-color: #0C00E0;
$primary-color: #292933;
$muted-color: #5e5e5e;
$tinted-background-color: #efefef;

$tag-background-color: #CBE6FA;
$tag-background-hover-color: #CC3948;
$tag-hover-color: #CBE6FA;

$line-height: 1.4;

$spacing: 30px;
$social-icon-size: 32px;

$breakpoint: 1150px;

/* General typographic improvements. */
a {
  text-decoration: none;
  font-style: italic;
  color: $link-color;

  &:hover {
    color: $link-hover-color;
  }
}
body {
  hyphens: none;
}

/* Font selection */
body {
  font-family: "IBM Plex Sans", sans-serif;
}
pre, code, tt {
  font-family: "IBM Plex Mono", monospace;
}

/* Main content styling */
#mainArea {
  font-size: 15pt;
  padding-top: $spacing;
}
.topmost {
  margin-top: 0px;
}

/* Styling for the article list */
.article-list {
  .article-meta {
    margin-top: 0;
    margin-bottom: 5px;
    color: $muted-color;
    font-size: 13pt;
  }

  h2 {
    /* There is enough margin around the paragraphs */
    margin: 0;
    a {
      color: $primary-color;
      font-style: normal;
      &:hover {
        color: $link-hover-color;
      }
    }
  }

  .read-more-link {
    display: block;
    text-align: right;
  }

  article {
    margin-bottom: 100px;
    .description {
      line-height: $line-height;
      hyphens: auto;
    }
  }
}

/* Heading style, applies for articles as well as pages */
h1 {
  font-family: "Source Serif 4 Caption";
  font-weight: 700;
  font-size: 33pt;
  text-align: center;
  margin-bottom: 10px;
}
h2 {
  font-family: "Source Serif 4 Subhead";
  font-weight: 700;
  font-size: 25pt;
  margin-bottom: 25px;
  margin-top: 50px;
}
h3 {
  font-family: "Source Serif 4";
  font-weight: 700;
  font-size: 19pt;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Styling for a single article */
.article {
  .article-meta {
    margin-top: 0;
    margin-bottom: 0;
    color: $muted-color;
    text-align: center;
    font-size: 13pt;
  }

  .content p, .content li {
    line-height: $line-height;
    hyphens: auto;
  }

  .content table {
    margin: auto;
    border-top: 2px solid $primary-color;
    border-bottom: 2px solid $primary-color;
    border-left: none;
    border-right: none;
    border-collapse: collapse;

    thead {
      border-bottom: 1px solid $primary-color;
    }

    th {
      border: none;
      padding: 0.2em 0.6em;
      background-color: $tinted-background-color;
    }

    td {
      border: none;
      padding: 0.2em 0.6em;
    }
  }

  code, tt {
    font-weight: 350;
  }

  img {
    display: block;
    margin: 0 auto;
  }
}
p.asterism {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;

  height: 20px;
  background-image: url("../images/asterism.svg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
}
/* Undo the usual header spacing so we can nicely and evenly space the asterism */
div.section:has(p.asterism) + div h2 {
  margin-top: 0px;
}

/* Styling for article tags */
ul.tags {
  list-style-type: none;
  padding-left: 0;
  font-size: 12pt;
  /* Add 8px here and 8px in the li element, that way we also get separation
   * between multiple rows of tags. */
  margin-top: 8px;
  li {
    display: inline-block;
    margin-right: 5px;
    margin-top: 8px;
  }
  a {
    font-style: normal;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: $tag-background-color;
    &:hover {
      color: $tag-hover-color;
      background-color: $tag-background-hover-color;
    }
  }
}

/* Special code block handling */
.highlight {
  padding: 10px;
  font-size: 12pt;
  border-radius: 4px;
  pre {
    margin: 0;
    width: 100%;
    overflow: scroll;
  }
}
.literal-block {
  padding: 10px;
  font-size: 12pt;
  border-radius: 4px;
  background-color: #272822;
  color: #f8f8f2;
  overflow: scroll;
}

/* Blockquotes */
blockquote {
  padding: 0;
  font-size: 14pt;
  font-weight: 350;
  margin-left: 2em;
  margin-right: 1em;
  hyphens: auto;
}

/* Footnotes and their references */
.footnote-reference {
  vertical-align: super;
  font-size: 70%;
}
.footnote-reference, .fn-backref {
  font-style: normal;
}
.footnote {
  font-size: 80%;
}

/* Side menu styling */
#sideBanner {
  #mainLogo img {
    max-width: 100%;
  }
  #mainTitle {
    font-size: 20pt;
    font-weight: bold;
  }
  a {
    color: $primary-color;
    font-style: normal;
    &:hover {
      color: $link-hover-color;
    }
  }
  font-size: 14pt;
  ul {
    list-style-type: none;
    padding-left: 0;
    li a {
      padding-bottom: 10px;
      display: block;
    }
  }
  .feed-icon {
    max-width: 20px;
  }
}

/* Footer styles */
footer {
  margin-top: 40px;
  text-align: center;
  font-size: 12pt;
  color: $muted-color;
  p {
    margin: 5px 0;
  }
  .icons {
    margin-bottom: 40px;
  }
}
div.social-icon {
  display: inline-block;
  width: $social-icon-size;
  height: $social-icon-size;
  margin-right: calc($spacing / 2);
}
img.social-icon {
  width: 100%;
  margin: auto;
  /* The Mastodon icon looks a bit off if it's simply aligned with the others, as
   * it has that "extension" on the bottom and the top side is a bit bulkier. By
   * moving it down just a notch it makes the icons look more aligned. */
  &.mastodon-icon {
    margin-bottom: -5px;
  }
}
#licenceLine {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cc-icon {
  height: 20px;
  margin-right: 5px;
}

/* Main layout for big screens */
@media (min-width: $breakpoint) {
  #sideMenuToggle {
    display: none;
  }
  #openSideBanner {
    display: none;
  }
  #hideMenu {
    display: none;
  }
  #sideBanner {
    max-width: calc($breakpoint - 708px);
    position: fixed;
    padding-top: $spacing;
    padding-left: $spacing;
  }
}

#mainArea {
  max-width: 35em;
  margin: 0 auto;
}

/* Style for small screens */
@media (max-width: $breakpoint) {
  #sideMenuToggle {
    display: none;

    &:checked + .sideMenuBtn > span {
      transform: translateY(12px) rotate(45deg);
    }
    &:checked + .sideMenuBtn > span::before {
      top: 0px;
      transform: rotate(0deg);
    }
    &:checked + .sideMenuBtn > span::after {
      top: 0px;
      transform: rotate(90deg);
    }
  }

  .sideMenuBtn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;

    & > span {
      transform: translateY(12px);
    }

    & > span, & > span::before, & > span::after {
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #616161;
      transition-duration: .25s;
    }
  }

  .sideMenuBtn > span::before {
    content: '';
    top: -8px;
  }

  .sideMenuBtn > span::after {
    content: '';
    top: 8px;
  }

  #sideMenuToggle:checked ~ header {
    left: 0 !important;
  }

  #sideBanner header {
    display: block;
    position: fixed;
    top: 0;
    left: calc(-1 * (442px + 2 * $spacing));
    width: 442px;
    height: 100%;
    margin: 0;
    padding: $spacing $spacing;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
  }

  #mainLogo {
    display: none;
  }

  #mainArea {
    max-width: 35em;
  }
}