In the last few days I've spent some time to create a new Pelican theme because what I was using before was unreadable on small screens. So the pages you are now reading are certified mobile-friendly1.
I started from scratch using Twitter's Bootstrap as a base, nonetheless what I thought would be a weekend project kept me busy more than I expected, as I found myself continually tweaking the CSS code for inane little details, again and again, like for example, deciding the right amount of space between text lines or choosing the proper shade of gray for a button or a heading.
It probably still has some rough edges as I didn't tested it on a wide range of platforms2.
Taming Bootstrap to do things only slightly differently than the default layout was quite time consuming as I didn't know the framework, but the only hack I've used was to override the grid-float-breakpoint variable with a "reasonable" high value to force the navigation bar to stay collapsed on large desktops; in other words I wanted the "hamburger" menu always displayed. If my reader is now thinking -"That's appearance over usability!"- I suppose I could agree with him, anyway I like it better this way.
That and the use of the grid system to force a "narrow" text column slightly off center on the page, and to be honest it doesn't work that well when re-sizing the browser window as the text is jumping a little too much for my taste.
On the Pelican front the development was much faster, in part because I decided for a simple layout and in part because I've only created a small subset of the templates that are listed in the documentation. This means that without some editing it couldn't be used as a drop in replacement for, as an example, the default theme. But that wasn't my objective. I would like to point out that I have enabled the UNIQUE_IDS option to use footnotes freely with the MarkDown's Footnotes extension; it wasn't difficult to find out but the class name to import lacks an "s":
# MarkDown extensions
from markdown.extensions.codehilite import CodeHiliteExtension
from markdown.extensions.footnotes import FootnoteExtension
MD_EXTENSIONS = [
'markdown.extensions.extra',
CodeHiliteExtension(css_class='highlight', linenums=False, pygments_style='monokai'),
FootnoteExtension(UNIQUE_IDS=True),
]
To give a little more details about my workflow, I started drafting a mock index page using Bootply, but I soon ended up editing the HTML file directly as I was getting frustrated by the limitations of the visual approach. This wasn't painful as the Bootstrap documentation is top-notch, with basically every combination of widgets displayed. Once I was satisfied with the mock appearance, I started creating the Pelican's base.html template, adding the elements I needed for the index.html, so the header, the navigation bar, the articles content, a tag indexer, a pager and finally a footer. The archives page is a simple lists of all the articles in chronological order, and finally there are a couple of static pages like the about and HTML error pages like 403 and 404 codes.
I noticed that the CSS file was nearly 150 KiB of size, not outrageously huge, but nonetheless in my particular case it included a lot of unused descriptors. I was ready to tackle it programmatically, but first I searched if someone had solved this problem before. I've found a couple of Python utilities, anyway I tried with one available for Node.js called UnCSS, that seems to do its job, as the Bootstrap's CSS file was reduced to a more reasonable size of 20 KiB. My only advice when using UnCSS is to manually pass the option to ignore descriptors used by user's actions, for example collapsing or fading elements linked to input events as they are not examined by the utility.