@charset "utf-8";
@import './fonts';

html {
  overflow-y: scroll;
}

body {
  background: $background;
  color: $foreground;
  font: 400 100%/1.75 OpenSans, system-ui, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}

* + * {
  margin-top: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Oswald, Arial, sans-serif;
  margin-top: 2rem;
  font-weight: normal;
}

h1, h2 {
  font-variation-settings: "wght" 600;
  text-transform: uppercase;
}

h3, h4 {
  font-variation-settings: "wght" 400;
}

h3 {
  font-size: 1.33rem;
}

a {
  color: $link-colour;
  text-decoration: none;
  border-bottom: .15rem solid $link-colour;

  &:hover {
    font-weight: bold;
  }

  .header & {
    border-bottom: none;
    color: $foreground;
  }

  .social-list__link & {
    border-bottom: none;
    fill: $social-icon-fill;
  }
}

[class*="__container"] {
  padding-left: $content-padding;
  padding-right: $content-padding;
  max-width: calc(#{$content-width} - (2 * #{$content-padding}));
  width: 100%;

  @media (max-width: $on-mobile) {
    padding-left: $content-padding-mobile;
    padding-right: $content-padding-mobile;
    max-width: calc(#{$content-width} - (2 * #{$content-padding-mobile}));
  }
}

.header {
  display: flex;
  justify-content: center;
  align-items: end;
  margin-bottom: 2rem;
  position: sticky;
  -webkit-font-smoothing: antialiased;
  top: -($header-height + $header-margin-top - $header-pinned-height);
  height: $header-height + $header-margin-top;

  @media (max-width: $on-mobile) {
    top: -($header-height + ($header-margin-top/2) - $header-pinned-height);
    height: $header-height + ($header-margin-top/2);
  }

  &__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-family: Oswald, Arial, sans-serif;
    font-variation-settings: "wght" 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;

    @media (max-width: $on-mobile) {
      font-size: 2rem;
    }

    a {
      text-decoration: none;
      color: $foreground;

      &:hover {
        font-weight: unset;
      }
    }

    h1 {
      all: unset;
    }
  }

  &__nav-toggle {
    display: none;
  }

  label[for="nav-toggle"] {
    display: none;
    margin-top: 0;
    height: 24px;
    width: 24px;
    color: $nav-menu-icon-fill;
    font-size: 1.33rem;
    cursor: pointer;
    user-select: none;
  }

  &__links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  &__link {
    margin: 0 2rem;
  }

  a.active {
    border-bottom: .15rem solid $foreground;
  }

  &--pinned {
    background: $header-pinned-background;
    box-shadow: 0 -1rem 2rem 0 $header-pinned-boxshadow;
  }

  &--pinned & {
    &__container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: $header-pinned-height;
      position: relative;
    }

    &__title {
      font-size: 1.67rem;

      &:only-child {
        margin-left: auto;
        margin-right: auto;
      }

      @media (max-width: $on-mobile) {
        font-size: 1.33rem;
      }
    }

    &__nav {
      margin-top: 0;
      display: flex;
      align-items: center;

      @media (max-width: $on-tablet) {
        background: $header-pinned-background;
        flex-direction: column;
        align-items:end;
        position: absolute;
        border: .2rem solid $nav-pinned-border;
        border-radius: $block-border-radius;
        right: $content-padding;
        top: .67rem;
        padding: .5rem;
      }

      @media (max-width: $on-mobile) {
        right: $content-padding-mobile;
      }
    }

    &__nav-toggle {
      display: block;
      opacity: 0;
      height: 0;
      margin: 0;
    }

    &__nav-toggle:focus-visible + label {
      border: .15rem solid $foreground;
      border-radius: $block-border-radius;
      box-sizing: border-box;
    }

    &__link {
      margin: 0;
      margin-left: 3rem;

      @media (max-width: $on-tablet) {
        text-align: right;
        margin-top: .67rem;
        margin-left: 1rem;
      }
    }

    &__nav label[for="nav-toggle"] {
      @media (max-width: $on-tablet) {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    &__nav-toggle ~ .header__links {
      @media (max-width: $on-tablet) {
        display: none;
      }
    }

    &__nav-toggle:checked ~ .header__links {
      @media (max-width: $on-tablet) {
        display: block;
      }
    }
  }
}

.content {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;

  &__container {
    overflow: auto;
  }
}

.social-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;

  &__link {
    margin-top: 0;

    & + .social-list__link {
      margin-left: 4rem;
    }

    svg {
      width: 2rem;
      height: 2rem;
    }
  }
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 8rem;

  @media (max-width: $on-mobile) {
    margin-bottom: 4rem;
  }


  &__author {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  &__email {
    margin-top: 0;
  }
}

.post-list-title {
  margin-top: 4rem;
}

.post-list {
  list-style-type: none;
  padding-left: 0;

  &__post {
    & + .post-list__post {
      margin-top: 2rem;
    }
  }

  &__title {
    margin: 0;
  }

  &__date {
    color: $post-meta-colour;
  }

  &__excerpt {
    p {
      margin: 0;
    }
  }
}

.post {
  &__header {
    margin-bottom: 2rem;
  }

  &__title {
    margin-bottom: .5rem;;
    line-height: 1.2;
  }

  &__date,
  &__author {
    color: $post-meta-colour;
  }
}

blockquote {
  background: $quote-background;
  margin: 0;
  padding: 1rem 2rem 1rem;
  border: .1rem solid $quote-border;
  border-left: .3rem solid $quote-border-accent;
  border-radius: $block-border-radius;
  font-style: italic;

  p {
    margin: 0;
  }

  em {
    font-variation-settings: "wght" 600;
  }
}


pre {
  padding: 1rem;

  &.highlight {
    border: none;
  }

  .highlight > & {
    margin: 0;
  }
}

.highlight {
  margin: 0;
  border: .1rem solid $codeblock-border;
  border-left: .3rem solid $codeblock-border-accent;
  border-radius: $block-border-radius;
  overflow-x: auto;
  background: $codeblock-background;

  code {
    padding: 0;
    border: none;
  }
}

code {
  font-family: FiraCode, monospace;
}

:not(pre) > code {
  background: $inline-code-background;
  padding: .2rem .25rem;
  border-radius: $block-border-radius;
  border: .15rem solid $inline-code-border;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: $table-background;
  border-radius: $block-border-radius;

  @media (max-width: $on-tablet) {
    display: block;
    overflow-x: auto;
  }

  thead tr {
    text-align: left;
    background: $table-header-background;
    border-bottom: .2rem solid $table-header-bottom-border;
  }

  th, td {
    padding: .5rem .67rem;
  }

  tr + tr {
    border-top: 2px solid $table-row-border;
  }

  th + th,
  td + td {
    border-left: 2px solid $table-row-border;
  }
}