I sort of like the default Jekyll theme. My only peeve is that it isn’t responsive. So, today, I modified the theme and gave it a responsive twist. The css source is available at: https://gist.github.com/6551567
This website uses the same css. I’ve extracted the portions of this page’s css that are common to the default Jekyll installation’s css file. The class names in the
main.css file of the default installation are not modified and so, you can replace the default css with the one linked above and it will work right away.
- Adelle Extra Bold is used for the headings (800 weight).
- Calluna Light for the body copy
The setting up of the stack is not quite as easy as that with Google Web Fonts but the instructions on Typekit are pretty useful.
Once you create a new Jekyll website, replace the
main.css file with the one at the link above. Alternatively, use git:
Installation via Git
- Clone the repo at the gist link to your jekyll installation’s
.gitat the end). This command will save the file to the
- In your
_layout/default.htmlmodify the link to
main.cssto point to the cloned file:
- To enable the fonts used by the stylesheet, add this line to the
Apart from the obivious addition of media queries, the fonts have been changed. The default Jekyll installation comes shipped with a sans-serif stack. This has been changed to a serif stack of Droid Serif and
Georgia as the fallback font. The headings use Cabin with
Verdana as the fallback option.