Completed styling the footer

atljoseph · Sep 4, 2017 · 43c0457 · 43c0457
1 parent e7566d3
commit 43c0457
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/app/assets/styles/modules/_site-footer.css b/app/assets/styles/modules/_site-footer.css
@@ -0,0 +1,18 @@
+.site-footer {
+    color: #FFF;
+    background-color: $mainBlue;
+    padding: .5rem 0;
+    text-align: center;
+
+    &__text {
+        display: block;
+        margin-bottom: 1rem;
+        font-weight: 200;
+
+        @mixin screenMedium {
+            display: inline;
+            margin-bottom: 0;
+            margin-right: 1.4rem;
+        }
+    }
+}
diff --git a/app/assets/styles/styles.css b/app/assets/styles/styles.css
@@ -17,6 +17,7 @@
 @import "modules/_generic-content";
 @import "modules/_featured";
 @import "modules/_testimonial";
+@import "modules/_site-footer";
 
 /* icon sprites */
 @import "modules/_sprite";

diff --git a/app/index.html b/app/index.html
@@ -173,8 +173,15 @@ <h3 class="testimonial__subtitle">6 Time Escaper</h3>
 
   </div>
 
-  <footer>
-    <p>Copyright &copy; 2016 Clear View Escapes. All rights reserved. <a href="#" class="btn btn--orange">Get in Touch</a></p>
+  <footer class="site-footer">
+    <div class="wrapper">
+      <p>
+        <span class="site-footer__text">
+          Copyright &copy; 2016 Clear View Escapes. All rights reserved. 
+        </span>
+        <a href="#" class="btn btn--orange">Get in Touch</a>
+      </p>
+    </div>
   </footer>
 </body>
 

diff --git a/app/temp/styles/styles.css b/app/temp/styles/styles.css
@@ -847,6 +847,24 @@ a {
         font-size: 0.9375rem;
         margin: .25rem 0 1rem 0;
     }
+.site-footer {
+    color: #FFF;
+    background-color: #2f5572;
+    padding: .5rem 0;
+    text-align: center;
+}
+.site-footer__text {
+        display: block;
+        margin-bottom: 1rem;
+        font-weight: 200;
+    }
+@media (min-width: 800px) {
+.site-footer__text {
+            display: inline;
+            margin-bottom: 0;
+            margin-right: 1.4rem
+    }
+    }
 /* icon sprites */
 /* 
     - mustache templates for gulp-svg-sprite package