bring all the menus to the yard

_src/_assets/scss/_header.scss

@@ -1,12 +1,28 @@
+$edge-height: $spacer * 5;
+
 .header {
     background: $brand-05;
     padding-top: $spacer * 2;
-    padding-bottom: $spacer * 2;
+    padding-bottom: $spacer;
+    position: relative;
+    margin-bottom: $edge-height;
+
+    &:after {
+        content: '';
+        width: 100%;
+        height: $edge-height;
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: -($edge-height);
+        clip-path: polygon(100% 0, 0 0, 0 100%);
+        background: $brand-05;
+    }
 }
 
 .header__title {
     font-size: $font-size-h1;
-    margin-bottom: $spacer / 4;
+    margin-bottom: 0;
 }
 
 .header__subtitle {

_src/_assets/scss/_hero.scss

@@ -1,5 +1,5 @@
 .hero {
-    background: $brand-02;
+    background: $brand-03;
     padding: $spacer * 2;
     min-height: 100vh;
 
@@ -8,4 +8,24 @@
     .hero__action {
         color: #fff;
     }
+
+    .menu--main {
+        background: transparent;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    .menu__link {
+        color: #fff;
+
+        &:after {
+            background: #fff;
+        }
+    }
+
+    .logo {
+        fill: #fff;
+    }
 }

_src/_assets/scss/_logos.scss

@@ -0,0 +1,45 @@
+//
+// Logo
+//
+
+// default logo
+.logo {
+    fill: $brand-04;
+    width: 150px;
+    height: 35px;
+    display: block;
+}
+
+
+//
+// Color modifiers
+//
+.logo--white {
+    color: #fff;
+}
+
+.logo--dark {
+    fill: $brand-03;
+}
+
+
+//
+// Size modifiers
+//
+.logo--lg {
+    width: 300px;
+    height: 70px;
+}
+
+.logo--sm {
+    width: 75px;
+    height: 17px;
+}
+
+
+//
+// Caretakers
+//
+.logo-caretaker {
+
+}

_src/_assets/scss/_menus.scss

@@ -0,0 +1,75 @@
+.menu {
+    width: 100%;
+    padding-top: $spacer;
+}
+
+.menu__link {
+    display: inline-block;
+    padding: $spacer;
+    text-decoration: none;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+    color: $link-color;
+    position: relative;
+
+    // link line
+    &:after {
+        content: '';
+        position: absolute;
+        height: 2px;
+        width: 30px;
+        background: $link-color;
+        display: block;
+        left: 50%;
+        margin-left: -15px;
+        bottom: ($spacer / 2);
+        // hidden by default
+        transform: scale(0);
+        transform-origin: center;
+        transition: transform .2s ease-out;
+    }
+
+    &:hover,
+    &:focus,
+    &.active {
+        // show link line
+        &:after { transform: scale(1); }
+    }
+}
+
+.menu__link--logo {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &:after {
+        display: none;
+    }
+}
+
+.menu--main {
+    background: $brand-05;
+
+    .row {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .menu__link {
+        &:first-child {
+            margin-left: -($spacer);
+        }
+
+        &:last-child {
+            margin-right: -($spacer);
+        }
+    }
+}
+
+
+.menu--footer {
+    padding-top: $spacer * 2;
+    padding-bottom: $spacer * 2;
+}

_src/_assets/scss/_typography.scss

@@ -54,7 +54,7 @@ body {
 //
 
 /* stylelint-disable selector-list-comma-newline-after  */
-h1, h2, h3, h4, h5 {
+h1, h2, h3, h4, h5, h6 {
     color: $headings-color;
     font-family: $headings-font-family;
     font-weight: $headings-font-weight;
@@ -68,17 +68,17 @@ h1, h2, h3, h4, h5 {
 }
 
 h1, .h1,
-h2, .h2,
-h3, .h3 {
+h2, .h2 {
     margin-top: ($spacer * 2);
-    margin-bottom: ($spacer * 2);
+    margin-bottom: $spacer;
 }
 
+h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
     margin-top: $spacer;
-    margin-bottom: $spacer;
+    margin-bottom: $spacer / 2;
 }
 
 h1, .h1 { font-size: $font-size-h1; }

_src/_assets/scss/_variables.scss

@@ -7,6 +7,7 @@ $brand-03:                  #093749 !default;
 $brand-04:                  #557f8d !default;
 $brand-05:                  #eaf3f5 !default;
 $brand-06:                  #444 !default;
+$brand-07:                  #0e475d !default;
 
 //
 // Typography

_src/_assets/scss/ipdb.scss

@@ -6,3 +6,5 @@
 @import 'sections';
 @import 'hero';
 @import 'header';
+@import 'menus';
+@import 'logos';

_src/_data/menus.yml

@@ -0,0 +1,5 @@
+main:
+    - title: Foundation
+      url: /foundation/
+    - title: Style guide
+      url: /styleguide/

_src/_includes/footer.html

@@ -0,0 +1,10 @@
+<footer class="footer">
+    <div class="row">
+
+        <nav class="menu menu--footer">
+            {% for page in site.pages %}
+                <a class="menu__link" href="{{ page.url }}">{{ page.title }}</a>
+            {% endfor %}
+        </nav>
+    </div>
+</footer>

_src/_includes/header.html

@@ -0,0 +1,10 @@
+{% include menu-main.html %}
+
+<header class="header header--page">
+    <div class="row">
+        <h1 class="header__title">{{ page.title }}</h1>
+        {% if page.subtitle %}
+            <h2 class="header__subtitle">{{ page.subtitle }}</h2>
+        {% endif %}
+    </div>
+</header>

_src/_includes/menu-main.html

@@ -0,0 +1,24 @@
+<nav class="menu menu--main">
+    <div class="row">
+        <div class="menu__logo">
+            <a class="menu__link menu__link--logo" href="/">
+                <svg class="logo" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
+            </a>
+        </div>
+
+        <div class="menu__items">
+
+            {% for link in site.data.menus.main %}
+                {% assign active = nil %}
+                {% if page.url contains link.url %}
+                    {% assign active = 'active' %}
+                {% endif %}
+
+                <a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+            {% endfor %}
+
+            <a class="menu__link button button--small button--primary" href="/foundation/">Signup</a>
+            <a class="menu__link button button--small" href="/foundation/">Login</a>
+        </div>
+    </div>
+</nav>

_src/_includes/section-caretakers.html

@@ -1,9 +1,9 @@
 {% for caretaker in site.data.caretakers %}
 
-    <div class="caretaker">
-        <a class="caretaker__link" href="{{ caretaker.link }}" rel="external">
-            {{ caretaker.name }}
-        </a>
-    </div>
+<div class="caretaker">
+    <a class="caretaker__link" href="{{ caretaker.link }}" rel="external">
+        {{ caretaker.name }}
+    </a>
+</div>
 
 {% endfor %}

_src/_layouts/base.html

@@ -15,6 +15,8 @@
 
         {{ content }}
 
+        {% include footer.html %}
+
         {% include scripts.html %}
 
     </body>

_src/_layouts/page.html

@@ -2,18 +2,11 @@
 layout: base
 ---
 
-<header class="header header--page">
-    <div class="row">
-        <h1 class="header__title">{{ page.title }}</h1>
-        {% if page.subtitle %}
-            <h2 class="header__subtitle">{{ page.subtitle }}</h2>
-        {% endif %}
-    </div>
-</header>
+{% include header.html %}
 
 <main role="main" class="section content content--page {% if page.path contains '.md' %}content--page--markdown{% endif %}">
 
-    <div class="row">
+    <div class="row {% if page.narrow %}row--narrow{% endif%}">
         {{ content }}
     </div>
 

_src/foundation/bylaws.md

@@ -2,6 +2,8 @@
 layout: page
 
 title: Bylaws
+
+narrow: true
 ---
 
 # Definitions

_src/imprint.md

@@ -2,4 +2,6 @@
 layout: page
 
 title: Imprint
+
+narrow: true
 ---

_src/index.html

@@ -4,6 +4,9 @@ front_page: true
 ---
 
 <header class="hero section">
+
+    {% include menu-main.html %}
+
     <div class="hero__content row">
         <hgroup>
             <h1 class="hero__title">The blockchain database platform

_src/jobs.md

@@ -2,6 +2,8 @@
 layout: page
 
 title: Jobs
+
+narrow: true
 ---
 
 # Internet Policy Intern @ Interplanetary Database Foundation

_src/privacy.md

@@ -2,4 +2,6 @@
 layout: page
 
 title: Privacy policy
+
+narrow: true
 ---

_src/styleguide.md

@@ -7,6 +7,7 @@ subtitle: Look sharp and stay consistent
 description: Look sharp and stay consistent
 
 css: page-styleguide
+narrow: true
 ---
 
 # Typography
@@ -34,6 +35,24 @@ css: page-styleguide
 
 # Logo
 
+Logo can be used with a base class and modifier classes for size & color:
+
+- `logo`: default logo
+- `logo--sm`: small version
+- `logo--lg`: large version
+- `logo--dark`: dark version
+- `logo--white`: white version
+
+<svg class="logo logo--lg" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
+
+<svg class="logo" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
+
+<svg class="logo logo--sm" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
+
+<svg class="logo logo--dark" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
+
+<svg class="logo logo--white" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
+
 
 # Components
 

_src/terms.md

@@ -2,4 +2,6 @@
 layout: page
 
 title: IPDB Terms of Service
+
+narrow: true
 ---