spaceship-monolith/common/markdown/embeds.css

Astro UI for Obsidian Vaults

@utility embed-youtube {
  @apply w-full h-auto aspect-video;

  iframe {
    @apply w-full h-full;
  }
}

@utility embed-figure {
  @apply flex flex-col sm:flex-row rounded-sm border-gray-400 dark:border-obsidian-400 border mb-4;
}

@utility embed-picture {
  @apply sm:max-w-[min(50%,_320px)];

  img {
    @apply rounded-bl-sm rounded-tl-sm w-full h-full;
  }
}

@utility embed-caption {
  @apply flex flex-col py-4 px-5 gap-2;

  h5 {
    @apply text-lg font-bold line-clamp-1;
  }

  p {
    @apply m-0 text-sm line-clamp-3 text-ellipsis;
  }
}

@utility embed-url {
  @apply text-obsidian-800;
}

@utility file-embed {
  @apply border-l-2 border-primary ps-6;

  > a {
    @apply no-underline opacity-100;
  }
}

@utility file-embed-link {
  @apply float-right;
  > span {
    @apply icon-[solar--link-line-duotone] text-2xl;
  }
}

@utility file-embed-title {
  @apply font-semibold;
}

@utility audio-embed {
  @apply w-full;
}

@utility iframe-embed {
  @apply w-full h-[90dvh];
}

@source inline("embed-youtube");
@source inline("embed-figure");
@source inline("embed-picture");
@source inline("embed-caption");
@source inline("embed-url");

@source inline("file-embed");
@source inline("file-embed-link");
@source inline("file-embed-title");
@source inline("audio-embed");
@source inline("iframe-embed");