In Comparison to the original Volume which required over 350 lines of CSS, Volume remastered uses less that 50. But why do we need CSS when Blocks does it all? I hear you ask. Well there are somethings that i just like to tweak and sometimes a little CSS is required.

The CSS added to the Site can be found in Customizer > Additional CSS. Lets take a closer look at what each of them does

Post navigation

the default behaviour of the Post Navigation Block Element is to display a 50/50 row showing the previous and next post. The following CSS removes the empty space when a user is on the first or last post so the block spans the full width.

/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
    flex: 0 1;
}

@media(min-width: 769px) {
    .featured-navigation .gb-grid-column:not(:empty) {
        flex: 1 0;
    }
}

Single Post Featured Images

the following CSS adjusts the featured image background size for tablet, and removes it from Mobile

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
    .page-hero-block:before {
        background-size: cover;
    }
    .featured-column,
    .featured-column img.wp-post-image {
        width: 100% !important;
    }
}

@media(max-width: 768px) {
    .page-hero-block:before {
        background: none;
    }
}

Post Archives align meta to bottom of post

A simple flex box CSS to push the last element in the post-summary ( the post meta ) to align vertically at the bottom of the post.

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-summary {
    flex: 1;
}

.post-summary>.gb-inside-container>*:last-child {
    margin-top: auto;
}

Border radius on post archive images

/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
    border-radius: 4px;
}