Theme Setup

Images

Overview

Installation
Further Customization
Questions?
License

Installation

Paragraph Indentation

By default the margin below paragraphs has been removed and indent added to each. This is an intentional design decision to mimic the look of type set in a printed book or manuscript.

screen shot of paragraphs with default indent style set — Example of the default paragraph style (indented first line and bottom margin removed).

To disable the indents and add spacing between paragraphs change the following line in _sass/variables.scss from true !default to false like so.

$paragraph-indent: false;

screen shot of paragraphs with indent style disabled — Example of paragraphs with $paragraph-indent disabled.

Videos

Video embeds are responsive and scale with the width of the main content block with the help of FitVids.

Not sure if this only effects Kramdown or if it’s an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the <iframe> tags and remove allowfullscreen. Example below:

<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>

Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add share: false to the YAML Front Matter. If you’d like to use different social networks modify _includes/_social-share.html to your liking. Icons are set using Font Awesome.

Further Customization

Jekyll 2.x added support for Sass files making it much easier to modify a theme’s fonts and colors. By editing values found in _sass/variables.scss you can fine tune the site’s colors and typography.

For example if you wanted a red background instead of white you’d change $bodycolor: #fff; to $bodycolor: $cc0033;.

To modify the site’s JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into scripts.min.js. Install Node.js, then install Grunt, and then finally install the dependencies for the theme contained in package.json:

npm install

From the theme’s root, use grunt concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the images/ folder. You can also use grunt dev in combination with jekyll build --watch to watch for updates JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.

Questions?

Found a bug or aren’t quite sure how something works? By all means Ping me on Twitter @mmistakes or file a GitHub Issue. And if you make something cool with this theme feel free to let me know.

License

This theme is free and open source software, distributed under the MIT License. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.

Prateek Narang