spaceship-monolith/journey/timeline.css

Astro UI for Obsidian Vaults

@utility timeline-item__indicator {
  @apply bg-[hsl(24,57%,50%)]! z-10!;
}
@utility timeline-item__line--start {
  @apply bg-[hsl(24,57%,30%)];
}
@utility timeline-item__line--end {
  @apply bg-[hsl(24,57%,30%)];
}

@utility timeline-item__card {
  @apply relative rounded-none! py-0! px-2! lg:px-4! flex! flex-col! mt-0! mb-9!;
  border: 1px solid var(--color-callout-border);

  box-shadow:
    0 2px 4px rgba(0,0,0,0.25),
    0 16px 28px rgba(0,0,0,0.18);

  transform: rotate(-0.35deg);
  transform-origin: top center;

  &:nth-child( even ) {
    @apply -me-3!;

    transform: rotate(-.5deg);
  }

  &:nth-child( odd ) {
    @apply -ms-3!;
    transform: rotate(.5deg);
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* añadimos una tercera capa de background simulando cinta */
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0.18), transparent 12px),
      radial-gradient(120% 60% at 50% -10%, rgba(0,0,0,0.08), transparent 60%),
      linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
    background-size:
      100% 14px,
      120% 70%,
      60% 18px;                /* ancho de la “cinta” */
    background-position:
      top left,
      top center,
      50% 0;                   /* centrada arriba */
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 44px;
    height: 44px;
    /* simulamos el reverso del papel con un gradiente más claro */
    background: linear-gradient(225deg,
      hsla(0, 0%, 055%, 0.25) 0%,
      hsla(0, 0%, 55%, 0.416) 100%);
    /* triángulo de pliegue */
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
    /* sombra del pliegue sobre el papel */
    box-shadow: -2px -2px 4px rgba(0,0,0,0.12);
    /* que no tape el contenido */
    pointer-events: none;
  }
}


@utility timeline-card--date {
  p {
    @apply mt-0!;
  }
}

@utility timeline-card--title {
  h3 {
    @apply mt-0! text-sm md:text-lg!;
  }
}

@utility timeline-card--content {
  .callout[data-callout="details"] {
    @apply px-0! -mt-9! mb-0!;

    .callout-fold-icon {
      @apply h-9! items-center flex;
    }

    p:empty {
      @apply hidden;
    }

    .file-embed-title {
      @apply mt-0!;
    }
  }
}