jmcglone/jmcglone.github.io

Problems with github pages guide css file

Opened this issue · 0 comments

Hi there!
Firstly, thanks for taking the time to put your github pages + jekyll guide together. I set up a simple blog following it a couple of years ago.
I'm just getting around to adding more content to it and I found the formatting of bullet lists to be a bit strange: the font was much smaller than the rest of the text.

I think there are some issues with the css file from the tutorial:

p {
    font-size: 1.5em;
    line-height: 1.4em;
    color: #333;
}

Applying a 1.5 multiplier to the font size of paragraph tags results in the headings being quite small in comparison (except h1 which is set to 3em).

ul.posts { 
    margin: 20px auto 40px;
    font-size: 1.5em;
}

ul.posts li {
    list-style: none;
}

This section doesn't work as intended. ul.posts applies to ul tags with class="post". The generated ul tags don't have a class specified so this doesn't work.

My quick solution to both these problems was:

  • Replace the p section with .post. This applies it to all the text in the post since it is surrounded with <div class="post"></div>:
.post {
     font-size: 1.5em;
     line-height: 1.4em;
     color: #333;
 }
  • Replace the ul section with:
.post ul{ 
    margin: 20px auto 40px; 
}

Now this applies to all unordered lists inside div with class="post"
The font size doesn't need to be set anymore since it is set for the whole post.

I'm new to css so this might not be ideal but it looks a lot better than the existing css file to me. I could submit a pull request if you'd like. However, I've migrated to using a jekyll theme since it's incredibly easy to set up using bundler.


Between this and the other open issues, it seems like this tutorial is now fairly out-of-date. Given that it is still on the first page of Google when searching for "jekyll github pages guide", it would be helpful if you added a note at the start of the guide to let people know that it's outdated until you have time to update it. You could point users to the more up-to-date guide hosted on the Github docs page.
Given that a github-hosted resource now exists, it may be better to spend future efforts contributing to that one.

This guide is also referenced by the official Jekyll Github Pages guide which could lead to some frustration for new users. I am going to suggest that they change this link to the github guide as well.

Thanks again for creating this guide when you did! It was very valuable for me to get my blog started and undoubtedly for many others as well.