fixing responsive footer

src/_includes/footer.html

@@ -2,22 +2,21 @@
   <div class="container text-center">
     <div>
       <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
-      &middot;
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
       Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
     </div>
     <div>
       Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
-      &middot;
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
       Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
-      &middot;
+      <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
       Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
     </div>
     <div>
       Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
     </div>
     <div class="project">
-      <a href="{{ site.fontawesome.github.url }}">GitHub Project</a>
-      &middot;
+      <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;
       <a href="{{ site.fontawesome.github.url }}/issues">Issues</a>
     </div>
   </div>

src/assets/less/site-3.0.0.less

@@ -20,5 +20,6 @@
 @import "site/carbonad";
 
 @import "site/responsive/screen-lg";
+@import "site/responsive/screen-md";
 @import "site/responsive/screen-sm";
 @import "site/responsive/screen-xs";

src/assets/less/site/bootstrap/jumbotron.less

@@ -3,6 +3,7 @@
   border-bottom: 1px solid @red-dark;
   margin-bottom: 0;
   &, h1 { color: #fff; }
+  padding: 30px 0;
   #gradient > .directional(@red, mix(@red, @red-dark, 90%), -40deg);
   //  background-color: @red;
 

src/assets/less/site/footer.less

@@ -24,19 +24,20 @@
 // Sticky Footer Styles
 // --------------------
 
-@footer-height: 165px;
-@footer-margin: 60px;
-
 html, body { height: 100%; }
 
 #wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
-  margin: 0 auto -(@footer-height);
-  padding: 0 0 (@footer-height + @footer-margin);
 }
 
-#footer {
-  height: @footer-height;
+.sticky-footer();
+
+.sticky-footer(@footer-height: 165px, @footer-margin: 60px;) {
+  #wrap {
+    margin: 0 auto -(@footer-height);
+    padding: 0 0 (@footer-height + @footer-margin);
+  }
+  #footer { height: @footer-height; }
 }

src/assets/less/site/responsive/screen-lg.less

@@ -49,4 +49,6 @@
     font-size: 26px;
     line-height: 36px;
   }
+
+  .hide-lg { display: none; }
 }

src/assets/less/site/responsive/screen-md.less

@@ -0,0 +1,3 @@
+@media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  .hide-md { display: none; }
+}

src/assets/less/site/responsive/screen-sm.less

@@ -43,5 +43,7 @@
     }
   }
 
+  .sticky-footer(185px, 60px);
+
   .hide-sm { display: none; }
 }

src/assets/less/site/responsive/screen-xs.less

@@ -64,5 +64,7 @@
   }
   .info-ad #carbonads-container .carbonad { margin-top: @buffer-lg; }
 
+  .sticky-footer(245px, 60px);
+
   .hide-xs { display: none; }
 }