Merge pull request #860 from cobyism/responsify

Responsive jekyllrb.com (thanks to @cobyism)

site/_includes/docs_contents.html

@@ -1,4 +1,4 @@
-<div class="grid2">
+<div class="unit one-fifth hide-on-mobiles">
   <aside>
     <h4>Getting Started</h4>
     <ul>

site/_includes/docs_contents_mobile.html

@@ -0,0 +1,36 @@
+<div class="docs-nav-mobile unit whole show-on-mobiles">
+  <select onchange="if (this.value) window.location.href=this.value">
+    <option value="">Navigate the docs…</option>
+    <optgroup label="Getting started">
+      <option value="{{ site.url }}/docs/home">Welcome</option>
+      <option value="{{ site.url }}/docs/installation">Installation</option>
+      <option value="{{ site.url }}/docs/usage">Basic Usage</option>
+      <option value="{{ site.url }}/docs/structure">Directory structure</option>
+      <option value="{{ site.url }}/docs/configuration">Configuration</option>
+    </optgroup>
+    <optgroup label="Your Content">
+      <option value="{{ site.url }}/docs/frontmatter">Front-matter</option>
+      <option value="{{ site.url }}/docs/posts">Writing posts</option>
+      <option value="{{ site.url }}/docs/pages">Creating pages</option>
+      <option value="{{ site.url }}/docs/variables">Variables</option>
+      <option value="{{ site.url }}/docs/migrations">Blog migrations</option>
+    </optgroup>
+    <optgroup label="Customization">
+      <option value="{{ site.url }}/docs/templates">Templates</option>
+      <option value="{{ site.url }}/docs/permalinks">Permalinks</option>
+      <option value="{{ site.url }}/docs/pagination">Pagination</option>
+      <option value="{{ site.url }}/docs/plugins">Plugins</option>
+      <option value="{{ site.url }}/docs/extras">Extras</option>
+    </optgroup>
+    <optgroup label="Deployment">
+      <option value="{{ site.url }}/docs/github-pages">GitHub Pages</option>
+      <option value="{{ site.url }}/docs/deployment-methods">Other methods</option>
+    </optgroup>
+    <optgroup label="Miscellaneous">
+      <option value="{{ site.url }}/docs/contributing">Contributing</option>
+      <option value="{{ site.url }}/docs/troubleshooting">Troubleshooting</option>
+      <option value="{{ site.url }}/docs/sites">Sites using Jekyll</option>
+      <option value="{{ site.url }}/docs/resources">Resources</option>
+    </optgroup>
+  <select>
+</div>

site/_includes/footer.html

@@ -1,15 +1,15 @@
 <footer>
-  <div class="content">
+  <div class="grid">
-    <div class="grid4 first">
+    <div class="unit one-third center-on-mobiles">
-      <p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome contributors</a>.</p>
+      <p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome&nbsp;contributors</a>.</p>
     </div>
-    <div class="grid8 align-right">
+    <div class="unit two-thirds align-right center-on-mobiles">
-      <p>Proudly hosted by</p>
+      <p>
+        Proudly hosted by
         <a href="https://github.com">
           <img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
         </a>
+      </p>
     </div>
-    <div class="clear"></div>
   </div>
 </footer>
-<div class="clear"></div>

site/_includes/header.html

@@ -1,6 +1,9 @@
 <header>
-  <div class="content">
+  <nav class="mobile-nav show-on-mobiles">
-    <div class="grid3 first">
+    {% include primary-nav-items.html %}
+  </nav>
+  <div class="grid">
+    <div class="unit one-third center-on-mobiles">
       <h1>
         <a href="{{ site.url }}/">
           <span>Jekyll</span>
@@ -8,19 +11,8 @@
         </a>
       </h1>
     </div>
-    <nav class="grid6">
+    <nav class="main-nav unit two-thirds hide-on-mobiles">
-      <ul>
+      {% include primary-nav-items.html %}
-        <li {% if page.overview %}class="current"{% endif %}>
-          <a href="{{ site.url }}/">Overview</a>
-        </li>
-        <li {% unless page.overview %}class="current"{% endunless %}>
-          <a href="{{ site.url }}/docs">Documentation</a>
-        </li>
-        <li class="">
-          <a href="https://github.com/mojombo/jekyll">View on GitHub</a>
-        </li>
-      </ul>
     </nav>
-    <div class="clear"></div>
   </div>
 </header>

site/_includes/primary-nav-items.html

@@ -0,0 +1,11 @@
+<ul>
+  <li class="{% if page.overview %}current{% endif %}">
+    <a href="{{ site.url }}/">Overview</a>
+  </li>
+  <li class="{% unless page.overview %}current{% endunless %}">
+    <a href="{{ site.url }}/docs">Doc<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">umentation</span></a>
+  </li>
+  <li class="">
+    <a href="https://github.com/mojombo/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
+  </li>
+</ul>

site/_includes/top.html

@@ -3,10 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <title>{{ page.title }}</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="{{ site.url }}/css/normalize.css" />
-  <link rel="stylesheet" href="{{ site.url }}/css/grid.css" />
+  <link rel="stylesheet" href="{{ site.url }}/css/gridism.css" />
   <link rel="stylesheet" href="{{ site.url }}/css/style.css" />
   <link rel="stylesheet" href="{{ site.url }}/css/pygments.css" />
   <link rel="icon" type="image/x-icon" href="{{ site.url }}/favicon.png" />

site/_layouts/default.html

@@ -1,6 +1,6 @@
 {% include top.html %}
 
-<body>
+<body class="wrap">
   {% include header.html %}
 
   {{ content }}

site/_layouts/docs.html

@@ -3,9 +3,11 @@ layout: default
 ---
 
   <section class="docs">
-    <div class="content">
+    <div class="grid">
 
-      <div class="grid10 first">
+      {% include docs_contents_mobile.html %}
+
+      <div class="unit four-fifths">
         <article>
           <h1>{{ page.title }}</h1>
           {{ content }}

site/_posts/2012-07-01-configuration.md

@@ -19,6 +19,7 @@ The table below lists the available settings for Jekyll, and the various <code
 class="option">options</code> (specifed in the configuration file) and <code
 class="flag">flags</code> (specified on the command-line) that control them.
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -99,9 +100,11 @@ class="flag">flags</code> (specified on the command-line) that control them.
     </tr>
   </tbody>
 </table>
+</div>
 
 ### Build Command Options
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -169,6 +172,7 @@ class="flag">flags</code> (specified on the command-line) that control them.
     </tr>
   </tbody>
 </table>
+</div>
 
 ### Serve Command Options
 
@@ -176,6 +180,7 @@ In addition to the options below, the `serve` sub-command can accept any of the
 for the `build` sub-command, which are then applied to the site build which occurs right
 before your site is served.
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -216,6 +221,7 @@ before your site is served.
     </tr>
   </tbody>
 </table>
+</div>
 
 <div class="note warning">
   <h5>Do not use tabs in configuration files</h5>

site/_posts/2012-07-01-contributing.md

@@ -56,12 +56,28 @@ Workflow
 Here's the most direct way to get your work merged into the project:
 
 * Fork the project.
-* Clone down your fork: `git clone git://github.com/<username>/jekyll.git`
+* Clone down your fork:
-* Create a topic branch to contain your change: `git checkout -b my_awesome_feature`
+
+{% highlight bash %}
+git clone git://github.com/<username>/jekyll.git
+{% endhighlight %}
+
+* Create a topic branch to contain your change:
+
+{% highlight bash %}
+git checkout -b my_awesome_feature
+{% endhighlight %}
+
+
 * Hack away, add tests. Not necessarily in that order.
 * Make sure everything still passes by running `rake`.
 * If necessary, rebase your commits into logical chunks, without errors.
-* Push the branch up: `git push origin my_awesome_feature`
+* Push the branch up:
+
+{% highlight bash %}
+git push origin my_awesome_feature
+{% endhighlight %}
+
 * Create a pull request against mojombo/jekyll and describe what your change
   does and the why you think it should be merged.
 

site/_posts/2012-07-01-frontmatter.md

@@ -38,6 +38,7 @@ relies on.
 There are a number of predefined global variables that you can set in the
 front-matter of a page or post.
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -119,6 +120,7 @@ front-matter of a page or post.
     </tr>
   </tbody>
 </table>
+</div>
 
 
 ## Custom Variables
@@ -142,6 +144,7 @@ title:
 
 These are available out-of-the-box to be used in the front-matter for a post.
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -163,3 +166,4 @@ These are available out-of-the-box to be used in the front-matter for a post.
     </tr>
   </tbody>
 </table>
+</div>

site/_posts/2012-07-01-pagination.md

@@ -36,6 +36,7 @@ page in the generated site.
 The pagination plugin exposes the `paginator` liquid object with the following
 attributes:
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -102,6 +103,7 @@ attributes:
     </tr>
   </tbody>
 </table>
+</div>
 
 <div class="note info">
   <h5>Pagination does not support tags or categories</h5>

site/_posts/2012-07-01-permalinks.md

@@ -17,6 +17,7 @@ permalink is defined as `/:categories/:year/:month/:day/:title.html`.
 
 ## Template variables
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -87,9 +88,11 @@ permalink is defined as `/:categories/:year/:month/:day/:title.html`.
     </tr>
   </tbody>
 </table>
+</div>
 
 ## Built-in permalink styles
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -124,11 +127,13 @@ permalink is defined as `/:categories/:year/:month/:day/:title.html`.
     </tr>
   </tbody>
 </table>
+</div>
 
 ## Permalink style examples
 
 Given a post named: `/2009-04-29-slap-chop.textile`
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -171,3 +176,4 @@ Given a post named: `/2009-04-29-slap-chop.textile`
     </tr>
   </tbody>
 </table>
+</div>

site/_posts/2012-07-01-plugins.md

@@ -80,6 +80,7 @@ using the `category_index.html` layout.
 
 Generators are only required to implement one method:
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -98,6 +99,7 @@ Generators are only required to implement one method:
     </tr>
   </tbody>
 </table>
+</div>
 
 ## Converters
 
@@ -139,6 +141,7 @@ end
 
 Converters should implement at a minimum 3 methods:
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -178,6 +181,7 @@ Converters should implement at a minimum 3 methods:
     </tr>
   </tbody>
 </table>
+</div>
 
 In our example, `UpcaseConverter#matches` checks if our filename extension is
 `.upcase`, and will render using the converter if it is. It will call
@@ -212,6 +216,7 @@ Liquid::Template.register_tag('render_time', Jekyll::RenderTimeTag)
 
 At a minimum, liquid tags must implement:
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -230,6 +235,7 @@ At a minimum, liquid tags must implement:
     </tr>
   </tbody>
 </table>
+</div>
 
 You must also register the custom tag with the Liquid template engine as
 follows:
@@ -286,6 +292,7 @@ Liquid::Template.register_filter(Jekyll::AssetFilter)
 
 There are two flags to be aware of when writing a plugin:
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -325,6 +332,7 @@ There are two flags to be aware of when writing a plugin:
     </tr>
   </tbody>
 </table>
+</div>
 
 To use one of the example plugins above as an illustration, here is how you’d
 specify these two flags:
@@ -379,7 +387,7 @@ There are a few useful, prebuilt plugins at the following locations:
 - [Full-text search by Pascal Widdershoven](https://github.com/PascalW/jekyll_indextank): Add full-text search to your Jekyll site with this plugin and a bit of JavaScript.
 - [Stylus Converter](https://gist.github.com/988201) Convert .styl to .css.
 - [Embed.ly client by Robert Böhnke](https://github.com/robb/jekyll-embedly-client) Autogenerate embeds from URLs using oEmbed.
-- [Logarithmic Tag Cloud](https://gist.github.com/2290195): Flexible. Logarithmic distribution. Usage eg: `{{ "{% tag_cloud font-size: 50 - 150%, threshold: 2 " }}%}`. Documentation inline.
+- [Logarithmic Tag Cloud](https://gist.github.com/2290195): Flexible. Logarithmic distribution. Documentation inline.
 - [Related Posts by Lawrence Woodman](https://github.com/LawrenceWoodman/related_posts-jekyll_plugin): Overrides `site.related_posts` to use categories to assess relationship
 - [AliasGenerator by Thomas Mango](https://github.com/tsmango/jekyll_alias_generator): Generates redirect pages for posts when an alias configuration is specified in the YAML Front Matter.
 - [FlickrSetTag by Thomas Mango](https://github.com/tsmango/jekyll_flickr_set_tag): Generates image galleries from Flickr sets.

site/_posts/2012-07-01-structure.md

@@ -33,6 +33,7 @@ A basic Jekyll site usually looks something like this:
 
 An overview of what each of these does:
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -153,3 +154,4 @@ An overview of what each of these does:
     </tr>
   </tbody>
 </table>
+</div>

site/_posts/2012-07-01-templates.md

@@ -13,6 +13,7 @@ common tasks easier.
 
 ## Filters
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
@@ -143,6 +144,7 @@ common tasks easier.
     </tr>
   </tbody>
 </table>
+</div>
 
 ## Tags
 
@@ -231,4 +233,3 @@ You can also use this tag to create a link to a post in Markdown as follows:
 [Name of Link]({% post_url 2010-07-21-name-of-post %})
 {% endraw %}
 {% endhighlight %}
-

site/_posts/2012-07-01-troubleshooting.md

@@ -50,7 +50,23 @@ On Debian or Ubuntu, you may need to add /var/lib/gems/1.8/bin/ to your path in
 
 ## Base-URL Problems
 
-If you are using base-url option like `jekyll serve --baseurl '/blog'` then make sure that you access the site at `http://localhost:4000/blog/index.html`. Just accessing `http://localhost:4000/blog` will not work.
+If you are using base-url option like:
+
+{% highlight bash %}
+jekyll serve --baseurl '/blog'
+{% endhighlight %}
+
+… then make sure that you access the site at:
+
+{% highlight bash %}
+http://localhost:4000/blog/index.html
+{% endhighlight %}
+
+It won’t work to just access:
+
+{% highlight bash %}
+http://localhost:4000/blog
+{% endhighlight %}
 
 ## Configuration problems
 
@@ -74,7 +90,9 @@ problems.
 If your link has characters that need to be escaped, you need to use
 this syntax:
 
-`![Alt text](http://yuml.me/diagram/class/[Project]->[Task])`
+{% highlight text %}
+![Alt text](http://yuml.me/diagram/class/[Project]->[Task])
+{% endhighlight %}
 
 If you have an empty tag, i.e. `<script src="js.js"></script>`, Maruku
 transforms this into `<script src="js.js" />`. This causes problems in

site/_posts/2012-07-01-variables.md

@@ -13,11 +13,12 @@ following is a reference of the available data.
 
 ## Global Variables
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
-      <td>Variable</td>
+      <th>Variable</th>
-      <td>Description</td>
+      <th>Description</th>
     </tr>
   </thead>
   <tbody>
@@ -61,14 +62,16 @@ following is a reference of the available data.
     </tr>
   </tbody>
 </table>
+</div>
 
 ## Site Variables
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
-      <td>Variable</td>
+      <th>Variable</th>
-      <td>Description</td>
+      <th>Description</th>
     </tr>
   </thead>
   <tbody>
@@ -132,14 +135,16 @@ following is a reference of the available data.
     </tr>
   </tbody>
 </table>
+</div>
 
 ## Page Variables
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
-      <td>Variable</td>
+      <th>Variable</th>
-      <td>Description</td>
+      <th>Description</th>
     </tr>
   </thead>
   <tbody>
@@ -229,6 +234,7 @@ following is a reference of the available data.
     </tr>
   </tbody>
 </table>
+</div>
 
 <div class="note">
   <h5>ProTip™: Use custom front-matter</h5>
@@ -244,11 +250,12 @@ following is a reference of the available data.
 
 ## Paginator
 
+<div class="mobile-side-scroller">
 <table>
   <thead>
     <tr>
-      <td>Variable</td>
+      <th>Variable</th>
-      <td>Description</td>
+      <th>Description</th>
     </tr>
   </thead>
   <tbody>
@@ -290,6 +297,7 @@ following is a reference of the available data.
     </tr>
   </tbody>
 </table>
+</div>
 
 <div class="note info">
   <h5>Paginator variable availability</h5>

site/css/grid.css

@@ -1,62 +0,0 @@
-.content {
-  width: 978px;
-  margin: 0 auto;
-}
-.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
-  float: left;
-  display: inline;
-  margin-left: 30px;
-}
-.grid1 {
-  width: 54px;
-}
-.grid2 {
-  width: 138px;
-}
-.grid3 {
-  width: 222px;
-}
-.grid4 {
-  width: 306px;
-}
-.grid5 {
-  width: 390px;
-}
-.grid6 {
-  width: 474px;
-}
-.grid7 {
-  width: 558px;
-}
-.grid8 {
-  width: 642px;
-}
-.grid9 {
-  width: 726px;
-}
-.grid10 {
-  width: 810px;
-}
-.grid11 {
-  width: 894px;
-}
-.first {
-  margin-left: 0;
-  clear: left;
-}
-
-/* clearfix */
-.clear:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-* html .clear {
-  zoom: 1;
-} /* IE6 */
-*:first-child+html .clear {
-  zoom: 1;
-} /* IE7 */

site/css/gridism.css

@@ -0,0 +1,110 @@
+/*
+ * Gridism
+ * A simple, responsive, and handy CSS grid by @cobyism
+ * https://github.com/cobyism/gridism
+ */
+
+/* Preserve some sanity */
+.grid,
+.unit {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Set up some rules to govern the grid */
+.grid {
+  display: block;
+  clear: both;
+}
+.grid .unit {
+  float: left;
+  width: 100%;
+  padding: 10px;
+}
+
+/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
+.grid .unit:first-child { padding-left: 20px; }
+.grid .unit:last-child { padding-right: 20px; }
+
+/* Nested grids already have padding though, so let’s nuke it */
+.unit .unit:first-child { padding-left: 0; }
+.unit .unit:last-child { padding-right: 0; }
+.unit .grid:first-child > .unit { padding-top: 0; }
+.unit .grid:last-child > .unit { padding-bottom: 0; }
+
+/* Let people nuke the gutters/padding completely in a couple of ways */
+.no-gutters .unit,
+.unit.no-gutters {
+  padding: 0 !important;
+}
+
+/* Wrapping at a maximum width is optional */
+.wrap .grid,
+.grid.wrap {
+  max-width: 978px;
+  margin: 0 auto;
+}
+
+/* Width classes also have shorthand versions numbered as fractions
+ * For example: for a grid unit 1/3 (one third) of the parent width,
+ * simply apply class="w-1-3" to the element. */
+.grid .whole,          .grid .w-1-1 { width: 100%; }
+.grid .half,           .grid .w-1-2 { width: 50%; }
+.grid .one-third,      .grid .w-1-3 { width: 33.3332%; }
+.grid .two-thirds,     .grid .w-2-3 { width: 66.6665%; }
+.grid .one-quarter,    .grid .w-1-4 { width: 25%; }
+.grid .three-quarters, .grid .w-3-4 { width: 75%; }
+.grid .one-fifth,      .grid .w-1-5 { width: 20%; }
+.grid .two-fifths,     .grid .w-2-5 { width: 40%; }
+.grid .three-fifths,   .grid .w-3-5 { width: 60%; }
+.grid .four-fifths,    .grid .w-4-5 { width: 80%; }
+.grid .golden-small,   .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
+.grid .golden-large,   .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
+
+/* Utility classes */
+.align-center { text-align: center; }
+.align-left   { text-align: left; }
+.align-right  { text-align: right; }
+.pull-left    { float: left; }
+.pull-right   { float: right; }
+
+.show-on-mobiles {
+  display: none;
+}
+
+/* Responsive Stuff */
+@media screen and (max-width: 568px) {
+  /* Stack anything that isn’t full-width on smaller screens */
+  .grid .unit {
+    width: 100% !important;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .unit .grid .unit {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  /* Sometimes, you just want to be different on small screens */
+  .center-on-mobiles {
+    text-align: center !important;
+  }
+  .hide-on-mobiles {
+    display: none !important;
+  }
+  .show-on-mobiles {
+    display: block !important;
+  }
+  a .show-on-mobiles {
+    display: inline !important;
+  }
+}
+
+/* Expand the wrap a bit further on larger screens */
+/*@media screen and (min-width: 1180px) {
+  .wrap .grid {
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+}*/

site/css/style.css

@@ -1,5 +1,11 @@
 /* Base */
 
+* {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
 body {
   font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 21px;
@@ -11,6 +17,18 @@ body {
   text-shadow: 0 1px 3px rgba(0,0,0,.5);
 }
 
+.clear {
+  display: block;
+}
+
+.clear:after {
+  content: " ";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
 /* Sections */
 
 body > header, body > section, body > footer {
@@ -19,34 +37,16 @@ body > header, body > section, body > footer {
   clear: both;
 }
 
-.content {
-  padding: 20px 0;
-}
-
 /* Header */
 
-body > header {
+body > header h1, body > header nav {
-  padding: 40px 0 10px;
+  display: inline-block;
-}
-
-body > header .content {
-  padding: 0;
-}
-
-body > header h1 img {
-  margin-left: -30px;
 }
 
 body > header h1 span {
   display: none;
 }
 
-/* Navigation */
-
-nav {
-  margin-top: 52px;
-}
-
 nav ul {
   padding: 0;
   margin: 0;
@@ -54,10 +54,17 @@ nav ul {
 
 nav li {
   display: inline-block;
-  margin-left: 10px;
 }
 
-nav li a {
+.main-nav {
+  margin-top: 52px;
+}
+
+.main-nav li {
+  margin-right: 10px;
+}
+
+.main-nav li a {
   border-radius: 5px;
   font-weight: 800;
   font-size: 14px;
@@ -69,19 +76,65 @@ nav li a {
    -webkit-transition: all .25s;
 }
 
-nav li a:hover {
+.main-nav li a:hover {
   background: #252525;
   box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
   text-shadow: 0 1px 3px rgba(0,0,0,.5);
 }
 
-nav li.current a {
+.main-nav li.current a {
   background: #fc0;
   color: #222;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
   text-shadow: 0 1px 0 rgba(255,255,255,.3);
 }
 
+.mobile-nav ul {
+  overflow: hidden;
+  width: 100%;
+  display: table;
+}
+
+.mobile-nav a {
+  float: left;
+  width: 100%;
+  background: #333;
+  color: #fc0;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 800;
+  padding: 5px 0;
+  border-radius: 5px;
+}
+
+.mobile-nav .current a {
+  background: #fc0;
+  color: #222;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
+  text-shadow: 0 1px 0 rgba(255,255,255,.3);
+}
+
+.mobile-nav li {
+  display: table-cell;
+  width: 33.3%;
+  padding: 8px;
+}
+
+@media (max-width: 768px){
+  .main-nav ul {
+    text-align: right;
+  }
+}
+@media (max-width: 720px){
+  .main-nav .show-on-mobiles {
+    display: inline;
+  }
+  .main-nav .hide-on-mobiles {
+    display: none;
+  }
+}
+
 /* Footer */
 
 body > footer {
@@ -96,50 +149,60 @@ body > footer a {
   color: #fff;
 }
 
-body > footer .align-right p, body > footer .align-right img {
+body > footer .align-right p, body > footer img {
   display: inline-block;
 }
 
-body > footer .align-right img {
+body > footer img {
   position: relative;
-  top: 14px;
+  top: 8px;
   margin-left: 5px;
+  width: 100px;
+  height: 30px;
+  opacity: .8;
+  padding: 1px;
+  -webkit-transition: opacity .2s;
+  -moz-transition: opacity .2s;
+  transition: opacity .2s;
 }
 
-/* Utilities */
+body > footer a:hover img {
-
+  opacity: 1;
-.align-left {
-  text-align: left;
 }
 
-.align-right {
+@media (max-width: 568px){
-  text-align: right;
+  footer .one-third p {
+    margin-bottom: 0;
+  }
+  footer .two-thirds p {
+    margin-top: -20px;
+  }
 }
 
-.align-center {
+/* Intro */
-  text-align: center;
-}
 
-/* Sections */
+.intro .unit {
-
-.intro .content {
   padding: 10px 0 40px;
 }
 
 .intro p {
-  font-size: 3.2em;
+  font-size: 1.75em;
   line-height: 1em;
   margin: 0;
 }
 
-.features .content {
+@media (min-width: 569px){
-  padding: 20px 0 40px;
+  .intro p {
+    font-size: 3.2em;
+  }
 }
 
+/* Quickstart */
+
 .quickstart {
   background: #3F1F1F;
   color: #fff;
-  margin: 60px 0 80px;
+  margin: 60px 0;
   box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
 }
 
@@ -147,80 +210,46 @@ body > footer .align-right img {
   padding: 0px 0;
 }
 
-.quickstart .code {
-  margin: -30px 0;
-  float: right;
-}
-
 .quickstart h4 {
-  margin: 48px 0 0;
+  font-size: 24px;
-  font-size: 28px;
+  line-height: 24px;
+  margin-top: 20px;
   text-shadow: 0 1px 3px rgba(0,0,0,.8);
 }
 
-.free-hosting .content {
+.quickstart .code {
-  /*margin-bottom: 40px;*/
+  font-size: 12px;
-  position: relative;
+  display: block;
+  margin: 0 0 -30px;
 }
 
-.free-hosting .pane {
+@media (min-width: 768px){
-  background: #444;
+  .quickstart .code {
-  border-radius: 10px;
+    font-size: 18px;
-  padding: 40px 70px 30px;
+    margin: -30px 0;
-  /*color: #222;*/
-  text-shadow: none;
-}
-
-.free-hosting img {
-  float: left;
-  margin: -20px 40px -40px -20px;
-}
-
-.free-hosting h2 {
-  /*font-weight: 800;*/
-}
-.free-hosting p,
-.free-hosting a {
-  font-weight: inherit;
-}
-
-.free-hosting p {
-  margin: 0.75em;
-}
-
-.free-hosting a {
-  /*color: #c00;*/
-}
-
-.free-hosting .content:after {
-  content: " ";
     float: right;
-  background: url(../img/footer-arrow.png) top left no-repeat;
+  }
-  width: 73px;
+  .quickstart h4 {
-  height: 186px;
+    margin: 50px 0 0;
-  position: absolute;
+    text-align: center;
-  right: 30px;
+  }
-  bottom: -60px;
 }
 
 /* Code */
 
 .quickstart .code {
   display: block;
-  background: #3d3d3d;
+  padding: 0;
-  border-radius: 5px;
   font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
   line-height: 1.3em;
-  box-shadow: 0 5px 30px rgba(0,0,0,.3);
 }
 
 .quickstart .code .title {
   display: block;
   text-align: center;
-  margin: 0;
+  margin: 0 20px;
   padding: 5px 0;
-  border-top-left-radius: 5px;
+  border-radius: 5px 5px 0 0;
-  border-top-right-radius: 5px;
   box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -242,6 +271,10 @@ body > footer .align-right img {
 .quickstart .code .shell {
   padding: 20px;
   text-shadow: none;
+  margin: 0 20px;
+  background: #3d3d3d;
+  border-radius: 0 0 5px 5px;
+  box-shadow: 0 5px 30px rgba(0,0,0,.3);
 }
 
 .quickstart .code .line {
@@ -270,6 +303,62 @@ body > footer .align-right img {
   color: #888;
 }
 
+/* Free Hosting */
+
+.free-hosting .pane {
+  background: #444;
+  border-radius: 10px;
+  text-shadow: none;
+  position: relative;
+  padding: 0 20px 30px;
+}
+
+.free-hosting img {
+  margin: -30px 0 0;
+  width: 180px;
+  height: 150px;
+}
+
+.free-hosting h2 {
+  font-size: 28px;
+}
+
+.free-hosting p,
+.free-hosting a {
+  font-size: 16px;
+}
+
+.free-hosting p {
+  margin: .75em 0;
+}
+
+@media (min-width: 768px){
+  .free-hosting img {
+    float: left;
+    margin: -20px -30px -30px -50px;
+    width: 300px;
+    height: 251px;
+  }
+  .free-hosting .pane-content {
+    margin-top: 35px;
+    padding-right: 30px;
+  }
+  .free-hosting p,
+  .free-hosting a {
+    font-size: 18px;
+  }
+  .free-hosting .pane:after {
+    content: " ";
+    float: right;
+    background: url(../img/footer-arrow.png) top left no-repeat;
+    width: 73px;
+    height: 186px;
+    position: absolute;
+    right: 0;
+    bottom: -30px;
+  }
+}
+
 /* Documentation */
 
 .docs .content {
@@ -279,9 +368,24 @@ body > footer .align-right img {
 .docs article {
   background: #444;
   border-radius: 10px;
-  padding: 40px 40px 30px;
+  padding: 20px;
+  margin: 0 10px;
   box-shadow: 0 3px 10px rgba(0,0,0,.1);
   min-height: 800px;
+  font-size: 16px;
+}
+
+@media (max-width: 568px){
+  .docs article {
+    margin: 0;
+  }
+}
+
+@media (min-width: 768px){
+  .docs article {
+    padding: 40px 40px 30px;
+    font-size: 21px;
+  }
 }
 
 .docs aside {
@@ -328,6 +432,7 @@ body > footer .align-right img {
   padding-top: 40px;
   position: relative;
   background: url(../img/article-footer.png) top center no-repeat;
+  margin: 40px -20px 10px;
 }
 
 .section-nav > div {
@@ -391,6 +496,9 @@ body > footer .align-right img {
   cursor: default;
 }
 
+.docs-nav-mobile select {
+  width: 100%;
+}
 
 /* Code Highlighting */
 
@@ -401,11 +509,17 @@ pre, code {
   margin: 0;
   padding: 0;
   font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
-  font-size: 16px;
+  font-size: 14px;
   padding: 0 .5em;
   line-height: 1.8em;
 }
 
+@media (min-width: 768px){
+  pre, code {
+    font-size: 16px;
+  }
+}
+
 .highlight, p > pre, p > code, p > nobr > code, li > code {
   background: #333;
   color: #fff;
@@ -421,7 +535,6 @@ pre, code {
   overflow: scroll;
 }
 
-
 /* HTML Elements */
 
 h1, h2, h3, h4, h5, h6 {
@@ -586,7 +699,7 @@ code.option, code.flag, code.filter, code.output {
 
 .note {
   margin: 30px 0;
-  margin-left: -50px;
+  margin-left: -30px;
   padding: 20px 20px 24px;
   padding-left: 50px;
   border-radius:  0px 5px 5px 0px;
@@ -603,6 +716,18 @@ code.option, code.flag, code.filter, code.output {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );
 }
 
+@media (max-width: 568px){
+  .note {
+    margin-right: -30px;
+  }
+}
+
+@media (min-width: 768px){
+  .note {
+    margin-left: -50px;
+  }
+}
+
 .note:before {
   content: "";
   position: absolute;
@@ -695,3 +820,13 @@ code.option, code.flag, code.filter, code.output {
   font-weight: bold;
   text-shadow: 0 -1px 0 rgba(0,0,0,.5);
 }
+
+/* Responsive tables */
+
+@media (max-width: 768px){
+  .mobile-side-scroller {
+    overflow-x: scroll;
+    margin: 0 -40px;
+    padding: 0 10px;
+  }
+}

site/index.html

@@ -5,25 +5,27 @@ overview: true
 ---
 
 <section class="intro">
-  <div class="content">
+  <div class="grid">
-    <p class="first">Transform your plain text into static websites and blogs. <br />So easy, <strong>it&rsquo;s scary</strong>.</p>
+    <div class="unit whole center-on-mobiles">
+      <p class="first">Transform your plain text into static&nbsp;websites and&nbsp;blogs.</p>
+    </div>
   </div>
 </section>
 <section class="features">
-  <div class="content">
+  <div class="grid">
-    <div class="grid4 first">
+    <div class="unit one-third">
       <h2>Simple</h2>
       <p>
         No more databases, comment moderation, or pesky updates to install—just <em>your content</em>.
       </p>
       <a href="{% post_url 2012-07-01-usage %}" class="">How Jekyll works &rarr;</a>
     </div>
-    <div class="grid4">
+    <div class="unit one-third">
       <h2>Static</h2>
       <p><a href="http://daringfireball.net/projects/markdown/">Markdown</a> (or <a href="http://textile.sitemonks.com/">Textile</a>), <a href="http://liquidmarkup.org/">Liquid</a>, HTML <span class="amp">&amp;</span> CSS go in. Static sites come out ready for deployment.</p>
       <a href="{% post_url 2012-07-01-templates %}" class="">Jekyll template guide &rarr;</a>
     </div>
-    <div class="grid4">
+    <div class="unit one-third">
       <h2>Blog-aware</h2>
       <p>
         Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.
@@ -34,11 +36,11 @@ overview: true
   </div>
 </section>
 <section class="quickstart">
-  <div class="content">
+  <div class="grid">
-    <div class="grid5 first">
+    <div class="unit golden-small center-on-mobiles">
-      <h4>Get up and running <em>in seconds</em>.</h4>
+      <h4>Get up and running <em>in&nbsp;seconds</em>.</h4>
     </div>
-      <div class="code">
+    <div class="unit golden-large code">
       <p class="title">Quick-start Instructions</p>
       <div class="shell">
         <p class="line">
@@ -70,13 +72,19 @@ overview: true
   </div>
 </section>
 <section class="free-hosting">
-  <div class="content">
+  <div class="grid">
+    <div class="unit whole">
+      <div class="grid pane">
+        <div class="unit whole center-on-mobiles">
           <img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages">
-    <div class="pane">
+          <div class="pane-content">
-      <h2><strong>Free hosting</strong> with GitHub Pages</h2>
+            <h2 class="center-on-mobiles"><strong>Free hosting</strong> with GitHub Pages</h2>
-      <p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and all.</p>
+            <p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and&nbsp;all.</p>
             <a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a>
+          </div>
+        </div>
         <div class="clear"></div>
       </div>
     </div>
+  </div>
 </section>