hugo-theme/static/css/landingpage.css

@layer components {
    #blog-flex,
    #project-flex {
        @apply flex flex-col md:flex-row flex-wrap justify-between max-w-screen-lg mx-auto md:space-x-8 py-4;
    }
    #blog-flex--old,
    #project-flex--old {
        @apply w-2/3 md:w-auto max-w-screen-lg grid auto-cols-min grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mx-auto py-5 gap-0 sm:gap-10
    }

    .project-item{
        @apply panel bg-gray-300 rounded flex-1 relative text-center md:w-1/4 mt-44 md:mt-32;
    }
    .project-item .project-title{
        @apply w-full text-xl font-mono text-center;
    }
    .project-item .project-title a{
        @apply text-black;
    }
    .project-item img{
        @apply absolute w-32 border border-gray-300 rounded z-10 transform left-1/2 -translate-x-1/2 -translate-y-3/4;
    }
    .project-item .project-body {
        @apply z-0 pt-12;
    }
    .project-item .project-description{
        @apply text-center text-base px-2 mb-2;
    }
    .project-item .project-status{
        font-variant: small-caps;
        @apply absolute bottom-1 inset-x-1/3 text-center text-sm font-sans whitespace-nowrap;
    }
    .project-item .project-status.dead{
        @apply text-red-900;
    }
    .project-item .project-status.active{
        @apply text-purple-400;
    }
    .project-item .project-status.done{
        @apply text-green-600;
    }

    .project-item-old{
        @apply panel bg-gray-300 rounded-2xl;
    }
    .project-item-old .project-title{
        @apply w-full text-xl font-mono text-center;
    }
    .project-item-old .project-title a{
        @apply text-black;
    }
    .project-item-old img{
        @apply w-20 h-32 mx-auto my-4 border border-gray-300 rounded;
    }
    .project-item-old .project-description{
        @apply text-center text-base px-2 mb-8;
    }
    .project-item-old .project-status{
        font-variant: small-caps;
        @apply absolute bottom-1 inset-x-1/3 text-center text-sm font-sans whitespace-nowrap;
    }
    .project-item-old .project-status.dead{
        @apply text-red-900;
    }
    .project-item-old .project-status.active{
        @apply text-purple-400;
    }
    .project-item-old .project-status.done{
        @apply text-green-600;
    }
}