spaceship-monolith/journey/article.css

Astro UI for Obsidian Vaults

@utility article-link {
 @apply prose-a:text-purple-500 prose-a:opacity-100 prose-a:hover:opacity-[0.7]; 
}

@utility article {
  @apply my-0! py-9! px-4! lg:px-8! rounded-xl! shadow-lg mb-0 paper! dark:paper-dark! z-[1] prose-headings:[font-size-adjust:0.6] prose-headings:mt-9! prose-headings:mb-9! prose-headings:leading-9! prose-li:[font-size-adjust:0.6] prose-li:leading-9! prose-p:[font-size-adjust:0.6] prose-p:leading-9! prose-ol:mt-0! prose-ol:mb-9! prose-ul:mt-0! prose-ul:mb-9! prose-p:mt-0! prose-p:my-9! prose-li:m-0! prose-figure:mt-0! prose-figure:mb-9! prose-figcaption:leading-9! prose-figcaption:mt-0! prose-figcaption:font-heading prose-hr:my-9! prose-table:mt-0! prose-table:mb-9! prose-table:border-collapse! prose-th:pb-0! prose-th:leading-9! prose-td:leading-9! prose-thead:h-9!  prose-td:py-0!  prose-th:h-9! prose-td:h-9! prose-td:[font-size-adjust:0.6]! prose-tr:border-none! prose-thead:border-none! prose-blockquote:mt-0! prose-blockquote:mb-9!;
}

@utility article-content {
  .sticker {
    @apply mx-2!;
  }

  li {
    p {
      @apply mb-0!;
    }
  }
}


@utility article-image {
  @apply prose-img:rounded-3xl prose-img:mx-auto!;
}

@utility article-cover {
  @apply max-h-[396px]! h-[180px] md:h-[396px]! mb-18! sticker;
}

@utility article-title {
  @apply text-center mt-0! leading-9! font-bold! text-lg! md:text-h1! mb-9!;
}

@utility article-subtitle {
  @apply text-center opacity-60 italic mb-9!;
}

@utility article-description-section {
  @apply flex flex-col lg:flex-row mb-9!;
}

@utility article-reader {
  @apply flex justify-end mb-9!; 
}

@utility article-description {
  @apply mb-0! leading-9! text-xxs md:text-lg text-balance;
}

@utility article-tags {
  @apply gap-0;
}

@utility article-tag {
  @apply font-code! lg:text-lg! [font-size-adjust:0.5]! leading-4! my-1.25! mr-2 py-1! px-6! tag!;

  &::before {
    content: '#'
  }
}

@utility article-meta {
  @apply gap-0;
}

@utility article-author {
  @apply [font-size-adjust:0.6] leading-9;
}


@utility article-date {
  @apply [font-size-adjust:0.4] leading-9;
}

@utility figure-image {
  @apply sticker max-h-[396px]! h-[252px] md:h-[396px]!;

  figure {
    @apply rounded-2xl my-0!;
  }

  img {
    @apply rounded-none! w-auto! max-h-[396px]! h-[252px]! md:h-[396px]!;
  }

  &:nth-child(4n+1) { --rot: 1.12deg; }
  &:nth-child(4n+2) { --rot: -1.7deg; }
  &:nth-child(4n+3) { --rot: 1.25deg; }
  &:nth-child(4n+4) { --rot: -1.16deg; }
}

@utility embed-map {
  @apply mb-9!;
}

@utility svg-embed {
  @apply sticker max-h-[396px]! h-[252px] md:h-[396px]! mb-18!;

  svg {
    @apply max-h-[396px]! h-[252px]! md:h-[396px]!;
  }

  figure {
    @apply rounded-2xl my-0!;
  }
}

@source inline("svg-embed");

@utility article-preview {
  @apply rounded-2xl;

  > article {
    @apply px-1!;
  }
}

@utility embed-youtube {
  @apply sticker;

  iframe {
    @apply rounded-2xl;
  }
}