index/assets/styles/main.scss

// Fonts.
@import '@fontsource/Lato/index.css';
@import '@fontsource/Alexandria/700.css';

$grid-breakpoints: (
  xs: 0,
  sm: 601px,
  md: 996px,
  lg: 1281px,
  xl: 1921px,
  xxl: 2561px
);

// Bootstrap & animations.
@import '../../node_modules/bootstrap/scss/bootstrap';
@import '../../node_modules/animate.css/animate';
@import 'transitions';
@import 'list-types';

// CSS Variables.
:root {
  --animate-duration: 1s;
  --animate-delay: 0.75s;
  --animate-repeat: 1;
}

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

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

  background-color: rgb(6, 25, 28);
  background-image: url('~/assets/images/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;
  font-family: 'Lato', sans-serif;

  font-size: 18px;

  height: 100%;
}

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

// Helper classes that don't exist in Bootstrap.
.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-xs-none {
  display: none;
}

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

.smooth-glide {
    transition: height 0.4s linear;
}

// Query-overridable classes.
.background {
  background-color: rgba(0, 0, 0, 0.5);
}

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

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

  &: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,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0)
  );
}

.scrollbar {
  min-height: 128px;

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);

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

  &::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.15);
  }
}

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

  .scrollbar {
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);

    &::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.2);
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: rgba(0, 0, 0, 0.2);
    }
  }

  .background {
    background-color: rgba(255, 255, 255, 0.8);
  }

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

    &-hi {
      color: royalblue;

      &:hover {
        color: darkblue;
      }
    }
  }

  .radial-gradient {
    background: radial-gradient(
      circle at left,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0)
    );
  }
}

.floaty {
  position: fixed;

  bottom: 0;
  left: 0;
  right: 0;

  width: fit-content;
  height: fit-content;

  margin: auto;
}

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

  .scrollbar {
    scrollbar-gutter: stable;
  }

  .dimensions {
    width: 80%;
    min-height: fit-content;

    max-height: 90%;
  }

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

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

  .display-xs-none {
    display: block;
  }

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

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

@include media-breakpoint-up(md) {
}

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

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

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