more mobile styles

public/_includes/_footer.jade

@@ -1,7 +1,7 @@
 .main-footer
   nav.background-silver.grid-fluid
 
-    .c3
+    .c3.main-footer-branding
       .logo-inverse-large
 
     .c2

public/resources/css/layout/_layout.scss

@@ -59,7 +59,7 @@
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
-    padding: ($unit * 3);
+    padding: ($unit * 3) $unit;
   }
 }
 

public/resources/css/module/_banner.scss

@@ -9,15 +9,37 @@
   padding: $unit * 4;
   min-height: $unit * 12;
 
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    padding: $unit * 2;
+  }
+
   &.is-centered {
     text-align: center;
   }
 
+  .button {
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      display: block;
+    }
+  }
+
   .banner-ng-annoucement {
     background: url('/resources/images/logos/ng-conf/ng-conf-shield.png') 0px 0px no-repeat;
     padding-left: 68px;
     margin-right: $unit * 3;
     display: inline-block;
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      background: none;
+      padding-left: 0px;
+      margin: 0px 0px $unit 0px;
+    }
   }
 
   h3 {

public/resources/css/module/_cta-bar.scss

@@ -8,6 +8,13 @@
   text-align: center;
 
   .button {
-    margin: 0px ($unit * 1);
+    margin: 0px $unit;
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      margin: ($unit * 2) 0px;
+      display: block;
+    }
   }
 }

public/resources/css/module/_footer.scss

@@ -10,12 +10,32 @@
 .main-footer {
   nav {
     padding: $unit * 6;
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      padding: ($unit * 3) 0px;
+    }
   }
 
   .logo-inverse-large {
     background: url('/resources/images/logos/inverse/shield/shield-large.png') 0px 0px no-repeat;
     height: 200px;
     width: 200px;
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      display: none;
+    }
+  }
+
+  h3 {
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      margin-bottom: $unit;
+    }
   }
 
   ul {
@@ -23,6 +43,12 @@
     margin: 0px;
     list-style-type: none;
 
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      margin-bottom: $unit * 5;
+    }
+
     li {
       margin: 0px;
     }
@@ -31,6 +57,19 @@
       color: $snow;
       text-decoration: none;
 
+      @media handheld and (max-width: $phone-breakpoint),
+      screen and (max-device-width: $phone-breakpoint),
+      screen and (max-width: $tablet-breakpoint) {
+        display: block;
+        text-decoration: none;
+        padding: 0px ($unit * 2);
+        background: $steel;
+        margin-bottom: $unit;
+        border-radius: 3px;
+        line-height: $unit * 5;
+        font-size: 14px;
+      }
+
       &:hover {
         text-decoration: underline;
         opacity: 1;

public/resources/css/module/_hero.scss

@@ -68,6 +68,13 @@ $hero-padding: $unit * 2;
   // CTA BUTTONS
   .button {
     margin: 0px $unit;
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      margin: ($unit * 2) 0px;
+      display: block;
+    }
   }
 
   // SOCIAL ICONS