I’ve been working on a GitHub page for a local community that will be referenced by members of all levels of programming skills. The site will contain blog posts and a FAQ page. The blog posts and FAQs are to be separate from the home page. FAQ pages usually list a series of questions, each followed by an answer. Such a setup in Jekyll would normally require that I update the same page manually over and over as needed. I don’t want to do that, so I explored the possibility of maintaining a collection FAQs just like blog posts are maintained in a Jekyll blog’s default setup.

Since I wanted blog posts and FAQs to be listed on separate pages I made two new folders, blog and faq. In each folder, I include an index page and a folder named
_ posts. From this point on, I’ll explain the changes made for FAQs sake and you can assume the same goes for blog posts.

[Directory structure of jekyll blog]

Inside _ posts is where you’ll keep a file for each FAQ item. Note that the assigned layout is faq_post, which will be explained later.

FAQ post file:

1
2
3
4
5
6
7

---
layout: faq_post
title:  "Is this a FAQ post?"
date:   2013-12-07
categories: jekyll update
---
Why, yes it is!

In order for the the FAQ index page to only list FAQ items, I needed to pull posts (not pages) with faq as a category. This task is handled by site.categories.faq. If you’re asking what site.categories is, please refer to this short piece on global variables in YAML Front-matter.

FAQ index page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

---
layout: default
title: OKC Nerdy Girls - FAQS
category: faq
---
 
<div id="home">
  <h1>FAQs</h1>
  <ul class="posts">
    {% for post in site.categories.faq %}
    <li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
</div>

Next change I made to the directory/file structure was to the _layouts folder where I split post.html into two files, blog_post.html and faq_post.html. You do not need to do this unless actual the layout of blog and faq pages will differ. In my case, I wanted to keep the active navigation menu item highlighted without making sure every faq or blog post had the correct category when their layouts can manage that.

[Multiple post layout files for each separate list of posts]

FAQ post layout:

1
2
3
4
5
6
7
8
9
10

---
layout: default
category: faq
---
<h2>{{ page.title }}</h2>
<p class="meta">{{ page.date | date_to_string }}</p>
 
<div class="post">
{{ content }}
</div>

[Navigation pills highlighted based on page layout category]

Ideally, I would provide screenshots of the final results but the site has not yet gone live at the time of this post. The site is open sourced so you’re welcome to take a look at my committed code in GitHub.

One of the setbacks I had when setting up this blog was with my site title.

I chose to show my site title in an HTML text element instead of an image, so that I wouldn’t have to produce new images of various sizes every time I made a change to it. After making this switch, the title placement was always off somehow. The top of text was being cut off, and the social media icons were overlapping it. I set background colors for the HTML containers to help me identify layout issues.

[Screenshot of my botched up site title]

With the blue background representing the div container and the gray background representing the text element, you can see the text is too big for its container. Normally, divs automatically size to their contents, but not in this case. I also couldn’t understand why my social media icons were over lapping the text element, but I learned later that what I was seeing was not necessarily the icons overlapping the text, but the text overflowing into other components.

I was baffled for a long while and in my confusion thought that I needed to relearn HTML. So I picked up “HTML & CSS: Design and Build Websites”, and actually learned a few new things that were introduced in HTML5. Only one thing I found in this book seemed to be a possible factor in this issue, and that was leading.

Leading (pronounced ledding) is a term typographers use for the vertical space between lines of text. In a typeface, the part of a letter that drops beneath the baseline is called
a descender, while the highest point of a letter is called the ascender. Leading is measured from the bottom of the descender on one line to the top of the ascender on the next.
Jon Duckett, author of HTML & CSS: Design and Build Websites

[Image from HTML & CSS: Design and Build Websites]

You can’t set leading directly, but you can set font-size and line-height. The above diagram demonstrates that leading = line-height - font-size.

Through further CSS experimentation, I found that setting the line-height for my title div was key to fixing this issue. But why was line-height necessary? I was certain that attribute shouldn’t have to be manually set.

CSS title container

1
2
3
4
5
6
7
8

.title, .title a, .title a:hover, .title a:visited {
	font-family: fairy_strangeregular;
	font-weight: normal;
	font-size: 2.25em;
	line-height: 2.25em;
	color: #000;
	text-decoration: none;
}

Some of my experiments required starting over with a clean Jekyll blog setup, and those led me to find that Bootstrap was the cause of this “issue.” I say “issue” in quotes now because Bootstrap is not really to blame, but my ignorance. Turns out that Bootstrap sets a default line-height. Maybe if I had used one of their heading tags, like <h1>, I wouldn’t have had to go through all this trouble but their heading tags were not large enough for my preference in title font sizes.

Bootstrap’s CSS for default line-height

1
2
3
4
5
6
7

body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.428571429;
  color: #2c3e50;
  background-color: #ffffff;
}

This concludes the case of the chopped title, and another example of why some of my headaches are self-inflicted.