Merge pull request #320 from jenweber/mobile-friendlier

Mobile friendlier header, footer, and code blocks

Author: sivakumar-kailasam

app/styles/app.scss

@@ -12,14 +12,10 @@ body {
   width: 100%;
 }
 
-.header {
-  z-index: 2;
-}
-@include media($medium-large-screen-up) {
+@include media($large-screen-up) {
   .header {
     top: 0;
     width: 100%;
-    position: fixed;
   }
 
   main.container {
@@ -29,7 +25,6 @@ body {
   main.container .content {
     position: relative;
     margin-right: 0;
-    margin-top: $top-spacing;
     margin-bottom: 0;
     overflow:auto;
     padding: $base-spacing;

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

@@ -14,8 +14,8 @@
   border-bottom: none;
 }
 
-@media screen and (max-width: 53.75rem) {
-  .responsive .footer .container {
+@media screen and (max-width: $medium-screen) {
+  .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: $large-screen) {
+  .responsive.footer .container {
     text-align: center;
     display: block;
   }
@@ -82,16 +82,16 @@
   text-align: left
 }
 
-@media screen and (max-width: 53.75rem) {
-  .responsive .footer .footer-info {
+@media screen and (max-width: $large-screen) {
+  .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;
   }
@@ -130,7 +130,7 @@
   max-height: 45px;
 }
 
-@media screen and (min-width: 53.75rem) {
+@media screen and (min-width: $large-screen) {
   .footer .footer-contributions {
     display: flex;
     flex:0 0 21em;
@@ -152,7 +152,7 @@
   }
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .footer .footer-social a:first-child {
     margin-left: 0;
   }

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: $large-screen) {
+  .responsive.header .container {
     display: block;
   }
 }
@@ -55,8 +55,8 @@ $white: white;
   justify-content: space-between;
   height: 2.8rem;
 }
-@media screen and (max-width: 53.75rem) {
-  .responsive .header .header-nav {
+@media screen and (max-width: $large-screen) {
+  .responsive.header .header-nav {
     height: auto;
   }
 }
@@ -69,8 +69,8 @@ $white: white;
   width: 100%;
 }
 
-@media screen and (max-width: 53.75rem) {
-  .responsive .header a {
+@media screen and (max-width: $large-screen) {
+  .responsive.header a {
     line-height: 24px; //do we need this
   }
 }
@@ -90,12 +90,12 @@ $white: white;
   text-align: center;
 }
 
-@media screen and (max-width: 53.75em) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-nav li {
     display: inherit;
   }
 }
-@media screen and (max-width: 53.75em) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-nav li:not(.header-logo):not(.header-search) {
     width: 32%;
     display: inline-block;
@@ -106,8 +106,6 @@ $white: white;
 .header-nav li:not(.header-logo):not(.header-search) {
   width: auto;
 }
-@media screen and (min-width: 53.75rem) {
-}
 
 .header-nav .header-logo {
   -webkit-box-flex: 1.5;
@@ -119,7 +117,7 @@ $white: white;
   flex: 1.5 0 0;
 }
 
-@media screen and (min-width: 53.75rem) {
+@media screen and (min-width: $large-screen) {
 }
 
 .header-nav .header-search {
@@ -132,7 +130,7 @@ $white: white;
   flex: 2 0 0;
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-nav .header-search {
     display: block;
   }
@@ -147,7 +145,7 @@ $white: white;
   display: block;
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-logo a {
     margin: 0 auto;
   }
@@ -193,7 +191,7 @@ $white: white;
     color: white;
   }
 }
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-search {
     margin-left: 0;
   }

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,15 +5,14 @@
   z-index: 1;
   padding: $small-spacing 0;
 
-  @include media($medium-large-screen-up) {
+  @include media($large-screen-up) {
     // fixed sidebar, full height
     @include span-columns(3.5);
     margin-right: 0;
     width: 19em;
     border-bottom: 0;
     border-right: $base-border;
     padding: $small-spacing $base-spacing $base-spacing * 1.5;
-    margin-top: 5em;
 
     &::before {
       @include position(absolute, 0 0 0 -100vw);

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>