website/website.scss

@use "node_modules/@picocss/pico/scss/pico" with (
  $theme-color: "cyan",
  $modules: (
    "content/code": false,
    "content/embedded": true,
    "content/figure": false,
    "content/miscs": false,
    "content/table": false,
    "forms/checkbox-radio-switch": false,
    "forms/input-color": false,
    "forms/input-date": false,
    "forms/input-file": false,
    "forms/input-range": false,
    "forms/input-search": false,
    "components/card": true,
    "components/dropdown": false,
    "components/loading": false,
    "components/group": false,
    "components/modal": false,
    "components/progress": false,
    "components/tooltip": false,
    "layout/grid": true,
    "layout/landmarks": false,
    "layout/overflow-auto": false,
    "utilities/accessibility": false,
    "utilities/reduce-motion": false,
  )
);

@use "node_modules/@picocss/pico/scss/colors" as *;

.closed-on-mobile {
  display: none;
}

$animation-length: 0.4s;
.special-card {
  filter: drop-shadow(0 0 1rem $cyan-500);
  margin: 1.5rem;
  cursor: pointer;
  transition: scale $animation-length;
  opacity: 0;
  min-width: 9rem;
  max-width: 9rem;
  animation: fadeIn 1s forwards;
  @for $i from 1 through 4 {
    &:nth-child(#{$i}n) {
      // TODO: Delay last stuff less than earlier stuff
      animation-delay: #{$i * 0.1}s;
    }
  }
  &:hover {
    scale: 1.02;

    & > article > div {
      // Set to something larger than button
      // since % doesn't work
      max-height: 400px;
      height: fit-content;
    }
  }

  button {
    width: 100%;
    margin: 0.5rem 0;
  }

  & > article > div {
    display: block;
    max-height: 0;
    overflow: hidden;
    // Close it faster
    transition: max-height 0.2 * $animation-length;
  }

  &:hover > article > div {
    transition: max-height $animation-length;
  }
}

.special-card-wrapper {
  display: flex;
  flex-wrap: wrap;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (min-width: 992px) {
  main.responsive-nav {
    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
    display: grid;
    grid-template-columns: 200px auto;
  }

  .closed-on-mobile {
    display: block;
  }

  main > aside nav {
    position: fixed;
    width: 200px;
    max-height: calc(100vh - 5.5rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
}