Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

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

Started by Muut Archive 10 years ago · 4 replies · 322 views
10 years ago

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!

10 years ago

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.

10 years ago

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

10 years ago

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.

CSS
.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.

CSS

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

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1352 9 years ago
Archive · by Muut Archive, 9 years ago
2 935 9 years ago
Archive · by Muut Archive, 9 years ago
2 4064 9 years ago
Archive · by Muut Archive, 9 years ago
1 2949 9 years ago
Archive · by Muut Archive, 9 years ago
3 1119 9 years ago