Adding Style Sheets to Github Pages Jekyll Blog

by Mike Levin

Okay, that was easy, adding the prev/next arrows to Jekyll blogs. But I’m not quite done. There’s some CSS that completes the project.

It was a bit tricky to figure out. I don’t normally do the sass css generators, but it’s built into Jekyll. The default css for Jekyll is the type of thing you download and put in location locally just like a default.html or post.html. And like them, there will be some transformations occurring, but instead of just using a style.css you use a style.scss which does an import:

---
---

@import 'jekyll-theme-hacker';

Using the CSS provided at the article I’m working off of, I guessed that you simply paste it underneath:

---
---

@import 'jekyll-theme-hacker';

.post-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.post-nav p {
    flex: 1 1 0;
    width: 45%;
}

.post-nav p:first-child {
    padding-right: 0.5em;
}

.post-nav p:last-child {
    padding-left: 0.5em;
    text-align: right;
}