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.
[UPDATE]
What’s Different?
The previous version had fonts from Google Web Fonts. I’ve migrated the webfont stack to TypeKit which offers the Adelle and Calluna free fonts.
- 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.
Installation
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
cssfolder(note the.gitat the end). This command will save the file to thecss/6551567directory.
# In the root of the Jekyll installation
cd css
git clone https://gist.github.com/6551567.git- In your
_layout/default.htmlmodify the link tomain.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
_layout/default.htmltemplate:
<link href='http://fonts.googleapis.com/css?family=Cabin:700,700italic|Droid+Serif:400,400italic|Inconsolata:400,700' rel='stylesheet' type='text/css'>What’s different?
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.