Steam is a minimal and responsive theme for Ghost, forked from Vapor.
It features a clean and essential style with single column layout, beautiful typography, two colors, customizable partials and some nice javascript enhancements.
Clone the repository in the /content/themes folder of Ghost or upload the latest release zip from the settings. Restart Ghost and choose Steam in the design pane.
$ git clone https://github.com/epistrephein/Steam.git
By default Steam uses a flat green theme color. The css for the colors are in a separate partial for easy customization: just edit partials/theme-colors.hbs, replacing #33cc99 with your light shade and #178b6b with your dark shade.
Previous versions of Steam included premade colors partials that could just be turned on and off. These have since been removed for simplicity, so here are the values that were used if you want to keep your colors the way they were.
| Color | Light | Dark |
|---|---|---|
| Green | #33cc99 |
#178b6b |
| Blue | #3498db |
#2079b4 |
| Orange | #ff9d00 |
#d88500 |
| Red | #f05948 |
#c62310 |
Facebook and Twitter icons in the footer are automatically displayed if defined in the general settings of Ghost.
If you want to add custom icons and links, duplicate any of them outside of the conditional tags and replace the url and the icon using the Font Awesome list, e.g. to add a GitHub icon
<a href="https://github.com/username" target="_blank" rel="noopener" title="GitHub"><i class="fa fa-2x fa-fw fa-github"></i> <span class="hidden">GitHub</span></a>If you don't want the social icons section, replace {{> footer-social}} with {{!> footer-social}} in default.hbs.
Replace the text, email address and author name in the file partials/footer-author.hbs.
To remove it, replace {{> footer-author}} with {{!> footer-author}} in default.hbs.
If you don't want to show the author section (which is profile picture, bio, website and location) at the bottom of posts, replace {{> post-author}} with {{!> post-author}} in post.hbs.
Replace {{!> disqus}} with {{> disqus}} in post.hbs and in page.hbs (if you want them in static pages too), then add your Disqus ID in partials/disqus.hbs.
Replace {{!> meta}} with {{> meta}} in default.hbs, then customize the content of partials/meta.hbs.
After you've created your Google Analytics account, change {{!> google-analytics}} to {{> google-analytics}} in default.hbs, ensuring to replace YOUR_TRACKING_CODE with your actual tracking code.
To customize the favicon and/or apple-touch-icon of your blog replace favicon.ico, the 16x16 and 32x32 favicon.png and the 180x180 appletouchicon.png in /assets/img/.
Steam features Smooth Scroll for nice scrolling animations. The default settings are in js/steam.js
smoothScroll.init({
speed: 800,
easing: 'easeInOutCubic',
updateURL: false,
offset: 125,
});Smooth Scroll is automatically injected in footnotes refs and backrefs when created via their markdown syntax.
This is the body of the post with a footnote ref[ˆ1] somewhere.
[^1]: End of the post with the footnote text.Steam also features highlight.js for syntax highlighting: you can disable it by removing the line
hljs.initHighlightingOnLoad();in js/steam.js
You can force a code block into a specific language highlighting by appending the lang name, e.g.:
```ruby
puts "Hello, World!"
```
If you want to suppress the highlighting for a particular code block, you can use nohighlight:
```nohighlight
$ git clone https://github.com/epistrephein/Steam.git
```
Bug reports and pull requests are welcome on GitHub.
This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Code of Conduct.
You can contribute changes by forking the project and submitting a pull request. To get started:
- Fork the repo
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new pull request
This project is released under the terms of the MIT license. See LICENSE for further details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent