Mobile updates

web/themes/dcb2017/sass/_global.scss

@@ -3,7 +3,13 @@ html {
   font-size: 16px;
 }
 
-body {
-  background: white;
+a,
+a:visited {
+  color: $dcb-grey;
+
+  &:hover,
+  &:focus {
+    color: black;
+  }
 }
 

web/themes/dcb2017/sass/base/_mixins.scss

@@ -1,3 +1,10 @@
+// Tablet size breakpoint 600px.
+@mixin media-tablet {
+  @media screen and (min-width: 37.5rem) {
+    @content;
+  }
+}
+
 @mixin button {
   background: $dcb-blue;
   border: 0;

web/themes/dcb2017/sass/base/_variables.scss

@@ -3,3 +3,5 @@
 $dcb-green: #44efb9;
 $dcb-blue: #b33ee9;
 $dcb-purple: #ec16a8;
+
+$dcb-grey: #666;

web/themes/dcb2017/sass/components/_blocks.scss

@@ -1,10 +1,17 @@
 .block-system-branding-block {
-  float: left;
-  margin: 0.5em 2em;
+  margin: 0.5rem auto;
+  width: 8rem;
+
+  @include media-tablet {
+    float: left;
+    margin: 0.5rem 2rem;
+    width: auto;
+  }
 }
 
 .site-logo img {
   display: block;
+  max-width: 100%;
   width: 11rem;
 }
 
@@ -13,6 +20,14 @@
   line-height: 1.2;
   margin: auto;
   max-width: 30rem;
-  padding: 10rem 1rem;
+  padding: 3rem 1rem;
   text-align: center;
+
+  @include media-tablet {
+    padding: 10rem 1rem;
+  }
+
+  img {
+    max-width: 100%;
+  }
 }

web/themes/dcb2017/sass/components/_forms.scss

@@ -11,3 +11,8 @@
 .form-submit {
   @include button;
 }
+
+.form-text,
+.form-email {
+  max-width: 95%;
+}

web/themes/dcb2017/sass/components/_menus.scss

@@ -1,12 +1,21 @@
 ul.menu {
   margin: 0;
   padding: 0;
+  text-align: center;
+
+  @include media-tablet {
+    text-align: left;
+  }
 
   li.menu-item {
     display: inline-block;
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 1rem;
     text-transform: uppercase;
 
+    @include media-tablet {
+      padding: 1rem 1.5rem;
+    }
+
     a {
       color: black;
       text-decoration: none;
@@ -21,7 +30,10 @@ ul.menu {
 }
 
 nav.menu--main {
-  float: right;
   font-weight: bold;
-  margin: 0.8rem;
+
+  @include media-tablet {
+    margin: 0.8rem;
+    float: right;
+  }
 }

web/themes/dcb2017/sass/layout/_content.scss

@@ -1,4 +1,5 @@
 .region-content {
   margin: 0 auto;
   max-width: 72rem;
+  padding: 1rem;
 }

web/themes/dcb2017/sass/layout/_featured.scss

@@ -3,6 +3,7 @@
 
   &:after {
     background-image: url('../images/dcb-bg.jpg');
+    background-position: center center;
     background-size: cover;
     content: '';
     position: absolute;

web/themes/dcb2017/sass/layout/_footer.scss

@@ -1,4 +1,11 @@
 .region-footer {
   margin: 0 auto;
   max-width: 72rem;
+  padding: 1rem;
+}
+
+.layout-container > footer {
+  background-image: url('../images/dcb-bg.jpg');
+  background-position: center center;
+  background-size: cover;
 }