quetre/views/sass/_layouts.scss

////////////////////////////////////////////////////////
//                     IMPORTS
////////////////////////////////////////////////////////
@use 'mixins' as *;

////////////////////////////////////////////////////////
//                     HEADER
////////////////////////////////////////////////////////
.header {
  background-color: var(--clr-hf-bg);

  &__about {
    min-height: 100vh;
    background-image: linear-gradient(var(--grad-hf));

    display: grid;
    grid-template-rows: auto 1fr;
  }

  &__bar {
    padding: var(--space-300) var(--space-500);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-300);

    @include respond-to(bp-750) {
      padding: var(--space-300);
    }
    @include respond-to(bp-450) {
      padding: var(--space-200) var(--space-300);
    }
  }

  &__logo {
    font-size: var(--fs-300);
    font-family: var(--ff-alt-alpha);
    color: var(--clr-hf-logo);
    font-weight: 700;

    @include respond-to(bp-450) {
      font-size: var(--fs-250);
    }
  }

  &__link {
    text-decoration: none;
  }

  &__nav-box {
    // margin-left: auto; // for pushing nav to the right
    align-self: center;
    @include respond-to(bp-650) {
      // margin-left: auto;
      display: none;
    }
  }

  &__nav {
    display: flex;
    gap: var(--space-300);
  }

  &__nav-item {
    list-style: none;
  }

  &__nav-link {
    font-size: var(--fs-200);
    font-weight: 500;
    // color: var(--clr-link);
    @include format-link(var(--clr-hf-link), var(--clr-hf-link-alt-alpha));

    @include respond-to(bp-750) {
      font-size: var(--fs-180);
    }
  }

  &__misc {
    display: flex;
    gap: var(--space-200);
  }

  &__theme {
    height: var(--fs-300);
    width: var(--fs-300);

    @include respond-to(bp-450) {
      height: var(--fs-250);
      width: var(--fs-250);
    }
  }

  &__info {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr min-content 0.2fr; // .2fr is bottom padding
    text-align: center;
  }

  &__hero {
    font-size: var(--fs-600);
    font-family: var(--ff-alt-alpha);
    color: var(--clr-hf-heading);
    font-weight: 700;

    @include respond-to(bp-900) {
      font-size: var(--fs-500);
    }
    @include respond-to(bp-750) {
      font-size: var(--fs-400);
      padding: var(--space-200);
    }
  }

  &__down {
    align-self: end;
  }
}

////////////////////////////////////////////////////////
//                     FOOTER
////////////////////////////////////////////////////////
.footer {
  padding: var(--space-400);
  display: grid;
  gap: var(--space-300);
  align-items: center;

  background: var(--clr-hf-bg);

  &__about {
    padding-top: var(--space-800);
    background: linear-gradient(to top, var(--grad-hf));

    @include respond-to(bp-750) {
      padding-top: var(--space-500);
    }
  }

  &__logo {
    justify-self: center;
    font-size: var(--fs-600);
    color: var(--clr-hf-logo);
    font-family: var(--ff-alt-alpha);
    font-weight: 700;

    @include respond-to(bp-900) {
      font-size: var(--fs-500);
    }

    @include respond-to(bp-750) {
      font-size: var(--fs-400);
    }
  }

  &__nav {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    gap: var(--space-200);
    flex-wrap: wrap;
  }

  &__nav-item {
    font-size: var(--fs-180);
  }

  &__link {
    @include format-link(var(--clr-hf-link), var(--clr-hf-link-alt-alpha));
    font-weight: 500;
  }

  &__license {
    justify-self: center;
    font-size: var(--fs-180);
    color: var(--clr-hf-text);
    text-align: center;
  }

  @include respond-to(bp-450) {
    padding: var(--space-300);
    gap: var(--space-200);
  }
}

////////////////////////////////////////////////////////
//                      TEXT
////////////////////////////////////////////////////////
.text {
  // main text formatting
  &__container {
    border-block: 1px solid var(--clr-base-icon-alt-alpha);
    padding: var(--space-100);

    // lobotomised owl selector. equivalent to '> *:not(:first-of-type)' but has no/lowest specificity, and hence better for cascading. who says css isn't a programming language :p
    > * + * {
      // every direct child except first will have padding-top
      margin-top: 1em;
    }

    // some math eqations will overflow.
    // in mathjax v3, they can't be broken as of now. this is the best solution i could come up with.
    overflow-x: auto;
  }

  // paragraphs
  &__para {
    line-height: 1.4;
    overflow-wrap: anywhere; //breaks long words without hyphens
  }

  &__image {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin-inline: auto;
  }

  &__quote {
    padding-left: 1em;
    border-left: 3px solid var(--clr-base-icon-alt-alpha);
    color: var(--clr-base-text-alt-alpha);
  }

  &__unordered-list,
  &__ordered-list {
    display: list-item;
    margin-left: 1em;
    list-style-position: inside;

    &--1 {
      margin-left: 2em;
    }
    &--2 {
      margin-left: 3em;
    }
  }

  &__unordered-list {
    &--1 {
      list-style-type: circle;
    }

    &--2 {
      list-style-type: square;
    }
  }

  &__ordered-list {
    list-style-type: decimal;
    padding-top: 0.7em;

    &--1 {
      list-style-type: lower-alpha;
    }

    &--2 {
      list-style-type: lower-roman;
    }
  }

  &__code {
    margin-top: 0;
    white-space: pre-wrap;
    background: var(--clr-code-bg);
    color: var(--clr-code-text);
    padding: 0 1em;
  }

  &__hr {
    margin: 2em auto 1em auto;
    width: 30%;
    border: 1px solid var(--clr-base-icon-alt-alpha);
    text-align: center;
  }

  &__embed {
    padding: 1em;

    &-tweet {
      border: 1px solid var(--clr-base-icon-alt-alpha);
      background-color: var(--clr-code-bg);

      // for links in tweet
      a {
        @include format-link(
          var(--clr-base-link),
          var(--clr-base-link-alt-alpha),
          true
        );
      }
    }
  }

  // spans
  &__span-math {
  }

  &__span-code {
    white-space: pre-wrap;
  }
  &__span-bold {
    font-weight: 600;
  }
  &__span-italic {
    font-style: italic;
  }

  &__span-link,
  &__link {
    @include format-link(
      var(--clr-base-link),
      var(--clr-base-link-alt-alpha),
      true
    );
  }
}