website/static/src/scss/base.scss

@use "sass:math";
@use "sass:color";

@use "bulma_overrides" as *;
@use "mixins" as *;

@import "bulma/bulma";

@import "variables";
@import "navbar";
@import "homepage";
@import "footer";
@import "hero";
@import "content";
@import "listing";
@import "blocks";
@import "shareon";
@import "search";
@import "spotify";
@import "404";
@import "password_required";
@import "commento";

html,
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-variant-ligatures: none;

  @include dark-mode {
    background-color: $dark-mode-background;
    color: $dark-mode-text;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

main {
  margin-bottom: 2rem;
}

a {
  transition-property: color, background-color;
  transition-duration: $link-hover-duration !important;

  @include dark-mode {
    &:hover {
      color: $grey-lighter;
    }
  }
}

.wagtail-userbar {
  @include dark-mode {
    filter: invert(100%);
  }
}