Template for https://getgrav.org/blog?

What do I need to setup a page, that exactly looks like https://getgrav.org/blog ? Is there a template, plugin or even a skeleton, that provides this functionality?

Thank you very much for your help!

See this page, it’s all in the learning documents:


The “Blog Site” skeleton is already a starting point for a blog.

The Grav Blog uses a theme that’s not distributed to make it a bit special, but it’s just a little bit of CSS customization in the Blog Posts listing, plus some custom code to allow infinite loading.

I’m specifically interested in these card items. They are really great. Are they also included in the “Blog Site” skeleton?

Just create these cards in CSS, the hover effect is just a plain CSS3 box shadow property that changes upon hover + CSS3 transform

create the card in CSS, and add the below two properties to get the initial (before hover) state.

.your-card-class {
    transition: all 250ms ease 0s;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);

Then after you are satisfied with the way the card looks add the following :hover class.

.shortcut:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23);
    transform: translateY(-5px);