spaceship-monolith/common/components/article.css

Astro UI for Obsidian Vaults

@plugin "@tailwindcss/typography";
@plugin 'tailwind-scrollbar';

@utility prose {
  blockquote p:first-of-type::before {
    content: none;
  }
  blockquote p:first-of-type::after {
    content: none;
  }
}

@utility article-background {
  @apply bg-article-background dark:bg-article-background-dark;
}

@utility article-blockquote {
  @apply prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:ps-6 prose-blockquote:border-l-2 prose-blockquote:border-primary prose-blockquote:text-blockquote-foreground dark:prose-blockquote:text-blockquote-foreground-dark;
}

@utility article-code {
  @apply prose-code:rounded-lg prose-code:px-1 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-code:text-code-foreground dark:prose-code:text-code-foreground-dark prose-code:bg-code-background dark:prose-code:bg-code-background-dark prose-code:font-code prose-pre:!bg-pre-background dark:prose-pre:!bg-pre-background-dark; 
}

@utility article-heading {
  @apply prose-headings:text-heading-foreground dark:prose-headings:text-heading-foreground-dark prose-h1:text-article-title-foreground dark:prose-h1:text-article-title-foreground-dark prose-h1:font-title prose-headings:font-heading;
}

@utility article-image {
  @apply prose-img:mx-auto;
}

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

@utility article-list {
  @apply prose-li:font-paragraph prose-li:marker:text-li-marker-foreground dark:prose-li:marker:text-li-marker-foreground-dark;
}

@utility article-paragraph {
  @apply text-paragraph-foreground dark:text-paragraph-foreground-dark prose-p:font-paragraph;
}

@utility article-prose {
  @apply prose dark:prose-invert lg:prose-lg xl:prose-xl 2xl:prose-2xl;
}

@utility article-scroll {
  @apply overflow-x-hidden overflow-y-auto scrollbar-thin;
}

@utility article-separator {
  @apply prose-hr:border-t-2 prose-hr:border-hr-border dark:prose-hr:border-hr-border-dark;
}

@utility article-strong {
  @apply prose-strong:text-strong-foreground dark:prose-strong:text-strong-foreground-dark;
}

@utility article-table {
  @apply prose-table:font-paragraph prose-thead:border-hr-border prose-tr:border-hr-border dark:prose-thead:border-hr-border-dark dark:prose-tr:border-hr-border-dark;
}

@utility article {
  @apply text-base py-8 grow-1 max-w-full article-background article-blockquote article-code article-heading article-image article-link article-list article-paragraph article-prose article-separator article-scroll article-strong article-table;

  ::selection {
    @apply bg-primary/20 dark:bg-primary/25;
  }
}

@utility article-content {
  @apply grid-layout;

  &.wide-page {
    @apply px-4 md:px-8;
    > * {
      grid-column: full;
    }
    > .article-body > * {
      grid-column: full;
    }

    > .article-body > .code-extra > * {
      grid-column: full;
    }
  }

  &.wide-table {
    > table {
      grid-column: full;
    }
    > .article-body > table {
      grid-column: full;
    }
  }
}


@utility article-body {
  @apply col-[full]! grid-layout;

  .code-extra {
    display: contents;
  }

  .code-extra > * {
    grid-column: content;
  }
}

@utility article-title {
  @apply text-h1 font-bold;
}


@utility article-subtitle {
  @apply text-h2 text-article-subtitle-foreground dark:text-article-subtitle-foreground-dark;
}

@utility article-description-section {
  @apply flex flex-col lg:flex-row justify-end;
}

@utility article-description {
  @apply text-base !font-heading !m-0;
}


@utility article-meta {
  @apply flex flex-col lg:items-end gap-2 w-full;
}

@utility article-author {
  @apply font-heading;
}

@utility article-date {
  @apply font-heading;
}

@utility article-tags {
  @apply flex flex-wrap flex-row lg:flex-row-reverse gap-4;
}

@utility article-tag {
  @apply no-underline text-sm rounded-4xl py-1 px-2.5 border border-badge-border dark:border-badge-border-dark bg-badge-background dark:bg-badge-background-dark font-menu text-badge-foreground dark:text-badge-foreground-dark;
}

@utility article-cover {
  @apply w-full max-h-48 lg:max-h-[30rem] object-cover;

  .article-cover-image {
    @apply w-full h-full object-cover;
  }
}