index/assets/styles/main.scss

@use 'animate.css';

// Modules.
@use 'transitions';
@use 'lists';
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: Enchant;
    src:
      url("~/assets/fonts/enchant/enchant.woff") format('woff'),
      url("~/assets/fonts/enchant/enchant.woff2") format('woff2')
}

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

@-moz-document url-prefix() {
  html {
    min-height: 128px;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);
    
    &.light {
      scrollbar-color: rgb(0 0 0 / 15%) rgb(255 255 255 / 20%);
    }
  }
}

// The HTML page.
html {
  height: 100dvh;
  font-size: 14px;

  ::-webkit-scrollbar {
    width: 8px;
    height: 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-corner {
    border-radius: 3px;
    background-color: rgb(255 255 255 / 15%);
  }

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

    ::-webkit-scrollbar-thumb {
      background-color: rgb(0 0 0 / 30%);
    }
    
    ::-webkit-scrollbar-corner {
      background-color: rgb(0 0 0 / 30%);
    }
  }
}

// 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%;
}

@layer base {
  h1, h2, h3, h4, h5, h6,
  .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
    @apply font-serif;
    font-weight: bold;
  }

  h1, .text-h1 {
    font-size: 2.5rem;
  }

  h2, .text-h2 {
    font-size: 2rem;
  }

  h3, .text-h3 {
    font-size: 1.75rem;
  }

  h4, .text-h4 {
    font-size: 1.5rem;
  }

  h5, .text-h5 {
    font-size: 1.25rem;
  }

  h6, .text-h6 {
    font-size: 1rem;
  }

  small {
    font-size: 0.75rem;
  }

  a {
    @apply no-underline transition-all;

    color: cornflowerblue;

    &:hover {
      color: royalblue;
    }
  }

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

  :not(nav) {
    > ul {
      @apply ps-6;
      list-style-type: disc;
    }

    > ol {
      @apply ps-6;
      list-style-type: decimal;
    }
  }

  :where(section, article, aside).page {
    :is(div, p):not(:last-child) {
      @apply mb-4;
    }

    :is(h1, h2, h3, h4, h5, h6) {
      a {
        @apply text-inherit no-underline transition-all;

        &:hover {
          color: indianred;
        }
      }

      &:not(:last-child) {
        @apply mb-2;
      }
    }

    ul {
      list-style-type: disc;
    }

    ol {
      list-style-type: decimal;
    }

    :where(ul, ol) {
      &:not(:last-child) {
        @apply mb-4;
      }
      
      li:not(:last-child) {
        @apply mb-1;
      }
    }

    code:not(pre *) {
      @apply px-1 py-0.5 break-words cursor-pointer rounded-lg transition-ease;

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

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

    img {
      @apply max-w-full max-h-[400px];
    }

    blockquote {
      @apply px-4 py-3 mb-4 border-l-4 rounded-r-xl transition-ease;

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

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

    pre {
      @apply relative font-small overflow-auto min-h-14 max-h-[80rem] rounded-xl p-2 mb-4;

      background-color: rgb(83 35 162 / 5%);

      &:hover > .absolute {
        @apply opacity-100;
      }
      
      > code {
        @apply scroll-p-2;
        
        counter-reset: step;
        counter-increment: step 0;

        .line::before {
          @apply inline-block w-4 mr-6 text-right;

          content: counter(step);
          counter-increment: step;

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

        > span span:last-child {
          @apply me-4;
        }
      }

      .overlay-action {
        background-color: rgb(153 153 255 / 10%);
        border-color: rgb(153 153 255 / 60%);
      }
    }
  }
}

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

// Helper classes that don't exist in Bootstrap.
.overlay {
  grid-area: 1 / 1;
}

.pass-through {
  pointer-events: none;

  > * {
    pointer-events: auto;
  }
}

ruby {
  ruby-position: under;

  ruby {
    ruby-position: over;
  }
}

rt {
  ruby-align: space-around;
}

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

// Query-overridable classes.
.dimensions {
  width: 100%;
  min-height: 100%;
}

@layer utilities {
  .accent-background {
    background-color: rgb(0 0 0 / 50%);
  }

  .accent-overlay-background {
    background-color: rgb(0 0 0 / 90%);
  }

  .accent-text {
    color: white;
  }

  .accent-text-shadow {
    text-shadow: black 2px 3px 4px;
  }

  .drop-shadow,
  .accent-drop-shadow {
    filter: drop-shadow(1px 2px 3px black);
  }

  .link-dark {
    @apply text-inherit no-underline transition-all;

    color: cornflowerblue;

    &:hover {
      color: royalblue;
    }
  }

  .accent-fade {
    background: linear-gradient(
      to top,
      black,
      rgb(0 0 0 / 50%) 75%,
      transparent
    );
  }

  .fade-mask {
    mask-image: linear-gradient(to bottom, transparent, black 3%, black 97%, transparent);
  }
}

.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;
  }
}

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

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

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

  &-box {
    border-color: rgb(153 153 255 / 60%);
    background-color: rgb(45 7 110 / 10%);

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

  &-pocket {
    background-color: rgb(153 153 255 / 10%);
    border-left-color: rgb(153 153 255 / 60%);
    border-top-color: rgb(153 153 255 / 60%);
  }

  &-tag {
    background-color: rgb(153 153 255 / 10%);
    border-color: rgb(153 153 255 / 60%);
  }
}

:where(html.light) {
  body {
    color: black;
  }

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

  .accent-overlay-background {
    background-color: rgb(255 255 255 / 90%);
  }

  .accent-drop-shadow {
    filter: drop-shadow(1px 2px 3px white);
  }

  a {
    @apply no-underline transition-all;

    color: royalblue;

    &:hover {
      color: darkblue;
    }
  }

  .accent-text {
    color: black;
  }

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

  .accent-text-shadow {
    text-shadow: white 1px 2px 3px;
  }

  .accent-fade {
    background: linear-gradient(
      to top,
      white,
      rgb(255 255 255 / 50%) 75%,
      transparent
    );
  }

  .post {
    &-box {
      border-color: rgb(123 123 255 / 1000%);
      background-color: rgb(45 7 110 / 20%);

      &:hover {
        border-color: rgb(123 123 255 / 80%);
        background-color: rgb(45 7 110 / 10%);
      }
    }

    &-pocket {
      background-color: rgb(123 123 255 / 10%);
      border-left-color: rgb(123 123 255 / 80%);
      border-top-color: rgb(123 123 255 / 80%);
    }

    &-tag {
      background-color: rgb(123 123 255 / 10%);
      border-color: rgb(123 123 255 / 80%);
    }
  }

  :is(section, article, aside).page {
    code:not(pre *) {
      background-color: rgb(138 71 245 / 20%);

      &:hover {
        background-color: rgb(83 35 162 / 20%);
      }
    }

    blockquote {
      border-left-color: rgb(153 153 255 / 60%);
      background-color: rgb(153 153 255 / 10%);

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

    pre {
      background-color: rgb(83 35 162 / 10%);

      code {
        .line::before {
          color: rgb(83 85 89 / 40%);
        }
      }

      .overlay-action {
        background-color: rgb(153 153 255 / 30%);
        border-color: rgb(153 153 255 / 80%);
      }
    }
  }
}

// Dynamic classes.
@screen lm {
  .dimensions {
    width: 100% !important;
    min-height: 100% !important;
  }
}

@screen sm {
  html {
    font-size: 16px;
  }

  #ender-app {
    height: 100dvh;

    scrollbar-gutter: stable;
  }

  .dimensions {
    width: 90%;

    min-height: fit-content;
    max-height: 90%;
  }

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

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

@screen md {
  html {
    font-size: 18px;
  }
}

@screen lg {
  html {
    font-size: 20px;
  }

  .dimensions {
    width: 75%;
  }
}

@screen xl {
  .dimensions {
    width: 60%;
  }
}

@screen 2xl {
  .dimensions {
    width: 50%;
  }
}