tw-runner/mysite/assets/css/typography/article.css

Run and manage Tower Website projects with this utility.

@import './fonts';

@layer components {
  article {
    /* @apply py-8 p-6 sm:p-20 my-8 rounded-4xl bg-white dark:bg-gray-800 text-black dark:text-white border border-slate-300 dark:border-slate-600 overflow-hidden; */

    h1 {
      @apply font-semibold font-mono tracking-tight text-[24px] sm:text-[38px] my-6 sm:mb-8;
    }
    h2 {
      @apply text-[26px] sm:text-[34px] font-semibold my-8 sm:mt-12;
      line-height: 2.3rem;
    }
    h3 {
      @apply text-[23px] sm:text-[28px] opacity-60 font-semibold font-mono tracking-tighter mt-8 mb-3;
      line-height: 2.3rem;
    }
    h4 {
      @apply text-[24px] sm:text-[29px] leading-tight font-extralight text-negative-text/50 dark:text-negative-dark-text/55 mt-12 mb-8;
    }
    h5 {
      @apply text-[20px] text-negative-text/65 dark:text-negative-dark-text/55 font-extralight italic mt-2 mb-12 tracking-wide;
    }
    p {
      @apply font-extralight text-[18px] sm:text-[20px] tracking-wide my-4;
    }
    a {
      @apply text-[18px] sm:text-[23px] text-primary-highlight dark:text-primary-highlight-dark;
    }
    ul {
      @apply list-disc pl-6;
    }
    ol {
      @apply list-decimal pl-6 decoration-2;
    }
    li {
      @apply font-extralight text-xl mt-1.5 mb-3;
    }
    blockquote {
      @apply text-lg font-light border-l-4 border-primary pl-4;
    }
    strong {
      @apply font-semibold;
    }
    pre {
      @apply text-xl font-normal bg-slate-100 p-4 rounded-lg;
    }
    code {
      @apply text-[13px] sm:text-[16px] font-normal px-1.5 bg-slate-100 border border-slate-300 text-slate-900 p-0.75 rounded;
    }
    table {
      @apply w-full border-collapse overflow-hidden rounded-xl mb-6;
    }
    th {
      @apply text-base text-[14px] py-1 px-1.5 font-bold text-nowrap bg-ground text-ground-text overflow-hidden;
    }
    td {
      @apply py-2 px-2 text-base font-thin tracking-wider text-wrap overflow-hidden border-b border-r border-ground/15;
      &:nth-child(odd) {
        @apply bg-slate-200 dark:bg-negative-dark;
      }
    }
    img {
      @apply w-full h-auto;
    }
    hr {
      @apply border-t my-6;
    }
    figure {
      @apply flex flex-col items-center;
    }
    figcaption {
      @apply text-sm text-center;
    }
  }
}