Restyling new footer UI

less/angular/components/navigation.less

@@ -5,32 +5,52 @@
   font-size: 1.8rem;
 
   ul {
-    float: left;
+    text-align: center;
     list-style: none;
-    margin-right: 6rem;
     padding: 0;
   }
 
   li {
-    padding-bottom: 2rem;
+    display: inline-block;
+    padding: 0 1.8rem;
     @media screen and (min-width: @screen-sm-min) {
       padding-bottom: 0.5rem;
     }
   }
 
   a {
+    font-size: 1.4rem;
     &:link, &:visited {
       color: fade(@white, 80%);
     }
     &:hover, &:active, &:focus {
       color: @white;
+      text-decoration: none;
     }
   }
+
+  .secondary {
+    a {
+      font-size: 1.3rem;
+    }
+    .fa {
+      color: rgba(255,255,255,0.8);
+      margin-right: 0.5rem;
+      font-size: 1.3rem;
+    }
+  }
+
   .moz-logo {
-    float: right;
-    margin-top: 1.6rem;
-    @media screen and (min-width: 25em) {
-      margin-top: 0;
+    text-align: center;
+    margin: 0 0 -1rem 0;
+    @media screen and (min-width: @screen-sm-min) {
+      margin: 0 0 -1rem 1.8rem;
+    }
+    img {
+      opacity: 0.8;
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }

public/views/partials/footer.html

@@ -48,28 +48,28 @@
   <div class="container">
     <ul>
       <li><a href="/{{lang}}/about">{{ 'About' | i18n }}</a></li>
-      <li><a href="https://teach.webmaker.org">{{ 'Teach' | i18n }}</a></li>
-      <li><a href="https://blog.webmaker.org">{{ 'Blog' | i18n }}</a></li>
-      <li><a href="https://twitter.com/webmaker">Twitter</a></li>
-      <li>
-        <a href="https://sendto.mozilla.org/page/contribute/join-mozilla?source=join_link">
-          {{ 'Donate' | i18n }}
-        </a>
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <a href="https://support.mozilla.org/products/webmaker">
-          {{ 'Help' | i18n }}
+      <li><a href="/{{lang}}/mentor">{{ 'Teach' | i18n }}</a></li>
+      <li><a href="https://sendto.mozilla.org/page/contribute/join-mozilla?source=join_link">
+        {{ 'Donate' | i18n }}
         </a>
       </li>
       <li><a href="mailto:help@webmaker.org">{{ 'Contact' | i18n }}</a></li>
       <li><a href="/{{lang}}/privacy">{{ 'Privacy' | i18n }}</a></li>
       <li><a href="/{{lang}}/terms">{{ 'Legal' | i18n }}</a></li>
+      <li>
+        <a href="https://support.mozilla.org/products/webmaker">
+          {{ 'Help' | i18n }}
+        </a>
+      </li>
     </ul>
-    <a href="https://mozilla.org/" class="moz-logo">
-      <img src="/img/logo-mozilla-white.png" alt="mozilla logo" height="50" width="124"/>
-    </a>
-  </div>
+    <ul class="secondary">
+      <li><span class="fa fa-twitter"></span><a href="https://twitter.com/webmaker">@webmaker</a></li>
+      <li><span class="fa fa-file-text-o"></span><a href="https://blog.webmaker.org">{{ 'Blog' | i18n }}</a></li>
+    </ul>
+    <div class="moz-logo">
+      <a href="https://mozilla.org/">
+        <img src="/img/logo-mozilla-white.png" alt="mozilla logo" height="26" width="100"/>
+      </a>
+    </div>
   </div>
 </nav>