index/assets/styles/main.scss

// Libraries.
@use 'bootstrap' with (
  $grid-breakpoints: (
    xs: 0,
    sm: 601px,
    md: 961px,
    lg: 1281px,
    xl: 1921px,
    xxl: 2561px
  )
);
@use 'animate.css';

// Modules.
@use 'transitions';
@use 'lists';

// CSS Variables.
:root {
  --animate-duration: 1s;
  --animate-delay: 0.75s;
  --animate-repeat: 1;
  --bs-font-sans-serif: 'Lato', 'Times New Roman';
  --bs-font-monospace: 'JetBrains Mono', 'Courier New';
  --bs-body-font-size: 20px;
  --bs-body-line-height: 1.5;
}

// The HTML page.
html {
  height: 100%;
}

// The body element.
body {
  display: flex;
  flex-direction: column;

  position: sticky;

  background-color: rgb(6 25 28);
  background-image: url('~/assets/images/textures/sky.png');
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;

  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: white;

  height: 100%;
}

// Entry point (Vue mount).
#ender-app {
  flex: 1 1 0;
  image-rendering: auto;
}

// Helper classes that don't exist in Bootstrap.
.mh-0 {
  max-height: 100% !important;
}

.inline {
  display: inline;
}

.center {
  text-align: center;
  margin: auto;
}

.nobr {
  white-space: nowrap;
}

.clickable {
  cursor: pointer;
}

.overlay {
  grid-area: 1 / 1;
}

.pass-through {
  pointer-events: none;

  > * {
    pointer-events: auto;
  }
}

.no-decoration {
  text-decoration: none;
  color: inherit;
}

.text-align-center {
  text-align: center;
}

.font-small {
  font-size: 14px;
}

.grid-cols-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.display-sm {
  display: none;
}

.alex {
  font-family: Alexandria, sans-serif;
  font-weight: 700;
}

.pre-wrap {
  white-space: pre-wrap;
  word-break: keep-all;
}

.h-animated {
  transition: max-height 0.3s ease;
}

.p-animated {
  transition: padding 0.3s ease;
}

// Query-overridable classes.
.background {
  background-color: rgb(0 0 0 / 50%);
}

.dimensions {
  width: 100%;
  min-height: 100%;
}

.separator {
  color: white;
}

.dialog {
  display: grid;

  min-width: 240px;
  max-width: 640px;

  background-color: rgb(25 20 40 / 95%);
  box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
  border-radius: 16px !important;

  > div.background {
    background-image: url('~/assets/images/textures/aero.png');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: lighten;

    width: 100%;
    height: 100%;

    opacity: 0.2;

    box-shadow: azure 0 0 20rem;
    filter: blur(5px);
  }

  > div.content > img.icon-badge {
    position: fixed;
    margin-top: -20px;
    margin-left: -20px;
    transform: rotate(-25deg);
    width: 60px;
    height: 60px;
  }
}

%link {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease;
}

.link {
  @extend %link;

  &:hover {
    color: cornflowerblue;
  }

  &-hi {
    @extend %link;

    color: cornflowerblue;

    &:hover {
      color: royalblue;
    }

    &-force-dark {
      @extend %link;

      color: cornflowerblue;

      &:hover {
        color: royalblue;
      }
    }
  }
}

.radial-gradient {
  background: radial-gradient(
    circle at left,
    rgb(255 255 255 / 80%),
    rgb(255 255 255 / 75%),
    rgb(255 255 255 / 0%)
  );
}

.scrollbar {
  min-height: 128px;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: rgb(0 0 0 / 20%);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgb(255 255 255 / 15%);
  }

  &::-webkit-scrollbar-button {
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    color: black;
  }

  .scrollbar {
    scrollbar-color: rgb(0 0 0 / 20%) rgb(255 255 255 / 20%);

    &::-webkit-scrollbar-track {
      background-color: rgb(255 255 255 / 20%);
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: rgb(0 0 0 / 20%);
    }
  }

  .background {
    background-color: rgb(255 255 255 / 80%);
  }

  .link {
    &:hover {
      color: royalblue;
    }

    &-hi {
      color: royalblue;

      &:hover {
        color: darkblue;
      }
    }
  }

  .separator {
    color: black;
  }

  .radial-gradient {
    background: radial-gradient(
      circle at left,
      rgb(0 0 0 / 95%),
      rgb(0 0 0 / 80%),
      rgb(0 0 0 / 0%)
    );
  }
}

.floaty {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}

.post {
  scroll-snap-type: both mandatory;
  scroll-snap-stop: normal;

  &::after {
    content: '';
    scroll-snap-align: start;
  }

  &-box {
    position: relative;

    padding: 0.6942rem 0.6942rem 3rem;

    border: 2px solid rgb(153 153 255 / 60%);
    background-color: rgb(45 7 110 / 10%);

    transition: 0.3s ease;

    &:hover {
      border-color: rgb(153 153 255 / 100%);
      background-color: rgb(45 7 110 / 30%);
    }
  }

  &-pocket {
    position: absolute;

    bottom: 0;
    right: 0;

    text-transform: uppercase;
    background-color: rgb(153 153 255 / 10%);

    border-left: 1px solid rgb(153 153 255 / 60%);
    border-top: 1px solid rgb(153 153 255 / 60%);

    border-top-left-radius: var(--bs-border-radius-xl);
    border-bottom-right-radius: var(--bs-border-radius-xl);
  }

  &-thumb {
    height: 100%;

    > img {
      width: 100%;
      height: 100%;
      max-height: 280px;
      object-fit: cover;
      border-radius: 4px;
    }
  }

  &-tags {
    > span {
      padding: 0.35em 0.65em;
      font-size: 0.85em;

      background-color: rgb(153 153 255 / 10%);

      border: 1px solid rgb(153 153 255 / 60%);
      border-radius: 1rem;
    }
  }

  &-preamble {
    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: flex-start;

    position: relative;

    width: 100%;
    min-height: 400px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    border-radius: 1em;

    scroll-snap-align: end;

    text-shadow: black 1px 1px 7px;

    iconify-icon {
      filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 100%));
    }

    &-control {
      position: absolute;

      top: 0;
      left: 0;
    }

    &-share {
      position: absolute;

      top: 0;
      right: 0;
    }
  }

  &-content {
    scroll-snap-align: start;

    :is(p, li) {
      a {
        @extend %link;

        color: cornflowerblue;

        &:hover {
          color: royalblue;
        }
      }

      code {
        padding: 0.25em;

        border-radius: 0.5em;

        cursor: pointer;
        background-color: rgb(83 35 162 / 10%);

        transition: 0.3s ease;

        &:hover {
          background-color: rgb(138 71 245 / 20%);
        }
      }
    }

    :is(h1, h2, h3, h4, h5, h6) {
      font-family: Alexandria, sans-serif;
      font-weight: 700;

      a {
        @extend %link;

        &:hover {
          color: indianred;
        }
      }
    }

    img {
      max-width: 100%;
      max-height: 400px;
    }

    blockquote {
      padding: 0.75em 1em;

      border-left: 0.25em solid rgb(153 153 255 / 60%);
      border-top-right-radius: 0.5em;
      border-bottom-right-radius: 0.5em;

      background-color: rgb(153 153 255 / 10%);

      transition: 0.3s ease;

      &:hover {
        border-left-color: rgb(153 153 255 / 100%);
        background-color: rgb(153 153 255 / 15%);
      }

      :last-child {
        margin-bottom: 0;
      }
    }

    pre {
      font-size: 14px;
      padding: 1em;

      border-radius: 0.5em;
      background-color: rgb(83 35 162 / 5%);

      position: relative;

      overflow-x: auto;

      code {
        counter-reset: step;
        counter-increment: step 0;

        scroll-padding: 0.5em;

        .line::before {
          content: counter(step);
          counter-increment: step;

          display: inline-block;

          text-align: right;

          color: rgb(238 246 250 / 40%);

          width: 1rem;
          margin-right: 1.5rem;
        }
      }

      .button {
        position: absolute;

        top: 0;
        right: 0;

        margin: 0.5em;
        padding: 0.5em;

        cursor: pointer;

        background-color: rgb(153 153 255 / 10%);

        border: 1px solid rgb(153 153 255 / 60%);
        border-radius: 0.5em;

        opacity: 0;

        transition: 0.3s ease;
      }

      &:hover {
        .button {
          opacity: 1;
        }
      }
    }
  }
}

// Dynamic classes.
@include bootstrap.media-breakpoint-up(sm) {
  #ender-app {
    height: 100%;
  }

  .scrollbar {
    scrollbar-gutter: stable;
  }

  .dimensions {
    width: 90%;
    min-height: fit-content;
    max-height: 90%;
  }

  .fade-mask-sm {
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
  }

  .rounded-1-sm {
    border-radius: 1em;
  }

  .display-sm {
    display: block;
  }

  .animate__animated-sm {
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
  }

  .animate__delay-1-5s {
    animation-delay: calc(var(--animate-delay) * 1.5);
  }
}

@include bootstrap.media-breakpoint-up(md) {
  .post {
    &-box {
      padding-bottom: 0.6942rem;
    }

    &-thumb {
      min-width: 352px;
      max-height: 198px;

      > img {
        max-width: 352px;
      }
    }

    &-title {
      display: -webkit-box;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

      text-overflow: ellipsis;
      overflow: hidden;
    }

    &-description {
      display: -webkit-box;

      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;

      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

@include bootstrap.media-breakpoint-up(lg) {
  .dimensions {
    width: 75%;
  }
}

@include bootstrap.media-breakpoint-up(xl) {
  .dimensions {
    width: 60%;
  }
}

@include bootstrap.media-breakpoint-up(xxl) {
  .dimensions {
    width: 50%;
  }
}