DandyDev/pelican-bootstrap3 — pull request #96 by fijam (2014-04-07 16:05:08+00:00)
Title: Align vertically article info bar items

Now this is a slightly more intrusive change for a pretty minor issue so feel free to discuss/disagree on any points. This is just a first proposition on how it could be fixed.

The problem is that the article info bar items are not aligned well with the tags. Let me illustrate with an example:
![before](https://cloud.githubusercontent.com/assets/75824/2633143/26f08964-be6b-11e3-899e-765d4565a716.png)
If we draw lines at the typeface descender height and the cap height, we end up being too high relative to the 'Date' tag. I see this both in current stable Firefox and Chrome.

The patchset that I provide here results in this final effect:
![after](https://cloud.githubusercontent.com/assets/75824/2633178/76a75c3a-be6b-11e3-967f-2fb7026097ee.png)
Or, if you want to ignore the calendar icon and look only at baseline and cap height:
![after-base](https://cloud.githubusercontent.com/assets/75824/2633392/31742208-be6e-11e3-90ea-c1c87d8aa105.png)

Now, into more detail. The article info items are defined in includes/article_info.html. The date of publication is wrapped in a span class "published" that is not used anywhere else. The other items are not wrapped in anything. I propose to rename "published" class to "article-info" and wrap all elements of the info bar (date, author, tags etc) in this class to use it for vertical alignment. To achieve the desired effect I use vertical-align:text-top.

You can see it live here: http://null.printf.cc/blog/ and experiment in your browser's inspector to turn on/off the changed values and see how it affects the site (note: this is the head of my fork so there are some other padding/margin changes there, please ignore them).

An added advantage is that you can now adjust the spacing between the items for example by adding margin-right: 10px; to .article-info (this is implemented in the live site)

I don't know if it's the best/most elegant way to do it and I am not sure about how it works e.g. in IE so please feel free to test/comment.