add foundation menu

_src/_assets/js/ipdb.js

@@ -1,4 +1,8 @@
+// =include _dnt.js
+// =include smooth-scroll/dist/js/smooth-scroll.js
 
-/* eslint-disable */
+document.addEventListener('DOMContentLoaded', () => {
-
+    const scroll = new SmoothScroll('a[data-scroll]', {
-//=include _dnt.js
+        easing: 'easeOutQuint'
+    })
+})

_src/_assets/scss/_menus.scss

@@ -73,6 +73,28 @@
     }
 }
 
+.menu-overflow {
+    // yummy scrolling
+    white-space: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-left: -$spacer;
+    margin-right: -$spacer;
+    padding-left: $spacer;
+    padding-right: $spacer;
+    text-align: center;
+
+    &::-webkit-scrollbar { display: none; }
+
+    @media ($screen-md) {
+        margin: 0;
+        padding: 0;
+        white-space: normal;
+        overflow: visible;
+        text-align: left;
+    }
+}
+
 .menu--main {
     background: $brand-05;
 
@@ -100,6 +122,12 @@
     .button {
         margin-left: $spacer;
     }
+
+    .menu-overflow {
+        @media ($screen-md) {
+            text-align: right;
+        }
+    }
 }
 
 
@@ -108,25 +136,25 @@
     padding-bottom: $spacer * 2;
 }
 
+.menu--sub {
+    padding: 0;
+}
 
-.menu-overflow {
+.menu--foundation {
-    // yummy scrolling
+    margin-top: $spacer * 2;
-    white-space: nowrap;
+    margin-bottom: 0;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    margin-left: -$spacer;
-    margin-right: -$spacer;
-    padding-left: $spacer;
-    padding-right: $spacer;
-    text-align: center;
 
-    &::-webkit-scrollbar { display: none; }
+    &:before {
+        display: none;
+    }
 
-    @media ($screen-md) {
+    .menu__link {
-        margin: 0;
+        &:first-child {
-        padding: 0;
+            margin-left: -$spacer;
-        white-space: normal;
+        }
-        overflow: visible;
+
-        text-align: right;
+        &:last-child {
+            margin-right: -$spacer;
+        }
     }
 }

_src/_assets/scss/page-foundation.scss

@@ -1,5 +1,12 @@
 @import 'variables';
 
+.section--intro {
+    .section__header,
+    .grid {
+        margin-bottom: 0;
+    }
+}
+
 .feature {
     padding-left: 5rem;
     position: relative;

_src/_includes/header.html

@@ -7,4 +7,8 @@
             <h2 class="header__subtitle">{{ page.subtitle }}</h2>
         {% endif %}
     </div>
+
+    {% if page.path contains 'foundation' %}
+        {% include menu-foundation.html %}
+    {% endif%}
 </header>

_src/_includes/menu-foundation.html

@@ -0,0 +1,28 @@
+<nav class="menu menu--sub menu--foundation section--background">
+    <div class="row">
+
+        <div class="menu-overflow">
+            <a class="menu__link" href="/foundation/#caretakers" data-scroll>{{ site.data.content-foundation.caretakers.title }}</a>
+            <a class="menu__link" href="/foundation/#board" data-scroll>{{ site.data.content-foundation.board.title }}</a>
+            <a class="menu__link" href="/foundation/#vision" data-scroll>{{ site.data.content-foundation.vision.title }}</a>
+
+            {% assign current_page = page %}
+
+            |
+
+            {% for page in site.pages %}
+                {% if page.path contains 'foundation' %}
+                    {% assign active = nil %}
+                    {% if page.url == current_page.url %}
+                        {% assign active = 'active' %}
+                    {% endif %}
+
+                    {% unless page.path contains 'foundation/index' %}
+                        <a class="menu__link {{ active }}" href="{{ page.url }}">{{ page.title }} →</a>
+                    {% endunless %}
+                {% endif %}
+            {% endfor%}
+        </div>
+
+    </div>
+</nav>

_src/_layouts/page.html

@@ -6,7 +6,9 @@ layout: base
 
 <main role="main" class="content content--page {% if page.path contains '.md' %}content--page--markdown{% endif %}">
 
-    {% if page.path contains '.md' %}<div class="row {% if page.narrow %}row--narrow{% endif%}">{% endif %}
+    {% if page.path contains '.md' %}
+        <div class="row {% if page.narrow %}row--narrow{% endif%}">
+    {% endif %}
 
         {{ content }}
 

_src/foundation/index.html

@@ -27,7 +27,7 @@ css: page-foundation
     </div>
 </section>
 
-<section class="section section--background section--caretakers">
+<section class="section section--background section--caretakers" id="caretakers">
     <div class="row">
         <header class="section__header">
             <div class="grid grid--full grid-medium--columns grid--center grid--gutters">
@@ -35,9 +35,6 @@ css: page-foundation
                     <h1 class="section__title">{{ content.caretakers.title }}</h1>
                     <p class="section__description">{{ content.caretakers.description }}</p>
                 </div>
-                <div class="grid__col grid__col--2">
-
-                </div>
             </div>
         </header>
     </div>
@@ -77,7 +74,7 @@ css: page-foundation
     </footer>
 </section>
 
-<section class="section section--board">
+<section class="section section--board" id="board">
     <div class="row">
         <header class="section__header">
             <div class="grid grid--full grid-medium--columns grid--center grid--gutters">
@@ -85,9 +82,6 @@ css: page-foundation
                     <h1 class="section__title">{{ content.board.title }}</h1>
                     <p class="section__description">{{ content.board.description }}</p>
                 </div>
-                <div class="grid__col grid__col--2">
-
-                </div>
             </div>
         </header>
     </div>
@@ -97,7 +91,7 @@ css: page-foundation
     </div>
 </section>
 
-<section class="section section--vision">
+<section class="section section--vision" id="vision">
     <div class="row">
         <header class="section__header">
             <div class="grid grid--full grid-medium--columns grid--center grid--gutters">

package.json

@@ -26,7 +26,9 @@
     "Android >= 4",
     "ie >= 10"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "smooth-scroll": "^12.1.4"
+  },
   "devDependencies": {
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",