I love building themes & I love Ghost. And I always wanted to have a possibility to blog that's similar to Medium, but without the drawbacks (like no control over your data & loss of all rights to your content, etc.). So I made myself a theme for Ghost that takes the good parts from Medium.com & mixes them with stuff I would do differently. And this is what I ended up with.
You can grab it here: https://github.com/starburst1977/Readium
Don't forget to check out my other themes Marisa & Chiara.
- Mobile-First Design Aproach
- Fully Responsive layout
- Use header images in articles, if you want to
- Valid HTML5/CSS3
- WAI-ARIA & Rich Snippets(microdata) roles
- Minimal design
- Needs Ghost 0.4
- Designed for Readability & Sharability
- Works with the Ghost Hosting platform
- Handles static pages
- Featured article support
- Fluidbox included (Mediums Lightbox variant)
- 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
- If you want a big article image, just give it the this alt attribute -> alt="img-post-cover".
- Give your article the "BigImage" tag.
- You should pay attention to image size. Don't go to crazy.
- Some style configuration possible inside essentials.less.
Usage for Figcaptures
- Wrap a figure tag aroung the element you want to annotate.
- Below the wrapped tag, add the figcaputre tag and enter your content.
- Now close both tags again. Have fun.
- Automatic linking for static pages
Thanks go to...
- FontAwesome by Dave Gandy
- Highlight JS by Ivan Sagalaev
- Friedrich Althausen for Vollkorn & Adobe for Source Sans Pro
- Marc Binder & Kevin Read 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.