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