#17 - Updating the footer to match the wire frame.

openfaux · Jan 10, 2014 · 50907c0 · 50907c0
1 parent 587203e
commit 50907c0
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 27 deletions.
diff --git a/HTML/CSS/style.css b/HTML/CSS/style.css
@@ -2,7 +2,7 @@
 body {
   background-color: white;
   font-family: Helvetica, sans-serif;
-  padding: 0;
+  padding: 0 0 40px 0;
   margin: 0;
 }
 
@@ -24,45 +24,83 @@ a {
 /* line 1, ../../SASS/_navigation.scss */
 footer {
   color: black;
-  font-size: 14px;
+  padding: 2px 0;
+  margin: 0;
+  position: fixed;
+  bottom: 0;
+  background-color: white;
+  left: 0;
+  right: 0;
+  border-top: 1px solid black;
 }
-/* line 5, ../../SASS/_navigation.scss */
+/* line 12, ../../SASS/_navigation.scss */
 footer a:hover {
   color: gray;
 }
 
-/* line 10, ../../SASS/_navigation.scss */
+/* line 17, ../../SASS/_navigation.scss */
 nav {
   background-color: white;
 }
 
-/* line 14, ../../SASS/_navigation.scss */
+/* line 21, ../../SASS/_navigation.scss */
+.border-right {
+  border-right-style: solid;
+  border-right-color: black;
+  border-right-width: 1px;
+}
+
+/* line 27, ../../SASS/_navigation.scss */
 #Team:hover {
   color: black;
 }
 
-/* line 15, ../../SASS/_navigation.scss */
+/* line 28, ../../SASS/_navigation.scss */
 #Donate:hover {
   color: black;
 }
 
-/* line 16, ../../SASS/_navigation.scss */
+/* line 29, ../../SASS/_navigation.scss */
 #Membership:hover {
   color: black;
 }
 
-/* line 17, ../../SASS/_navigation.scss */
+/* line 30, ../../SASS/_navigation.scss */
 #GitHub:hover {
   color: black;
 }
 
-/* line 18, ../../SASS/_navigation.scss */
+/* line 31, ../../SASS/_navigation.scss */
 #Contributors:hover {
   color: black;
 }
 
-/* line 20, ../../SASS/_navigation.scss */
+/* line 33, ../../SASS/_navigation.scss */
 #copyright {
   font-size: 12px;
   padding-top: 5px;
 }
+
+/* line 38, ../../SASS/_navigation.scss */
+.footer-icons {
+  padding: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+/* line 45, ../../SASS/_navigation.scss */
+.footer-icons a {
+  float: right;
+  margin-left: 2px;
+}
+
+/* line 51, ../../SASS/_navigation.scss */
+.footer-links {
+  padding-top: 5px;
+}
+/* line 54, ../../SASS/_navigation.scss */
+.footer-links div {
+  padding: 0 !important;
+  text-align: center;
+}
diff --git a/HTML/INC/footer.html b/HTML/INC/footer.html
@@ -1,19 +1,45 @@
 <footer class="row">
-    <div class="row text-center">
-        <a href="https://github.com/openfaux">
-            <img src="/IMG/github.png"/>
-        </a>
-        <a href="https://facebook.com/openfaux">
-            <img src="/IMG/facebook.png"/>
-        </a>
-        <a href="https://twitter.com/openfaux">
-            <img src="/IMG/twitter.png"/>
-        </a>
-        <a href="https://youtube.com/openfaux">
-            <img src="/IMG/youtube.png"/>
-        </a>
+    <div class="large-3 columns">
+        <!--Filler space-->
+        &nbsp;
     </div>
-    <div id="copyright" class="row text-center">
-        &copy; 2013 - OpenFaux Foundation, Inc.
+    <div class="large-6 columns footer-links">
+        <!--We don't actually have any links to put here yet...-->
+        <!--<div class="large-3 columns border-right">-->
+            <!--<a>-->
+                <!--Link me!-->
+            <!--</a>-->
+        <!--</div>-->
+        <!--<div class="large-3 columns border-right">-->
+            <!--<a>-->
+                <!--Link me!-->
+            <!--</a>-->
+        <!--</div>-->
+        <!--<div class="large-3 columns border-right">-->
+            <!--<a>-->
+                <!--Link me!-->
+            <!--</a>-->
+        <!--</div>-->
+        <!--<div class="large-3 columns">-->
+            <!--<a>-->
+                <!--Link me!-->
+            <!--</a>-->
+        <!--</div>-->
+    </div>
+    <div class="large-3 columns">
+        <div class="footer-icons">
+            <a href="https://github.com/openfaux">
+                <img src="/IMG/github.png"/>
+            </a>
+            <a href="https://facebook.com/openfaux">
+                <img src="/IMG/facebook.png"/>
+            </a>
+            <a href="https://twitter.com/openfaux">
+                <img src="/IMG/twitter.png"/>
+            </a>
+            <a href="https://youtube.com/openfaux">
+                <img src="/IMG/youtube.png"/>
+            </a>
+        </div>
     </div>
 </footer>
diff --git a/SASS/_navigation.scss b/SASS/_navigation.scss
@@ -1,6 +1,13 @@
 footer {
   color: $black;
-  font-size:14px;
+  padding: 2px 0;
+  margin: 0;
+  position: fixed;
+  bottom: 0;
+  background-color: $backgroundColor;
+  left: 0;
+  right: 0;
+  border-top: 1px solid $black;
 
   a:hover {
     color: $gray;
@@ -11,6 +18,12 @@ nav {
   background-color: $backgroundColor;
 }
 
+.border-right {
+  border-right-style: solid;
+  border-right-color: $black;
+  border-right-width: 1px;
+}
+
 #Team:hover { color: $black; }
 #Donate:hover { color: $black; }
 #Membership:hover { color: $black; }
@@ -20,4 +33,26 @@ nav {
 #copyright {
   font-size: 12px;
   padding-top: 5px;
+}
+
+.footer-icons {
+  padding: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  a {
+    float: right;
+    margin-left: 2px;
+  }
+}
+
+.footer-links {
+  padding-top: 5px;
+
+  div {
+    padding: 0 !important;
+    text-align: center;
+  }
 }
diff --git a/SASS/_page.scss b/SASS/_page.scss
@@ -1,7 +1,7 @@
 body {
   background-color: $backgroundColor;
   font-family: Helvetica, sans-serif;
-  padding: 0;
+  padding: 0 0 40px 0;
   margin: 0;
 }