Lays out updated footer

#101

rh/client/scss/layout/_site-footer.scss

@@ -7,55 +7,57 @@
   background: $site-footer-color;
   color: $color-white;
 
-  .logo {
-    display: none;
-  }
-
   a {
     color: $color-white;
   }
 }
 
-.site-footer-primary a {
-  @extend %nav-item;
+.site-footer .menu a {
+  padding-right: 0;
+  padding-left: 0;
+  font-weight: 400;
 }
 
 .site-footer-primary,
-.site-footer-content,
 .site-footer-aux {
-  @include container;
-}
-
-.site-footer-content {
-  // We don't need flexbox here
-  display: block;
+  a {
+    @include reverse-link-effects;
+  }
 }
 
-.site-footer .menu,
-.site-footer-aux {
+.site-footer-primary .menu {
   flex-direction: column;
-  width: 100%;
 }
 
-.site-footer .menu {
-  @include bottom-space;
+.site-footer-primary p {
+  font-size: 0.85rem;
 }
 
-.site-footer .menu a {
-  padding-right: 0;
+.site-footer-primary a {
+  @extend %nav-item;
   padding-left: 0;
-  font-weight: 400;
 }
 
-.site-footer-content,
-.site-footer-aux {
-  a {
-    @include reverse-link-effects;
-  }
+.site-footer-primary li {
+  display: block;
+  width: 100%;
+}
+
+.site-footer-primary,
+.site-footer-content {
+  @include bottom-space(2);
+  width: 100%;
+}
+
+.site-footer-content h6 {
+  font-weight: normal;
 }
 
 .site-footer-aux {
+  @include container;
   position: relative;
+  flex-direction: column;
+  width: 100%;
 
   &:before {
     @include bottom-space;
@@ -76,79 +78,45 @@
 
 .site-footer-aux .menu a {
   padding: 0.7rem;
-}
 
-.site-footer-aux .menu a:first-child {
-  padding-left: 0;
+  &:first-child {
+    padding-left: 0;
+  }
 }
 
-.site-footer-aux * {
+.site-footer-aux small,
+.site-footer-aux a {
   font-size: .8rem;
 }
 
-
 @include breakpoint(large) {
-  .site-footer-primary,
-  .site-footer-content {
-    @include bottom-space(2);
-  }
-
-  .site-footer .logo {
-    display: block;
-    width: 180px;
+  .site-footer .container {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
   }
 
-  .site-footer .menu {
-    margin-bottom: 0;
+  .site-footer-primary {
+    @include xy-cell(4);
+    @include collapse-gutters(margin);
   }
 
-  .site-footer .menu a {
-    padding: 0.7rem;
+  .site-footer-content {
+    @include xy-cell(4);
+    @include collapse-gutters(margin);
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    text-align: center;
   }
 
-  .site-footer .menu,
   .site-footer-aux {
     flex-direction: row;
-  }
-
-  .site-footer-primary {
-    .menu {
-      flex: 1 1 auto;
-      justify-content: flex-end;
-      align-items: center;
-      margin-left: map-get($grid-margin-gutters, medium);
-      width: auto;
-    }
-  }
-
-  .site-footer-aux {
     justify-content: space-between;
     align-items: center;
   }
 
   .site-footer-aux .menu li {
     display: inline-block;
   }
-
-  // Re-add the padding to everything after the first child
-  // or if we only have 1 of a type
-  .site-footer .menu a:first-child ~ a,
-  .site-footer .menu li:only-of-type a {
-    padding: $menu-simple-margin;
-  }
-
-  // Ensure alignment of the menus
-  .site-footer .menu li:last-child a {
-    padding-right: 0;
-  }
-}
-
-@include breakpoint(xlarge) {
-  .site-footer .logo {
-    width: 210px;
-  }
-
-  .site-footer .menu a {
-    padding: 0.7rem $global-padding;
-  }
 }

rh/templates/base.html

@@ -98,29 +98,29 @@
     </main>
 
     <footer class="site-footer">
-      <nav class="site-footer-primary">
-        <img
-          src="{% static 'img/logo-white.svg' %}"
-          alt="RapidPro Health"
-          class="logo"
-          />
-
-        <ul class="menu">
-          {% show_menu 1 1 0 1 "navigation/menu.html" %}
-        </ul>
-      </nav>
+      <div class="container">
+        <nav class="site-footer-primary">
+          <p>RapidPro Health provides rich data for entities all over the world.</p>
+
+          <ul class="menu">
+            {% show_menu 1 1 0 1 "navigation/menu.html" %}
+          </ul>
+        </nav>
+
+        <div class="site-footer-content">
+          <h6 class="logo-label">Technical Support / Lead</h6>
+        </div>
 
-      <div class="site-footer-content">
-        <p>RapidPro Health provides rich data for entities all over the world.</p>
-        <p><a href="mailto:[email protected]">[email protected]</a></p>
+        <div class="site-footer-content">
+          <h6 class="logo-label">Collaborators</h6>
+        </div>
       </div>
 
       <div class="site-footer-aux">
         <nav>
           <ul class="menu">
-            <li><a href="/terms">Terms</a></li>
-            <li><a href="/privacy">Privacy Policy</a></li>
-            <li><a href="/support">Support</a></li>
+            <li><a href="/support">Contact Us</a></li>
+            <li><a href="mailto:[email protected]">[email protected]</a></li>
           </ul>
         </nav>