From 564702adcf52b05bd7d140eda6aadf03b0f860da Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Wed, 4 Mar 2015 21:39:57 -0800
Subject: [PATCH] more mobile styles

---
 public/_includes/_footer.jade             |  2 +-
 public/resources/css/layout/_layout.scss  |  2 +-
 public/resources/css/module/_banner.scss  | 22 +++++++++++++
 public/resources/css/module/_cta-bar.scss |  9 +++++-
 public/resources/css/module/_footer.scss  | 39 +++++++++++++++++++++++
 public/resources/css/module/_hero.scss    |  7 ++++
 6 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade
index fd45f10797..d41e3cde49 100644
--- a/public/_includes/_footer.jade
+++ b/public/_includes/_footer.jade
@@ -1,7 +1,7 @@
 .main-footer
   nav.background-silver.grid-fluid
 
-    .c3
+    .c3.main-footer-branding
       .logo-inverse-large
 
     .c2
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 380ccc8f73..50986d9fb5 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/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;
   }
 }
 
diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss
index e247c69ef4..d460dbb291 100644
--- a/public/resources/css/module/_banner.scss
+++ b/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 {
diff --git a/public/resources/css/module/_cta-bar.scss b/public/resources/css/module/_cta-bar.scss
index d029fdd8c4..ea6f77a0c4 100644
--- a/public/resources/css/module/_cta-bar.scss
+++ b/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;
+    }
   }
 }
\ No newline at end of file
diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss
index dc667b6a56..0476f9a37b 100644
--- a/public/resources/css/module/_footer.scss
+++ b/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;
diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss
index 4796c210a7..ea67d9cfda 100644
--- a/public/resources/css/module/_hero.scss
+++ b/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