www_threefold_io/src/assets/scss/main.scss

@tailwind base;
blockquote {
    @apply border-l;
    @apply border-l-4;
    @apply border-l-blue-500;
    @apply pl-4;
    @apply italic;
    @apply my-8;
    p {
        padding: 0 !important;
    }
}

pre {
    @apply border-l;
    @apply border-l-2;
    @apply border-l-gray-500;
    @apply pl-4;
    @apply mt-4;
    @apply text-base;
    @apply break-words;
    @apply overflow-x-auto;
}

ol {
    @apply list-decimal;
    @apply ml-5;
}

ul {
    @apply list-disc;
    @apply ml-5;
}

:not(pre)>code {
    @apply text-red-600;
    @apply text-base;
}

@tailwind components;
@tailwind utilities;
@responsive {
    .pxi-0 {
        @apply px-0 #{!important};
    }
    .pyi-0 {
        @apply py-0 #{!important};
    }
    .pi-0 {
        @apply p-0 #{!important};
    }
}

.animated-link:after {
    content: "";
    width: 0px;
    height: 1px;
    display: block;
    transition: 300ms;
    @apply bg-gray-500;
}

.animated-link:hover:after {
    width: 100%;
}

.height-30px {
    height: 30px;
}

.no-border {
    border-width: 0px !important;
}

.flex-post {
    @apply border-b;
    @apply border-b-gray-300;
    @apply flex-col;
    @apply w-full;
    .post-card-image {
        @apply h-56;
        @apply w-full;
        @apply object-cover;
        @apply rounded;
        @apply relative;
    }
    .post-card-title {
        @apply leading-none;
        @apply text-2xl;
        @apply font-medium;
    }
    .post-card-excerpt {
        @apply font-serif;
    }
}

.author-list-item:nth-child(n + 2) {
    @apply -ml-3;
}

button:focus {
    outline: none;
}

@media (min-width: 768px) {
    .with-large>.flex-post:nth-child(5n),
    .with-large>.flex-post:nth-child(5n-1) {
        // @apply flex-100;
        flex: 1 1 50%;
        @apply flex-col;
        .post-card-image-link {
            @apply relative;
            min-height: 400px;
        }
        .post-card-image {
            @apply absolute;
            @apply h-full;
            @apply w-full;
            @apply object-cover;
            @apply rounded-lg;
        }
        .post-card-content {
            // @apply flex-post-large-content;
            flex: 0 1 auto;
            @apply self-center;
        }
        .post-card-title {
            @apply text-4xl;
        }
        .post-card-excerpt {
            @apply text-xl;
        }
    }
    .projects>.flex-post:nth-child(5n),
    .projects>.flex-post:nth-child(5n-1) {
        .post-card-image-link {
            min-height: 300px;
        }
        .post-card-image {
            @apply h-auto;
        }
    }
}

body[data-theme="dark"] {
    background-color: #191b1f;
    @apply text-gray-300;
    .post-content-text {
        @apply text-gray-300;
    }
    .lg\:shadow-lg{
        box-shadow :0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04)
    }
    .learn-button{
        background-color: #c4c4c4;
        @apply text-gray-900;
        &:hover {
            @apply bg-gray-300;
        }
    }
    .text-gray-700{
        @apply text-white;
    }
    .inset-0 , input[type="text"]{
        background-color: #191b1f;
    }
    .bg-white{
        background-color: #191b1f; 
    }
    .post-card-excerpt {
        @apply text-gray-500;
    }
    .pagination li {
        @apply bg-gray-700;
        @apply text-gray-200;
        @apply border-gray-600;
        &:hover {
            @apply bg-gray-600;
            @apply text-gray-900;
        }
    }
    .pagination li.border-l-black {
        @apply border-l-gray-300;
    }
    pre {
        @apply text-gray-500;
    }
    .flex-post {
        @apply border-b-gray-800;
    }
    .author-list-item img {
        border-color: #191b1f;
    }
    .author-social {
        a {
            &:hover {
                @apply text-white;
            }
        }
    }
}