Simple dark blogging theme for Ghost 1.x.
- Fully hackable
- Offcanvas sidebar
- Flexgrid
- Websafe fonts: Roboto Slab for headings and Roboto for main text
- Syntax highlighting with PrismJS and selfmade theme inspired by Predawn
- Source included
DEMO: You can find a live example here: shade.moso.io.
Shade is built with blogging in mind, thus is a bit less featured than the official Casper-theme. However, Shade is built around the same theme API documentation, which explains every possible Handlebars helper and templates.
The main files are:
default.hbs- The main template fileindex.hbs- Used for the home pagepost.hbs- Used for individual posts
Shade also has an error.hbs-file that handles all errors such as 403/404 and all 500-errors.
However, it's easy to hack and expand Shade by adding new .hbs-files, for example:
page.hbs- to handle individual pagestag.hbs- for tag archivesauthor.hbs- for author archives
One really neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:
page-about.hbs- Custom template for the/about/-pagetag-news.hbs- Custom template for/tag/news/-archiveauthor-ali.hbs- Custom template for/author/ali/-archive
Shade scripts and styles are compiled using Laravel Mix which is "an elegant wrapper around Webpack". You'll need Node.js and npm installed. There is also support for yarn.
After that, install the node modules:
$ npm install or $ yarn install
Do your edits, and then compile the Sass to CSS and bundle the JS with webpack:
$ npm run dev
To get watch running:
$ npm run watch
To compile for production which includes minification of both CSS and JS:
$ npm run production
Laravel Mix automagically use autoprefixer, so don't worry about browser-specific vendor-prefixes.
Once you're done, you can use the zip-command to package Shade theme files into ./shade-ghost-theme.zip, which you can then easily upload to your site:
$ npm run zip
By default, PrismJS highlights HTML, CSS, JavaScript, and shell-like syntax. Shade adds Markdown, PHP, Sass, and SCSS to this list. If you wish to add further languages to its syntax highlight, you can extend this by editing src/js/shade.js, and add more imports below the // PrismJS-line.
You can find all the languages that ship with PrismJS inside node_modules/prismjs/components. Be aware that some languages extends other languages - they have dependencies, so to say. You can also opt for other syntax highlight themes by importing the CSS-file directly into shade.js aswell.
Example: import 'prismjs/themes/okaidia.css'
However you will have to remove the @import 'components/code'-line from src/sass/shade.scss for that to kick in.
You can find examples on usage on the Advanced Markup Guide-page.
Shade imports Material Design Icons. This is opted for as MDI has equal-sized icons compared to, eg, Font Awesome which aren't equal in size. You can check the full list of icons by clicking the link.
Copyright? You're free to distribute Shade all you like. The only appeal I have is that the "Theme: Shade by moso" is kept intact.
Shade is released under the MIT-license.
Please report any issues and missing stuff.