src/app.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

@import "tailwindcss";
@plugin "daisyui" {
  themes: cmyk --default, black;
}

html, body {
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
}

/*
 * Reveal animation for newly detected sidebar images.
 * Items use a CSS keyframe animation: start at max-height 0 (content clipped,
 * not stretched) and grow to full natural height. The large max-height target
 * ensures any item fits; the element collapses to its intrinsic height once done.
 */
.image-reveal {
  overflow: hidden;
}

.image-reveal-enter {
  animation: reveal-grow 600ms ease-out forwards;
}

@keyframes reveal-grow {
  from {
    max-height: 0;
  }
  to {
    max-height: 500px;
  }
}