Adding Style Sheets to Github Pages Jekyll Blog
by Mike Levin
Saturday, April 30, 2022Okay, 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;
}