Implemented new mobile footer design 2554

_data/navigation/getintouch.yml

@@ -0,0 +1,9 @@
+- name: Get in Touch
+  link: /#get-in-touch
+  bolded: true
+
+- name: Contact Us
+  link: /#contact-us
+
+- name: Events
+  link: /events 

_data/navigation/joinus.yml

@@ -0,0 +1,18 @@
+- name: Join Us
+  link: /join
+  bolded: true
+
+- name: Donate
+  link: /donate
+
+- name: Advise Us
+  link: /join#advise
+
+- name: Volunteer with Us
+  link: /join#volunteer
+
+- name: Partner with  Us
+  link: /join#partner
+
+- name: Submit your Pitch
+  link: mailto:[email protected]?subject=Submitting my pitch to Hack for LA 

_data/navigation/ourwork.yml

@@ -0,0 +1,18 @@
+- name: Our Work
+  link: /#
+  bolded: true
+
+- name: About Us
+  link: /about
+
+- name: Program Areas
+  link: /program-areas
+
+- name: Projects
+  link: /projects
+
+- name: Our Wins
+  link: /wins
+
+- name: Press
+  link: /about#news

_data/navigation/toolkit.yml

@@ -0,0 +1,9 @@
+- name: Toolkit
+  link: /toolkit
+  bolded: true
+
+- name: Guides
+  link: /toolkit#guides
+
+- name: External Resources
+  link: /toolkit#external-resources

_includes/footer.html

@@ -3,6 +3,69 @@
     <nav class="footer-nav">
       <div class="header-links">
         <a href="/donate/" target="_blank"><button class="btn btn-primary-on-dark btn-md-narrow btn--donate-footer">Donate</button></a>
+        <div class="footer-columns">
+         <div class="column">
+          {% for item in site.data.navigation.ourwork %}
+            <li>
+              {% if item.bolded == true %}
+              <a style="font-weight:bold" href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% else %}
+              <a href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% endif %}
+            </li>
+           {% endfor %}
+          </div>
+          <div class="column">
+            {% for item in site.data.navigation.joinus %}
+            <li>
+              {% if item.bolded == true %}
+              <a style="font-weight:bold" href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% else %}
+              <a href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% endif %}
+            </li>
+           {% endfor %}
+          </div>
+          <div class="column">
+            {% for item in site.data.navigation.getintouch %}
+            <li>
+              {% if item.bolded == true %}
+              <a style="font-weight:bold" href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% else %}
+              <a href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% endif %}
+            </li>
+           {% endfor %}
+          </div>
+          <div class="column">
+            {% for item in site.data.navigation.toolkit %}
+            <li>
+              {% if item.bolded == true %}
+              <a style="font-weight:bold" href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% else %}
+              <a href="{{ item.link }}">
+                {{item.name}}
+              </a>
+              {% endif %}
+            </li>
+           {% endfor %}
+        </div> 
+        </div> 
+
         <div class="footer-links">
           <div class="credits-page"><a href="/credits">Credits</a>&nbsp;|&nbsp;<a href="/sitemap">Site Map</a>&nbsp;|&nbsp;<a href="/join">Join Us</a></div>
           <ul class="inline-list header-list">

_sass/components/_footer.scss

@@ -1,11 +1,15 @@
 .main-footer {
-  position: absolute;
+  position: sticky;
   width: 100%;
   background: $color-darkblue;
   color: $color-white;
   padding: 42px 25px 20px;
   bottom: 0;
-
+  margin-top: -205px;
+  @media #{$bp-mobile-up} {
+    margin-top: -165px;
+  }
+
   a {
     color: $color-white;
     text-decoration: none;
@@ -19,6 +23,37 @@
       margin: 0 0 25px auto;
     }
   }
+  .footer-columns{
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+    justify-content: center;
+    margin-top: 20px;
+
+    .column{
+      margin-bottom: 10px;
+      flex: 0 0 50%;
+      padding: 10px;
+      @media #{$bp-mobile-up} {
+        flex: none;
+        padding-right: 150px;
+      }
+
+    }
+
+    li{
+      margin: 10px
+    }
+
+    @media #{$bp-mobile-up} {
+      align-items: flex-start;
+      display: flex;
+      justify-content: flex-start;
+      margin: 0;
+
+
+    }
+  }
 
   .footer-links {
     display: flex;
@@ -42,4 +77,5 @@
       margin: 0;
     }
   }
+
 }