styles.css

@import "tailwindcss";

.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-request.htmx-indicator {
  opacity: 1;
}

.year-indicator {
  @apply sticky top-0 z-20;
}

.month-indicator {
  @apply sticky top-12 lg:top-29 z-10;
}

.year {
  @apply block text-3xl lg:text-7xl font-mono text-transparent lg:absolute lg:top-3 -left-52 [-webkit-text-stroke-color:_rgba(163_163_163/1)] dark:[-webkit-text-stroke-color:_rgba(82_82_82/1)] z-20 bg-white dark:bg-neutral-900 py-2 lg:py-4 focus-visible:outline-1 focus-visible:outline-dashed focus-visible:outline-neutral-400 dark:focus-visible:outline-neutral-600 focus-visible:rounded-xs;

  -webkit-text-stroke-width: 2px;
}

.month {
  @apply text-lg lg:text-xl lg:absolute lg:-top-2 -left-49 z-10 bg-white dark:bg-neutral-900 py-1 lg:w-40 lg:text-right text-neutral-400 dark:text-neutral-700;
}

.month-indicator + li {
  @apply -mt-3 lg:-mt-6;
}

.year-indicator + .month-indicator {
  @apply -mt-6 lg:mt-0;
}

/* Scroll driven animation to fade in date indicators
* Note that the order of the properties seems to be important here,
* animation needed to be before animation-timeline.
* */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  @supports (animation-range: 0 50vh) {
    .year,
    .month {
      opacity: 0;
      transform: translateY(50px);
      animation: fade-in linear forwards;
      animation-timeline: view();
      /* Start at 0px (when it comes into view), end at half the screen height */
      animation-range: 0 50vh;
    }

    @keyframes fade-in {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

@supports (anchor-name: --myanchor) {
  [popover] {
    @apply m-1 border-none hidden opacity-0;

    transition:
      opacity 500ms,
      display 500ms allow-discrete,
      overlay 500ms allow-discrete;

    &:popover-open {
      @apply block opacity-100;

      @starting-style {
        opacity: 0;
      }
    }
  }
}

/* TODO: Remove once Safari and Firefox supports it */
@supports not (anchor-name: --myanchor) {
  [popovertarget] {
    pointer-events: none;
  }
}