New mobile friendly theme

I noticed that my blog is not mobile friendly, so I changed my Pelican theme to use Bootstrap version 3, which has a responsive design. I am now using pelican-bootstrap3 with the Bootswatch United theme.

The United theme is inspired by Ubuntu and appears to use similar colors and fonts. This seemed appropriate, given my support of free open source software.

I recompiled the Bootswatch United theme to increase the base font size from 14 pt to 18 pt. Maybe some people think that's big, but I like large text! The article titles are kind of big on my phone though.

To recompile the CSS for a Bootswatch theme, follow the instructions here. The changes I made are shown in this diff:

diff --git a/united/variables.less b/united/variables.less
index 1062bbb..15a399a 100644
--- a/united/variables.less
+++ b/united/variables.less
@@ -48,12 +48,12 @@
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;

-@font-size-base:          14px;
+@font-size-base:          18px;
 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

-@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h1:            floor((@font-size-base * 2.22)); // ~36px
+@font-size-h2:            floor((@font-size-base * 1.89)); // ~30px
 @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
 @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
 @font-size-h5:            @font-size-base;

In short, make changes to variables in variables.less and then recompile to get the new CSS files.

Mostly, I was able to plug in the Bootstrap 3 theme with minimal changes. The only thing I haven't gotten to work is the Tipue Search plugin.

Comments