Adding Style Sheets to Github Pages Jekyll Blog
I figured out how to add style sheets to my Github Pages Jekyll Blog using the sass css generator. After pasting the CSS provided in the article I was working off of underneath the @import 'jekyll-theme-hacker' line, I was able to add the prev/next arrows to my blog. Come read more about my journey in adding style sheets to my blog!
Successfully Added Style Sheets to My Github Pages Jekyll Blog!
By Michael Levin
Saturday, April 30, 2022
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;
}