Bug 982628 - Update /literacy for print, update clearfix mixin

less/headerfooter.less

@@ -11,6 +11,12 @@
 // Special campaign styles
 @import 'components/hour-of-code';
 
+header {
+  @media print {
+    display: none;
+  }
+}
+
 .webmaker-nav-container {
   border-top: 1px solid @lightgrey;
   position: relative;
@@ -580,6 +586,9 @@
 }
 
 footer {
+  @media print {
+    display: none;
+  }
   margin-top: 20px;
   position: relative;
 }

less/mixins.less

@@ -65,16 +65,14 @@
   transition: transform @time;
 }
 
-.clearfix {
-  display: inline-block;
-
+.clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
   &:after {
-    content: '.';
-    display: block;
     clear: both;
-    visibility: hidden;
-    line-height: 0;
-    height: 0;
   }
 }
 

less/page-specific/literacy.less

@@ -19,6 +19,9 @@
     @media (min-width: @screen-lg-min) {
       width: @container-lg - 200px;
     }
+    @media print {
+      width: 100%;
+    }
   }
 
   h1 {
@@ -34,6 +37,10 @@
   h3.strand {
     font-weight: normal;
     font-size: 2em;
+    @media print {
+      font-size: 1.5em;
+      margin-top: 0;
+    }
   }
 
   h4.competency {
@@ -59,17 +66,21 @@
     ol {
       padding-left: 0;
     }
+    @media print {
+      margin-left: 0;
+    }
     @media (min-width: @screen-sm-min) {
       margin-left: -1em;
     }
-
     a {
       color: inherit;
     }
   }
 
   .well {
-    padding: 60px;
+    @media screen {
+      padding: 60px;
+    }
     background: #E3EAEE;
   }
 

less/ui.less

@@ -130,6 +130,7 @@
   position: relative;
   margin: @gutter * 2 * @unit auto 0 auto;
   padding: 0;
+  .clearfix;
   .border-box;
   width: 100%;
   @media (min-width: @width-medium) {