add main nav links to footer (#1000)

Author: alexandersandberg

_data/new-data/footer/main-navigation.yml

@@ -0,0 +1,10 @@
+- title: Docs
+  link: /documentation/
+- title: Community
+  link: /community/
+- title: Packages
+  link: /packages/
+- title: Blog
+  link: /blog/
+- title: Install
+  link: /install/

_includes/new-includes/footer/footer.html

@@ -1,9 +1,7 @@
 <footer class="global-footer">
   <div class="container">
     <div class="footer-navigation-container">
-      <div class="notes">
-        <a class="logo" href="/" title="Swift.org"> {% include new-includes/header/logo.html %} </a>
-      </div>
+      {% include new-includes/footer/navigations/main.html %}
 
       {% include new-includes/footer/navigations/tools.html %}
 

_includes/new-includes/footer/navigations/main.html

@@ -0,0 +1,11 @@
+<nav aria-label="Main">
+    <a class="logo" href="/" title="Swift.org"> {% include new-includes/header/logo.html %} </a>
+
+    <ul>
+        {% for item in site.data.new-data.footer.main-navigation %}
+        <li class="item {% if page.url == item.url %}active{% endif %}">
+            <a href="{{ item.link }}" data-text="{{ item.title }}">{{ item.title }}</a>
+        </li>
+        {% endfor %}
+    </ul>
+</nav>

assets/stylesheets/new-stylesheets/includes/footer/_base.scss

@@ -30,27 +30,29 @@ footer.global-footer {
     flex-wrap: wrap;
     margin-bottom: 5em;
 
-    .notes {
-      .logo {
-          display: flex;
-          width: 116px;
+    .logo {
+        display: flex;
+        height: 36px;
+        margin-bottom: 15px;
 
-          svg {
-            flex: 1;
-          }
+        svg {
+          height: 100%;
+        }
 
-          #logotype {
-            fill: #ebecf0;
-          }
-      }
+        #logotype {
+          fill: #ebecf0;
+        }
     }
 
     h3 {
+      height: 36px;
       margin-bottom: 15px;
       color: #FCA76C;
       font-size: 1.17em;
       line-height: 1.2;
       font-weight: bold;
+      display: flex;
+      align-items: center;
     }
 
     nav {

assets/stylesheets/new-stylesheets/includes/footer/_mobile.scss

@@ -5,10 +5,16 @@
       align-items: center;
       margin-bottom: 3em;
 
-      .notes .logo {
+      .logo {
         margin-bottom: 3em;
       }
 
+      h3 {
+        height: auto;
+        display: block;
+        align-items: unset;
+      }
+
       nav {
         text-align: center;
         margin-bottom: 30px;