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 the root of the Jekyll installation cd css git clone https://gist.github.com/6551567.git
- In your
_layout/default.htmlmodify the link to
main.cssto point to the cloned file:
<link rel='stylesheet' href='/css/655156/main.css'/>
- To enable the fonts used by the stylesheet, add this line to the
<link href='http://fonts.googleapis.com/css?family=Cabin:700,700italic|Droid+Serif:400,400italic|Inconsolata:400,700' rel='stylesheet' type='text/css'>
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
Georgia as the fallback font. The headings use
the fallback option.