Flex

A Pelican theme based on https://github.com/alexandrevicenzi/Flex/.

Features

• Mobile First
• Responsive
• Semantic
• SEO Best Practices
• Open Graph
• Rich Snippets (JSON-LD)
• Related Posts (via plugin)
• Minute read like Medium (via plugin) (new in 2.0)
• Syntax Highlight with Prism.js
• As an alternative: Multiple Code Highlight Styles
• Translation Support (new in 2.0)

Integrations

• AddThis
• Disqus
• Gauges
• Google AdSense (new in 2.1)
• Google Analytics
• Google Tag Manager
• Piwik
• StatusCake

Advanced favicon

Theme favours favicon created w/ RealFaviconGenerator. Webapp creates a zip file w/ multiple resources for different devices and browsers.

Necessary static metadata added (on top of pelican basics) to template base.html:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

Chech the previous and adjust as necessary based on info on output of RealFaviconGenerator.

Add the following to pelicanconf.py:

FAVICON = SITEURL + '/favicon.ico'

STATIC_PATHS = ['images',
                'static/favicon.ico',
                'static/android-chrome-192x192.png',
                'static/android-chrome-512x512.png',
                'static/apple-touch-icon.png',
                'static/browserconfig.xml',
                'static/favicon-16x16.png',
                'static/favicon-32x32.png',
                'static/manifest.json',
                'static/mstile-150x150.png',
                'static/safari-pinned-tab.svg']

EXTRA_PATH_METADATA = {
    'static/favicon.ico': {'path': 'favicon.ico'},
    'static/android-chrome-192x192.png': {'path': 'android-chrome-192x192.png'},
    'static/android-chrome-512x512.png': {'path': 'android-chrome-512x512.png'},
    'static/apple-touch-icon.png': {'path': 'apple-touch-icon.png'},
    'static/browserconfig.xml': {'path': 'browserconfig.xml'},
    'static/favicon-16x16.png': {'path': 'favicon-16x16.png'},
    'static/favicon-32x32.png': {'path': 'favicon-32x32.png'},
    'static/manifest.json': {'path': 'manifest.json'},
    'static/mstile-150x150.png': {'path': 'mstile-150x150.png'},
    'static/safari-pinned-tab.svg': {'path': 'safari-pinned-tab.svg'}
}

Install

Clone this repo to your local development environment and call from pelicanconf.py like THEME = '../flex', relative to your directory setup.

Development

Install required Node modules with npm install (package.json).

After changes, less > min.css with gulp less. See gulpfile.js for more.

Translate

Translate this theme to new languages at Transifex.

Read more about Translation Support.

Prism.js tweaks

This theme uses Prism.js for syntax highlight. Theme is Okaidia, and the following plugins are included:

• Line Numbers
• Copy to Clipboard Button

After downloading, there are couple of things necessary to modify in prism.css:

Fix line height issue for Line Numbers

Add line-height: 1.2em; in selector pre.line-numbers.

Change background color of code bocks

Change background: #272822; to background: #333; in selector :not(pre) > code[class*="language-"], pre[class*="language-"].`

Minify the css with gulp prism-css and uglify the js with gulp prism-js.

Docs

Go to Wiki

Contributing

Always open an issue before sending a PR. Talk about the problem/feature that you want to fix. If it's really a good thing you can submit your PR. If you send an PR without talking about before what it is, you may work for nothing.

As always, if you want something that only make sense to you, just fork Flex and start a new theme.

Live example

I'm using Flex on my personal website.

License

MIT