diff --git a/_src/_assets/img/logo.svg b/_src/_assets/img/logo.svg
new file mode 100644
index 0000000..db723bd
--- /dev/null
+++ b/_src/_assets/img/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/_src/_assets/scss/_header.scss b/_src/_assets/scss/_header.scss
index 067d5ae..94edb6e 100644
--- a/_src/_assets/scss/_header.scss
+++ b/_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 {
diff --git a/_src/_assets/scss/_hero.scss b/_src/_assets/scss/_hero.scss
index e43d37e..e795180 100644
--- a/_src/_assets/scss/_hero.scss
+++ b/_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;
+ }
}
diff --git a/_src/_assets/scss/_logos.scss b/_src/_assets/scss/_logos.scss
new file mode 100644
index 0000000..bedd219
--- /dev/null
+++ b/_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 {
+
+}
diff --git a/_src/_assets/scss/_menus.scss b/_src/_assets/scss/_menus.scss
new file mode 100644
index 0000000..608f496
--- /dev/null
+++ b/_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;
+}
diff --git a/_src/_assets/scss/_typography.scss b/_src/_assets/scss/_typography.scss
index afb5564..b8194db 100644
--- a/_src/_assets/scss/_typography.scss
+++ b/_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; }
diff --git a/_src/_assets/scss/_variables.scss b/_src/_assets/scss/_variables.scss
index 0f6a4fd..bad0dd7 100644
--- a/_src/_assets/scss/_variables.scss
+++ b/_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
diff --git a/_src/_assets/scss/ipdb.scss b/_src/_assets/scss/ipdb.scss
index cd678c2..3f45ea6 100644
--- a/_src/_assets/scss/ipdb.scss
+++ b/_src/_assets/scss/ipdb.scss
@@ -6,3 +6,5 @@
@import 'sections';
@import 'hero';
@import 'header';
+@import 'menus';
+@import 'logos';
diff --git a/_src/_data/menus.yml b/_src/_data/menus.yml
new file mode 100644
index 0000000..0d6e166
--- /dev/null
+++ b/_src/_data/menus.yml
@@ -0,0 +1,5 @@
+main:
+ - title: Foundation
+ url: /foundation/
+ - title: Style guide
+ url: /styleguide/
diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html
new file mode 100644
index 0000000..b10cd86
--- /dev/null
+++ b/_src/_includes/footer.html
@@ -0,0 +1,10 @@
+
diff --git a/_src/_includes/header.html b/_src/_includes/header.html
new file mode 100644
index 0000000..12eba49
--- /dev/null
+++ b/_src/_includes/header.html
@@ -0,0 +1,10 @@
+{% include menu-main.html %}
+
+
diff --git a/_src/_includes/menu-main.html b/_src/_includes/menu-main.html
new file mode 100644
index 0000000..237e9b9
--- /dev/null
+++ b/_src/_includes/menu-main.html
@@ -0,0 +1,24 @@
+
diff --git a/_src/_includes/section-caretakers.html b/_src/_includes/section-caretakers.html
index f8d5d89..c2bf6eb 100644
--- a/_src/_includes/section-caretakers.html
+++ b/_src/_includes/section-caretakers.html
@@ -1,9 +1,9 @@
{% for caretaker in site.data.caretakers %}
-
+
{% endfor %}
diff --git a/_src/_layouts/base.html b/_src/_layouts/base.html
index 0aab5d6..2802122 100644
--- a/_src/_layouts/base.html
+++ b/_src/_layouts/base.html
@@ -15,6 +15,8 @@
{{ content }}
+ {% include footer.html %}
+
{% include scripts.html %}
diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html
index 0f711f3..9d1b35a 100644
--- a/_src/_layouts/page.html
+++ b/_src/_layouts/page.html
@@ -2,18 +2,11 @@
layout: base
---
-