A medium-like Ghost theme
Ghost stands for easy, fast and independent publishing. Medium for beautiful and easy publishing. So I made myself a Ghost theme that takes the good parts from Medium & mixes them with stuff I would do differently, to form the perfect symbiosis. I called it Readium and you dropped it on Github so you guys can fork it or use it out-of-the-box.
See it live here: http://mark-read.info (Yes, he needs a better logo, I know)
You can grab it here: https://github.com/starburst1977/Readium
And don't forget to check out my two premium Ghost themes Marisa & Chiara and the underlying principle.
- Mobile-First Design Aproach
- Fully Responsive layout
- Use header images in articles (give your article the "articleImage" tag and it uses the first image as your header image)
- Awesome automatic figcaptions from your images alt tags
- Valid HTML5/CSS3
- WAI-ARIA & Rich Snippets(microdata) roles
- Minimal design
- Ready for Ghost 0.4.2 (tag pages, featured articles, static pages, etc.)
- Designed for Readability & Sharability
- Works with the Ghost Hosting platform
- FontAwesome implemented for easy use of icons fonts
- Google Analytics integrated
- Highlight.js integrated for Syntax highlighting - Highlight JS
- OpenGraph & Twitter Cards meta's
- Free & Open Source Font usage
- Theoretically ready for multiple users (here is how to hack Ghost for Mulit-User)
If your Ghost blog is self hosted:
- Copy the contents of the .zip file into /content/themes/.
- You need to restart your Ghost instance. After that you can switch themes inside your Ghost admin (http://your.domain.com/ghost/settings/general/). Scroll down and choose "Readium" from the theme dropdown.
- Now you can customize your logo, langing page image (if you choose to have one), as well as user images and texts to fit the theme.
- Have fun.
If your Ghost blog is hosted on the Ghost hosting platform:
- Upload your Zip file via the Ghost admin panel.
- Switch your theme to the Readium theme.
- Have fun.
Usage for Header images
- Give your article the tag "articleImage"
- Add a high-res image as the first image in your article
- You should pay attention to image size. Don't go to crazy.
Usage for Figcaptions
- Just give your images an alt tag
Thanks go to...
- FontAwesome by Dave Gandy
- Highlight JS by Ivan Sagalaev
- Friedrich Althausen for Vollkorn & Adobe for Source Sans Pro
- @mr_boolean, @riplexus & @unverbraucht for helping with JS
- The awesome guys that make Ghost
- The really rad guys that design Medium
Check it out
You can download the theme:
Installation help included inside via the Readme file.
Have fun and let me know what you think about it.