iamkonstantin/theme/static_src/src/styles.css

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

@layer base {
    @font-face {
        font-family: NotoEmoji;
        font-weight: 400;
        src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
    }
}

@layer components {

    section {
        @apply my-8;
    }

    .emoji {
        font-family: NotoEmoji;
    }

    a {
        @apply border-klavender border-b-2;
    }

    h1 {
        @apply mt-8 mb-6 text-2xl sm:text-4xl lg:text-4xl leading-none font-extrabold tracking-tight text-black dark:text-white;
    }

    h2 {
        @apply mt-6 mb-4 text-xl sm:text-3xl lg:text-3xl leading-none font-extrabold tracking-tight text-black dark:text-white;
    }

    h3 {
        @apply mt-12 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
    }

    h4 {
        @apply mt-2 mb-1 text-lg sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
    }

    p {
        @apply my-2 mb-3 text-lg leading-relaxed;
    }

    img.blog {
        @apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg;
    }

    .blog-content img {
        @apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg mx-auto my-6;
    }


    @media print {
        h1 {
            @apply mt-6 mb-4 text-xl;
        }

        h2 {
            @apply mt-4 mb-2 text-base;
        }

        h3 {
            @apply text-base;
        }

        p {
            @apply text-sm my-1;
        }

        .ppb {
            page-break-before: always;
        }
    }

    .primary-button {
        @apply rounded-full bg-klavender cursor-pointer px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    code[class*="language-"], pre[class*="language-"] {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
}

.tags ul {
    @apply flex space-x-4 text-center text-sm;
}

.tags li {
    @apply flex-1 p-4 inline-flex items-center rounded-2xl bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
}

.tags a {
    @apply border-b-0 w-full;
}

.blog-pages a {
    @apply border-b-0;
}