WIP: Responsive project site

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="grid4 first">
-      <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>
+  <div class="grid">
+    <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&nbsp;contributors</a>.</p>
     </div>
-    <div class="grid8 align-right">
-      <p>Proudly hosted by</p>
-      <a href="https://github.com">
-        <img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
-      </a>
+    <div class="unit two-thirds align-right center-on-mobiles">
+      <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,26 +1,18 @@
 <header>
-  <div class="content">
-    <div class="grid3 first">
+  <nav class="mobile-nav show-on-mobiles">
+    {% 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>
           <img src="{{ site.url }}/img/logo-2x.png" width="249px" height="115px" alt="">
         </a>
       </h1>
     </div>
-    <nav class="grid6">
-      <ul>
-        <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 class="main-nav unit two-thirds hide-on-mobiles">
+      {% include primary-nav-items.html %}
     </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 @@
 ---
 
   <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,13 +172,15 @@ class="flag">flags</code> (specified on the command-line) that control them.
     </tr>
   </tbody>
 </table>
+</div>
 
 ### Serve Command Options
 
 In addition to the options below, the `serve` sub-command can accept any of the options
 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`
-* Create a topic branch to contain your change: `git checkout -b my_awesome_feature`
+* Clone down your fork:
+
+{% 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>