@import './base16.solarized.light.css';

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .post, .page {
    @apply font-sans text-base;

    h1 {
      @apply text-h1 font-serif;
    }

    h2 {
      @apply text-h2 font-serif;
    }

    h3 {
      @apply text-h3 font-serif;
    }

    h4 {
      @apply text-h4 font-serif;
    }

    h5 {
      @apply text-h5 font-serif;
    }

    h6 {
      @apply text-h6 font-serif;
    }

    p {
      @apply font-sans text-base bg-white;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }

    a {
      @apply link font-bold;
    }

    code {
      @apply bg-porcelain px-1 py-1 rounded text-base;
    }

    ul {
      @apply list list-green list-disc;
    }

    ol {
      @apply list list-green list-decimal;
    }

    hr {
      @apply border-porcelain my-4;
    }

    blockquote {
      @apply border-l-8 border-porcelain py-2 pl-6;
      p {
        margin: 0;
      }

      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }

    figure.highlight {
      overflow: auto;

      @apply bg-porcelain rounded-lg px-6;

      code {
        @apply bg-transparent;
      }

      .rouge-table {
        @apply border-porcelain;
      }
    }
  }
}