New theme for this blog - keeping track of changes

Posted on Mon 20 March 2017 in erinnerungsfragmente.de

After quite some time it was time to give this blog a new layout. Droidstrap is a great theme, but I was looking for something more shiny, perfectly fitting on mobile devices and so on.

As I'm using Pelican, an open-source static site generator, there's a big community providing Plugins as well as Themes.

After some time and testing I was convinced that Flex by Alexandre Vicenzi will be the base.

Time for modifications!

Flex is under active development, there are issues being resolved, Pull Reqauests and about 140 forks as of now.

Sure enough my first step has been to create my fork of Flex. Adding it to my private repo as submodule in a new branch was also straight forward:

cd git_repo_blog
# Create new branch
git checkout -v flex_theme
# checkout my fork into my themes folder
git submodule add git@github.com:rullmann/pelican-theme-flex.git pelican-themes/flex
# Additionally update all other submodules before starting
git submodule update --recursive --remote

My changes can be checked in the commit history But let's dig in a bit deeper into some of the commits.

Solarized

For my technical blog I wanted to use the Solarized color scheme. Let's take a look into the commit

As you can see I've changed the file variable.less as well as 'style.css'. These files are used by lesscss, something new for me! So what lesscss does is giving the option to easier work with css files. The variable.less file is used in order to generate a minified css with placeholders. Simply change some color color codes, regenerate the style.min.css and you're done. Simple and brilliant.

Generating the minify css is done in one step after installing it with npm:

lessc style.less style.min.css

Mozilla Observatory

The Mozilla Observatory provides an easy way to check the webserver and site-config. It performs some checks, primarily on webserver headers, which resulted in a D+ rating for this site.

After some testing and implementing CSP on nginx level the rating became a B:

Content-Security-Policy: default-src 'self'; img-src 'self' https://i.creativecommons.org https://licensebuttons.net; object-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com

The header is also set within my fork to make sure it applies even if nginx doesn't send it. Maybe it'll be helpful for someone else

More favicons

As a last step I've implemented an additional setting to use a full set of favicons, primarily for mobile devices.

Within the pelicanconf.py just one line is required:

EXTENDED_FAVICON_DIR = SITEURL + '/images'

Keeping track of changes

As said before Flex is an active project. So how to keep track of all the changes?

Github does have a short how-to on this. After setting up the additional remote it can be used for a simple pull or a rebase into a branch:

git pull upstream master