A minimalist Pelican theme.
Switch branches/tags
Clone or download
Pull request Compare This branch is 14 commits ahead, 128 commits behind alexandrevicenzi:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
pygments
static
templates
tests
translations
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
Prismjs settings.pdf
README.md
gulpfile.js
package-lock.json
package.json
translate.sh
translation_chart.png

README.md

Flex

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

Features

Integrations

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.

Translations

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