Add ToC to the CSS; use config.yml var for version; add reverse layou…

…t option (including docs in readme)
nikyadav002 · Dec 28, 2013 · e2a4914 · e2a4914
1 parent 9a0640b
commit e2a4914
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,11 @@ $ jekyll serve
 Open <http://localhost:4000> in your browser, and voilà. You're done.
 
 
-## Optional themes
+## Options
+
+Hyde includes a few options, typically applied via classes on the `<body>` element.
+
+### Themes
 
 As of v1.1, Hyde ships with optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). In Hyde, a theme simply changes the sidebar's background color and the color of links within blog posts. Here's the red theme in action:
 
@@ -59,6 +63,16 @@ To use a theme, add anyone of the available theme classes to the `<body>` elemen
 To create your own theme, look to the [Themes section](/mdo/hyde/blob/master/public/css/hyde.css#L387) of Hyde's CSS. Copy any existing theme (they're only two lines of CSS), rename it, and change the provided colors.
 
 
+### Reverse layout
+
+Hyde's page orientation can be reversed with a single class.
+
+```html
+<body class="layout-reverse">
+  ...
+</body>
+```
+
 ### Author
 
 **Mark Otto**

diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,7 @@
 title:        Hyde
 tagline:      "Hyde, a Jekyll theme"
 url:          http://andhyde.com
+version:      1.0.0
 author:
   name:       ""
   email:      ""

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -32,16 +32,15 @@ <h1>Hyde</h1>
         <div class="colophon">
           <ul class="colophon-links">
             <li>
-              <a href="https://github.com/mdo/hyde/archive/v1.0.0.zip">Download</a>
+              <a href="https://github.com/mdo/hyde/archive/v{{ site.version }}.zip">Download</a>
             </li>
             <li>
               <a href="https://github.com/mdo/hyde">GitHub project</a>
             </li>
-            <li>Currently v1.0</li>
+            <li>Currently v{{ site.version }}</li>
           </ul>
           <p>&copy; 2013. {{ site.author.name }} All rights reserved.</p>
         </div>
-
       </div>
     </header>
 

diff --git a/public/css/hyde.css b/public/css/hyde.css
@@ -20,6 +20,21 @@ Learn more at http://andhyde.com or https://github.com/mdo/hyde.
 */
 
 
+/*
+ * Contents
+ *
+ * Body resets
+ * Custom type
+ * Links
+ * Masthead
+ * Container
+ * Posts
+ * Error page
+ * Pagination
+ * Themes
+ */
+
+
 /*
  * Body resets
  *
@@ -277,6 +292,13 @@ a:focus {
   }
 }
 
+
+/* Container
+ *
+ * Align the contents of the site above the proper threshold with some margin-fu
+ * with a 25%-wide `.masthead`.
+ */
+
 /* Center container in available real estate */
 @media (min-width: 990px) {
   .container {
@@ -383,6 +405,23 @@ a:focus {
 }
 
 
+/*
+ * Reverse layout
+ *
+ * Flip the orientation of the page by placing the `.masthead` on the right.
+ */
+
+@media (min-width: 990px) {
+  .layout-reverse .masthead {
+    left: auto;
+    right: 0;
+  }
+  .layout-reverse .container {
+    margin-left: 10%;
+    margin-right: 35%;
+  }
+}
+
 
 /*
  * Themes