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.
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 email@example.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.
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
lessc style.less style.min.css
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
As a last step I've implemented an additional setting to use a full set of favicons, primarily for mobile devices.
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