Fixed post-card size for default casper theme

owenlearnstocode · 2018-04-16 03:42:20 UTC

First of all, I apologize if this kind of styling help or scripting help is deemed inappropriate for this forum. I will take this down if necessary.

What I would like to achieve is to have a fixed size/style of post-card on the blog front page of the casper theme. It seems that by default, the post-card adjusts its size (or perhaps better described as shape) to fill the page horizontally (See here for example). Where and how could I modify the theme to have a fixed shape of the post-card. Since it is dynamic, I am guessing it’s part of a JS script. But I am having trouble locating where it is.

Thanks for any help in advance!

Aileen · 2018-04-16 04:21:01 UTC

Hey Owen,

No, it’s totally fine to ask questions here. That’s what the forum is for. Many things you’ll find in our documentation, but in your particular case, you’ll have the read the source code of Casper.

The post card grid is not done with JS, but with plain CSS. Here is the base style for the post cards:

github.com

TryGhost/Casper/blob/master/assets/css/screen.css#L386




.post-feed {
position: relative;
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
padding: 40px 0 0 0;
}


.post-card {
flex: 1 1 300px;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0 20px 40px;
min-height: 300px;
background: #fff center center;
background-size: cover;
border-radius: 5px;
box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
transition: all 0.5s ease;

And here you’ll find the code section, that styles every 6n+1 nth post card as the full width card that you fancy:

github.com

TryGhost/Casper/blob/master/assets/css/screen.css#L572-L616


/* Special Styling for home page grid (below):


The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.


*/


@media (min-width: 795px) {
   .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) {
       flex: 1 1 100%;
       flex-direction: row;
   }


   .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
       position: relative;
       flex: 1 1 auto;
       border-radius: 5px 0 0 5px;
   }


   .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image {
       position: absolute;

This file has been truncated. show original

owenlearnstocode · 2018-04-16 06:21:29 UTC

Huge thanks! This is extremely helpful. Thanks for such a detailed response