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;
}