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

openfaux · Jan 11, 2014 · a335c2b · a335c2b
1 parent f6e989e
commit a335c2b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 98 deletions.
diff --git a/HTML/CSS/style.css b/HTML/CSS/style.css
@@ -33,80 +33,66 @@ footer {
   right: 0;
   border-top: 1px solid black;
 }
-/* line 12, ../../SASS/_navigation.scss */
-footer a:hover {
-  color: gray;
-}
 
-/* line 17, ../../SASS/_navigation.scss */
-nav {
-  background-color: white;
+/* line 13, ../../SASS/_navigation.scss */
+header {
+  padding: 10px 0 10px 25px;
+  border-bottom: 1px solid black;
 }
-
-/* line 21, ../../SASS/_navigation.scss */
-#Team:hover {
-  color: black;
+/* line 17, ../../SASS/_navigation.scss */
+header .nav-links {
+  margin-top: 20px;
 }
 
 /* line 22, ../../SASS/_navigation.scss */
-#Donate:hover {
-  color: black;
-}
-
-/* line 23, ../../SASS/_navigation.scss */
-#Membership:hover {
-  color: black;
-}
-
-/* line 24, ../../SASS/_navigation.scss */
-#GitHub:hover {
-  color: black;
-}
-
-/* line 25, ../../SASS/_navigation.scss */
-#Contributors:hover {
-  color: black;
-}
-
-/* line 27, ../../SASS/_navigation.scss */
 #copyright {
   font-size: 12px;
   text-align: center;
   margin-top: 10px;
+  color: gray;
 }
 
-/* line 33, ../../SASS/_navigation.scss */
+/* line 29, ../../SASS/_navigation.scss */
 .footer-icons {
   padding: 0px;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
 }
-/* line 40, ../../SASS/_navigation.scss */
+/* line 36, ../../SASS/_navigation.scss */
 .footer-icons a {
   float: right;
   margin-left: 2px;
 }
-/* line 44, ../../SASS/_navigation.scss */
+/* line 40, ../../SASS/_navigation.scss */
 .footer-icons a img {
   height: 33px;
   width: 33px;
 }
 
-/* line 51, ../../SASS/_navigation.scss */
-.footer-links {
+/* line 47, ../../SASS/_navigation.scss */
+.nav-links {
   padding-top: 7px;
 }
-/* line 54, ../../SASS/_navigation.scss */
-.footer-links div {
+/* line 50, ../../SASS/_navigation.scss */
+.nav-links div {
   padding: 0 !important;
   text-align: center;
   border-right-style: solid;
   border-right-color: black;
   border-right-width: 1px;
 }
-/* line 62, ../../SASS/_navigation.scss */
-.footer-links :last-child {
+/* line 58, ../../SASS/_navigation.scss */
+.nav-links :last-child {
   border: none;
 }
+/* line 62, ../../SASS/_navigation.scss */
+.nav-links a {
+  color: #0f6db5;
+  text-decoration: none;
+}
+/* line 67, ../../SASS/_navigation.scss */
+.nav-links a:hover {
+  color: #f36b32;
+}
diff --git a/HTML/INC/footer.html b/HTML/INC/footer.html
@@ -2,27 +2,10 @@
     <div id="copyright" class="large-3 columns">
         &copy; 2013 OpenFaux
     </div>
-    <div class="large-6 columns footer-links">
-        <!--We don't actually have any links to put here yet...-->
-        <!--<div class="large-3 columns">-->
-            <!--<a>-->
-                <!--Link me!-->
-            <!--</a>-->
-        <!--</div>-->
-        <!--<div class="large-3 columns">-->
-            <!--<a>-->
-                <!--Link me!-->
-            <!--</a>-->
-        <!--</div>-->
-        <!--<div class="large-3 columns">-->
-            <!--<a>-->
-                <!--Link me!-->
-            <!--</a>-->
-        <!--</div>-->
-        <!--<div class="large-3 columns">-->
-            <!--<a>-->
-                <!--Link me!-->
-            <!--</a>-->
+    <div class="large-6 columns nav-links">
+        <!--No links yet / GitHub already has a link to the right-->
+        <!--<div class="large-12 columns">-->
+            <!--<a href="https://github.com/openfaux">GitHub</a>-->
         <!--</div>-->
     </div>
     <div class="large-3 columns">

diff --git a/HTML/INC/header.html b/HTML/INC/header.html
@@ -1,28 +1,22 @@
-<header>
-    <div class="row">
+<header class="row">
+    <div id="logo" class="large-4 columns">
         <a href="/index.html">
             <img class="large-12 columns" src="/IMG/openfaux-horizontal-600px.png" alt="OpenFaux.org" />
         </a>
     </div>
-    <h3 class="row text-center">
-        Browser Plug-in for encrypting and masking internet traffic.
-    </h3>
-    <nav class="top-bar row">
-        <ul class="title-area">
-            <li class="name"></li>
-        </ul>
-        <section class="top-bar-section">
-            <ul class="left">
-                <li><a href="/team.html">Team</a></li>
-                <li class="divider"></li>
-                <li><a href="/donate.html">Donate</a></li>
-                <li class="divider"></li>
-                <li><a href="/membership.html">Membership</a></li>
-                <li class="divider"></li>
-                <li><a href="https://github.com/openfaux">GitHub</a></li>
-                <li class="divider"></li>
-                <li><a href="/contributors.html">Contributors</a></li>
-            </ul>
-        </section>
-    </nav>
+    <div class="large-2 columns"><!-- Filler -->&nbsp;</div>
+    <div class="large-6 columns nav-links">
+        <div class="large-3 columns">
+            <a href="/team.html">Team</a>
+        </div>
+        <div class="large-3 columns">
+            <a href="/donate.html">Donate</a>
+        </div>
+        <div class="large-3 columns">
+            <a href="/membership.html">Membership</a>
+        </div>
+        <div class="large-3 columns">
+            <a href="/contributors.html">Contributors</a>
+        </div>
+    </div>
 </header>
diff --git a/SASS/_constants.scss b/SASS/_constants.scss
@@ -1,9 +1,10 @@
 $green: #95C94C;
-$blue: #54A4DD;
+$blue: #0F6DB5;
 $red: #DD2F45;
 $yellow: #FFFF51;
 $purple: #7B0099;
 $black: #000000;
 $white: #ffffff;
 $gray: #808080;
+$orange: #F36B32;
 $backgroundColor: $white;
diff --git a/SASS/_navigation.scss b/SASS/_navigation.scss
@@ -8,26 +8,22 @@ footer {
   left: 0;
   right: 0;
   border-top: 1px solid $black;
-
-  a:hover {
-    color: $gray;
-  }
 }
 
-nav {
-  background-color: $backgroundColor;
-}
+header {
+  padding: 10px 0 10px 25px;
+  border-bottom: 1px solid $black;
 
-#Team:hover { color: $black; }
-#Donate:hover { color: $black; }
-#Membership:hover { color: $black; }
-#GitHub:hover { color: $black; }
-#Contributors:hover { color: $black; }
+  .nav-links {
+    margin-top: 20px;
+  }
+}
 
 #copyright {
   font-size: 12px;
   text-align: center;
   margin-top: 10px;
+  color: $gray;
 }
 
 .footer-icons {
@@ -48,7 +44,7 @@ nav {
   }
 }
 
-.footer-links {
+.nav-links {
   padding-top: 7px;
 
   div {
@@ -62,4 +58,13 @@ nav {
   :last-child {
     border: none;
   }
+
+  a {
+    color: $blue;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: $orange;
+  }
 }