Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it’s the place a reader will be spending the most time looking at.
We start out by thinking about header tags and their sizing. Then we style the
<time> element, which will be ubiquitous throughout the site.
We remind ourselves that you never letter-space lower case letters, yest we steal sheep.
We add another important color to our bits.scss file,
$blue, which will be used for links throughout the site. We experiment with some other link styling but end up not going for it. The hover/focus/active states are achieved by just using the
Darken() function Sass.
We bump up the font-size of the first paragraph of the article. This is just stylistically cool, but it’s also a bit of a psychological trick to get people reading and interested in the article. It’s also a trick for myself as a writer. I know that paragraph is going to be super big so I better make it good!
This first paragraph thing might be a little fragile. For instance, we put in a placeholder for a future Google AdSense ad, which then breaks the selector. We’ll fix it though!