mobile friendly header, footer, and code blocks (#317)

Author: jenweber

app/styles/components/_article.scss

@@ -93,7 +93,6 @@ article {
   @media (max-width: $medium-screen) {
     table {
       td,th {
-        display: block;
         border: 0;
       }
 

app/styles/components/_footer.scss

@@ -15,7 +15,7 @@
 }
 
 @media screen and (max-width: 53.75rem) {
-  .responsive .footer .container {
+  .responsive.footer .container {
     padding: 2rem 1rem;
 
     .footer-info {
@@ -60,8 +60,8 @@
   display: flex
 }
 
-@media screen and (max-width: 53.75rem) {
-  .responsive .footer .container {
+@media screen and (max-width: 40rem) {
+  .responsive.footer .container {
     text-align: center;
     display: block;
   }
@@ -83,15 +83,15 @@
 }
 
 @media screen and (max-width: 53.75rem) {
-  .responsive .footer .footer-info {
+  .responsive.footer .footer-info {
     text-align: center;
   }
 
-  .responsive .footer .footer-statement {
+  .responsive.footer .footer-statement {
     text-align: center;
   }
 
-  .responsive .footer .footer-tagline {
+  .responsive.footer .footer-tagline {
     padding-left: 2em;
     padding-right: 2em;
   }

app/styles/components/_header.scss

@@ -43,8 +43,8 @@ $white: white;
   display: -webkit-flex;
 }
 
-@media screen and (max-width: 53.75rem) {
-  .responsive .header .container {
+@media screen and (max-width: $medium-screen) {
+  .responsive.header .container {
     display: block;
   }
 }
@@ -56,7 +56,7 @@ $white: white;
   height: 2.8rem;
 }
 @media screen and (max-width: 53.75rem) {
-  .responsive .header .header-nav {
+  .responsive.header .header-nav {
     height: auto;
   }
 }
@@ -70,7 +70,7 @@ $white: white;
 }
 
 @media screen and (max-width: 53.75rem) {
-  .responsive .header a {
+  .responsive.header a {
     line-height: 24px; //do we need this
   }
 }

app/styles/components/_highlight.scss

@@ -42,6 +42,7 @@
     margin: 0;
     table-layout: auto;
     width: 100%;
+    z-index: auto;
 
     tr,
     th,

app/styles/components/_sidebar.scss

@@ -5,7 +5,11 @@
   z-index: 1;
   padding: $small-spacing 0;
 
-  @include media($medium-large-screen-up) {
+  @include media($medium-screen-up) {
+    margin-top: 5em;
+  }
+
+  @include media($large-screen-up) {
     // fixed sidebar, full height
     @include span-columns(3.5);
     margin-right: 0;

app/templates/application.hbs

@@ -1,4 +1,4 @@
-<header class="header">
+<header class="header responsive">
   <nav role="navigation" aria-label="main">
     <ul class="header-nav container">
       <li class="header-logo">
@@ -20,4 +20,4 @@
 <main class="container">
   {{outlet}}
 </main>
-{{main-footer}}
+{{main-footer}}

app/templates/components/main-footer.hbs

@@ -1,4 +1,4 @@
-<div class="footer">
+<div class="footer responsive">
   <div class="container">
     <div class="footer-info">
       Copyright {{currentYear}}
@@ -42,4 +42,4 @@
     </div>
 
   </div>
-</div>
+</div>