Site template repairs (#73)

* Added columnization to package category and tag pages:
  - Added `columns-grouping-heading` class to section header
  - Added div tag with `columns-grouping` class around each section header and unordered list
  - Added div tag with `columns` class around all sections
  - Added CSS rules
* Added top margin to `unit-foot` class.
* Fixed template background full height.
* Removed aberrant shadow under footer section.
* Update style from `zoom` to `transform`.
* Added missing CSS rule properties.
* Added missing blank lines under front matter.

Author: samlikins

_drafts/jekyll-introduction-draft.md

@@ -4,6 +4,7 @@ category : lessons
 tagline: "Supporting tagline"
 tags : [intro, beginner, jekyll, tutorial]
 ---
+
 {% include JB/setup %}
 
 

_layouts/default.html

@@ -2,5 +2,6 @@
 theme :
   name : the-program
 ---
+
 {% include JB/setup %}
 {% include themes/the-program/default.html %}

_layouts/page.html

@@ -1,5 +1,6 @@
 ---
 layout: default
 ---
+
 {% include JB/setup %}
 {% include themes/the-program/page.html %}

_layouts/post.html

@@ -1,5 +1,6 @@
 ---
 layout: default
 ---
+
 {% include JB/setup %}
 {% include themes/the-program/post.html %}

archive/index.html

@@ -4,6 +4,7 @@
 header : Post Archive
 group: navigation
 ---
+
 {% include JB/setup %}
 
 {% assign posts_collate = site.posts %}

assets/custom.css

@@ -87,3 +87,15 @@ tr:hover td {
 .meta .list-tag a:hover {
   color: white;
 }
+
+.columns {
+  column-width: 20em;
+}
+.columns-grouping {
+  margin-bottom: 2em;
+  orphans: 4;
+}
+.columns-grouping-heading {
+  column-span: all;
+  margin-bottom: 0.25em;
+}

assets/themes/the-program/css/_base.less

@@ -5,7 +5,7 @@ No styleguide reference.
 */
 
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio, canvas, video { display: inline-block; *display: inline; transform: scale(1); }
 audio:not([controls]) { display: none; }
 [hidden] { display: none; }
 
@@ -21,7 +21,7 @@ Base from [HTML5 Boilerplate](http://j.mp/rP0wmY)
 No styleguide reference.
 */
 
-html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+html { height: 100%; font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 body { min-height: 100%; height: 100%; margin: 0; font-size: 1em; line-height: 1.4; -webkit-tap-highlight-color: rgba(255,0,0, 0.62); }
 body, button, input, select, textarea { font-family: sans-serif; }
 ::-moz-selection { background: #073642; color: #fff; text-shadow: none; }
@@ -123,13 +123,13 @@ button, input { line-height: normal; }
  * 2. Allow styling of clickable form elements in iOS
  * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
  */
-button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; -moz-appearance: button; appearance: button; *overflow: visible; }
 /*
  * Consistent box sizing and appearance
  */
 input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
-input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+input[type="search"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
 /*
  * Remove inner padding and border in FF3/4: h5bp.com/l
  */

assets/themes/the-program/css/_helper.less

@@ -42,7 +42,7 @@ hr { -moz-box-sizing: content-box; }
 .hasGrid,
 .unit-inner,
 .tag_box,
-#page { *zoom: 1; }
+#page { transform: scale(1); }
 .left {
   *display: inline;
   float: left;

assets/themes/the-program/css/_less-base.less

@@ -186,7 +186,7 @@ No styleguide reference.
   li {
     display: inline-block;
     *display: inline;
-    zoom: 1;
+    transform: scale(1);
     line-height: normal;
     letter-spacing: normal;
     margin-right: 16px;

assets/themes/the-program/css/_mediaqueries.less

@@ -200,22 +200,22 @@
 
   .body {
     border-left: 1px solid rgba(0,0,0,0.2);
-    -webkit-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
-    -moz-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
-    -o-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
     float: left;
     width: calc(~"81% - 1px");
     margin-right: -450px;
     min-height: 100%;
+    height: 100%;
     .unit-body {
       border-right: 1px solid rgba(0,0,0,0.2);
       -webkit-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
       -moz-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
       -o-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+      box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
       margin-right: 450px;
       padding: (@line-height * 1px) ((@line-height * 2) * 1px);
       @padding-vertical: ((@line-height * 1px) * 2);
       min-height: calc(~"100% -" @padding-vertical);
+      height: calc(~"100% -" @padding-vertical);
     }
   }