website/assets/scss/blog.scss

// general
@import "variables";
@import "main";

// fonts
@import "fonts/playfair";

// markup
@import "markup/render-image";

// partials
@import "partials/sidebar";
@import "partials/footer";
@import "partials/helpers/icons.scss";

#blog-header {
    background: var(--vriish-gradient);
    font-family: "playfair";
    font-size: 1.5rem;
    height: 40vh;
    color: var(--vriish-gradient-text);
    mask: var(--vriish-waves);
    -webkit-mask: var(--vriish-waves);
    padding: 1rem 6rem 3rem 6rem;
    display: flex;
    flex-direction: column;
    place-content: center;
    text-align: center;

    @media (max-width: 1140px) {
        height: 30vh;
        font-size: 1rem;
    }
    
    h1 {
        letter-spacing: 0.3rem;
        font-size: 3.5rem;
        margin: 0 auto;
        max-width: 1000px;

        @media (max-width: 1140px) {
            font-size: 2.5rem;
        }
    }

    p {
        letter-spacing: 0.15rem;
        margin: 0 auto;
        max-width: 1000px;
    }

    span:not(:first-of-type)::before {
        content: "·";
        margin: 0 1rem 0 0.6rem;
    }
}

main {
    max-width: 800px;

    h1, h2, h3, h4, h5, h6 {
        margin-top: 2.5rem !important;
    }

    p {
        margin: 0 0 2rem 0;
    }
}

// single page

// list
#posts-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    
    .post-wrapper {
        hyphens: auto;
        padding: 1rem;
        color: var(--vriish-gradient-text);
        background: var(--vriish-gradient);
        border-radius: .5em;
        display: flex;
        flex-direction: column;
        scroll-snap-align: start;
        text-decoration: none;
        min-height: 10rem;
        justify-content: space-between;

        p {
            margin: 0;
        }
    }
}