spaceship-monolith/common/markdown/timeline.css

Astro UI for Obsidian Vaults

@utility timeline {
  @apply flex flex-col relative ps-0! col-[feature]!;
}

@utility timeline-item {
  @apply justify-items-center shrink-0 items-center grid relative m-0!;

  grid-template-rows:  .5rem auto minmax(0,1fr);
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}

@utility timeline-item__card {
  @apply bg-white dark:bg-obsidian-300 m-1 mb-10 p-4 rounded-lg shadow-md  px-6 py-1.75 w-full;
}

@utility timeline-item__card--start {
  @apply text-end;

  grid-area: 1 / 1 / 4 / 2;
  place-self: center flex-end;
  text-align: end;
}

@utility timeline-item__card--end {
  @apply text-start;

  grid-area: 1 / 3 / 4 / 4;
  place-self: center flex-start;
}

@utility timeline-item__indicator {
  @apply w-5 h-5 bg-purple-400 rounded-full;

  grid-row-start: 2;
  grid-column-start: 2;
}

@utility timeline-item__line--start {
  @apply border-0! my-0!;

  grid-row-start: 1;
  grid-column-start: 2;
  width: .25rem;
  height: 100%;
  background-color: var(--color-purple-700);
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

@utility timeline-item__line--end {
  @apply border-0! my-0!;

  background-color: var(--color-purple-700);
  border: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  grid-area: 3 / 2 / none;
  width: .25rem;
  height: 100%;
}

@utility timeline-card--date {
  @apply font-paragraph font-bold;
}

@utility timeline-card--title {
  @apply font-paragraph font-bold;
}

@utility timeline-card--content {
  @apply font-paragraph leading-6;
  
}

@source inline("timeline");
@source inline("timeline-item");
@source inline("timeline-item__card");
@source inline("timeline-item__card--start");
@source inline("timeline-item__card--end");
@source inline("timeline-item__indicator");
@source inline("timeline-item__line--start");
@source inline("timeline-item__line--end");
@source inline("timeline-item__card--date");
@source inline("timeline-item__card--title");
@source inline("timeline-item__card--content");