From 86182a1ccafe8205bff42e9bc8607786c569448e Mon Sep 17 00:00:00 2001
From: Olivier Fredon <the2ne@gmail.com>
Date: Thu, 20 Oct 2016 13:13:28 +0200
Subject: style for mobile first nav

---
 layouts/partials/navigation.html    |  8 ++--
 static/css/style.css                | 85 +++++++++++++++++++++++++------------
 static/sass/custom/breakpoints.scss | 57 +++++++++++++++++++++++++
 static/sass/custom/layout.scss      | 39 ++++++-----------
 4 files changed, 131 insertions(+), 58 deletions(-)

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 43ed174..70a0266 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -2,21 +2,21 @@
     <ul class="menu__items">
         {{ if .Site.Menus.main }}
         {{ range .Site.Menus.main }}
-        <li class="item"><a href="{{.URL}}">{{ .Name }}</a></li>
+        <li><a href="{{.URL}}">{{ .Name }}</a></li>
         {{ end }}
         {{ end }}
         {{ if .Site.Params.twitter }}
-        <li class="item twitter">
+        <li class="twitter">
             <a href="https://twitter.com/{{ .Site.Params.twitter }}" title="Follow me">Twitter</a>
         </li>
         {{ end }}
         {{ if .Site.Params.github }}
-        <li class="item github">
+        <li class="github">
             <a href="https://github.com/{{ .Site.Params.github }}" title="Fork me">GitHub</a>
         </li>
         {{ end }}
         {{ if .Site.Params.linkedin }}
-        <li class="item linkedin">
+        <li class="linkedin">
             <a href="https://fr.linkedin.com/in/{{ .Site.Params.linkedin }}" title="About me">LinkedIn</a>
         </li>
         {{ end }}
diff --git a/static/css/style.css b/static/css/style.css
index 924f140..bb965aa 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -480,50 +480,31 @@ html {
     background-color: #FFFFFF;
 }
 
-.header-wrapper {
+.header-wrapper .headline {
     background-color: #E5E1D1;
-    display: table;
     padding: .5em 1.5em;
-    width: 100%;
 }
 
 .header-wrapper a {
     text-decoration: none;
 }
 
-.header-wrapper .headline,
-.header-wrapper .menu {
-    display: table-cell;
-    vertical-align: middle;
-}
-
-.header-wrapper .headline {
-    text-align: left;
-}
-
-.header-wrapper .menu {
-    text-align: right;
-}
-
 .menu__items {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
-.menu__items .item {
-    display: inline-block;
-}
-
-.menu__items .item + .item {
-    margin-left: .5em;
+.menu__items a {
+    background-color: #C44741;
+    color: #E5E1D1;
+    display: block;
+    padding: .5em 1.5em;
+    text-decoration: none;
 }
 
-.menu__items .item + .item::before {
-    color: #FFFFFF;
-    content: "|";
-    display: inline-block;
-    margin-right: 0.5em;
+.menu__items a:hover {
+    background-color: #77201C;
 }
 
 .content {
@@ -706,6 +687,54 @@ h2, h4, h6 {
     h6 {
         font-size: 1em;
     }
+    .header-wrapper {
+        background-color: #E5E1D1;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+    }
+    .header-wrapper .headline {
+        padding: 0;
+    }
+    .header-wrapper .headline,
+    .header-wrapper .menu {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .header-wrapper .headline {
+        text-align: left;
+    }
+    .header-wrapper .menu {
+        text-align: right;
+    }
+    .menu__items {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .menu__items li {
+        display: inline-block;
+    }
+    .menu__items li + li {
+        margin-left: .5em;
+    }
+    .menu__items li + li::before {
+        color: #FFFFFF;
+        content: "|";
+        display: inline-block;
+        margin-right: 0.5em;
+    }
+    .menu__items a {
+        background-color: transparent;
+        color: #C44741;
+        display: inline;
+        padding: 0;
+        text-decoration: none;
+    }
+    .menu__items a:hover {
+        background-color: transparent;
+        color: #77201C;
+    }
 }
 
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss
index a3b109c..fd25ab0 100644
--- a/static/sass/custom/breakpoints.scss
+++ b/static/sass/custom/breakpoints.scss
@@ -21,4 +21,61 @@
     h4 { font-size: $fontSize * 2; }
     h5 { font-size: $fontSize * 1.5; }
     h6 { font-size: $fontSize * 1; }
+
+    // header
+    .header-wrapper {
+        background-color: $neutral;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+        .headline {
+            padding: 0;
+        }
+
+        .headline,
+        .menu {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .headline {
+            text-align: left;
+        }
+
+        .menu {
+            text-align: right;
+        }
+    }
+
+    // Menu
+    .menu__items {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            display: inline-block;
+        }
+
+        li + li {
+            margin-left: .5em;
+        }
+
+        li + li::before {
+            @include  _separator-before($white, "|");
+        }
+
+        a {
+            background-color: transparent;
+            color: $contrast;
+            display: inline;
+            padding: 0;
+            text-decoration: none;
+        }
+
+        a:hover {
+            background-color: transparent;
+            color: $shadow;
+        }
+    }
 }
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 6a99b84..113b61c 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -9,27 +9,12 @@ html {
 
 // header
 .header-wrapper {
-    background-color: $neutral;
-    display: table;
-    padding: .5em 1.5em;
-    width: 100%;
-
-    a {
-        text-decoration: none;
-    }
-
-    .headline,
-    .menu {
-        display: table-cell;
-        vertical-align: middle;
-    }
-
     .headline {
-        text-align: left;
+        background-color: $neutral;
+        padding: .5em 1.5em;
     }
-
-    .menu {
-        text-align: right;
+    a {
+        text-decoration: none;
     }
 }
 
@@ -39,19 +24,21 @@ html {
     margin: 0;
     padding: 0;
 
-    .item {
-        display: inline-block;
+    a {
+        background-color: $contrast;
+        color: $neutral;
+        display: block;
+        padding: .5em 1.5em;
+        text-decoration: none;
     }
 
-    .item + .item {
-        margin-left: .5em;
-    }
+    a:hover {
+        background-color: $shadow;
 
-    .item + .item::before {
-        @include  _separator-before($white, "|");
     }
 }
 
+
 // Content
 .content {
     margin: 0 auto;
-- 
cgit v1.2.3


From 5de7c1c681db35daafe1e3a71cf579464de40506 Mon Sep 17 00:00:00 2001
From: Olivier Fredon <the2ne@gmail.com>
Date: Thu, 20 Oct 2016 17:06:41 +0200
Subject: Mobile navigation using checkbox hack

---
 layouts/partials/navigation.html    |  2 ++
 static/css/style.css                | 69 +++++++++++++++++++++++++++++++++----
 static/sass/custom/breakpoints.scss | 52 ++++++++++++++++------------
 static/sass/custom/global.scss      | 51 +++++++++++++++++++++++++++
 static/sass/custom/typography.scss  |  2 +-
 5 files changed, 146 insertions(+), 30 deletions(-)

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 70a0266..a94fc91 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -1,4 +1,6 @@
 <nav class="menu" role="navigation" id="main-menu">
+    <input type="checkbox" id="menu">
+    <label for="menu" onclick>Menu</label>
     <ul class="menu__items">
         {{ if .Site.Menus.main }}
         {{ range .Site.Menus.main }}
diff --git a/static/css/style.css b/static/css/style.css
index bb965aa..3d89e5e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -476,6 +476,57 @@ code {
     overflow: hidden;
 }
 
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from {
+        padding: 0;
+    }
+    to {
+        padding: 0;
+    }
+}
+
+.menu input[type=checkbox] {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.menu label {
+    cursor: pointer;
+    user-select: none;
+    color: #C44741;
+    line-height: 1;
+    text-transform: uppercase;
+    position: absolute;
+    top: 1.5em;
+    right: 1.5em;
+}
+
+.menu label:hover {
+    color: #77201C;
+}
+
+.menu label:before {
+    color: #FFFFFF;
+    content: "\2261";
+    display: inline-block;
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-right: .25em;
+}
+
+.menu .menu__items {
+    display: none;
+}
+
+.menu input:checked ~ .menu__items {
+    display: block;
+}
+
 html {
     background-color: #FFFFFF;
 }
@@ -627,7 +678,7 @@ html {
 
 .headline__title {
     color: #C44741;
-    display: block;
+    display: inline-block;
     font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
     font-size: 1.5em;
     font-weight: bold;
@@ -707,31 +758,35 @@ h2, h4, h6 {
     .header-wrapper .menu {
         text-align: right;
     }
-    .menu__items {
+    .menu label {
+        display: none;
+    }
+    .menu .menu__items {
+        display: block;
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
-    .menu__items li {
+    .menu .menu__items li {
         display: inline-block;
     }
-    .menu__items li + li {
+    .menu .menu__items li + li {
         margin-left: .5em;
     }
-    .menu__items li + li::before {
+    .menu .menu__items li + li::before {
         color: #FFFFFF;
         content: "|";
         display: inline-block;
         margin-right: 0.5em;
     }
-    .menu__items a {
+    .menu .menu__items a {
         background-color: transparent;
         color: #C44741;
         display: inline;
         padding: 0;
         text-decoration: none;
     }
-    .menu__items a:hover {
+    .menu .menu__items a:hover {
         background-color: transparent;
         color: #77201C;
     }
diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss
index fd25ab0..05f05a4 100644
--- a/static/sass/custom/breakpoints.scss
+++ b/static/sass/custom/breakpoints.scss
@@ -48,34 +48,42 @@
     }
 
     // Menu
-    .menu__items {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
+    .menu {
 
-        li {
-            display: inline-block;
+        label {
+            display: none;
         }
 
-        li + li {
-            margin-left: .5em;
-        }
+        .menu__items {
+            display: block;
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
 
-        li + li::before {
-            @include  _separator-before($white, "|");
-        }
+            li {
+                display: inline-block;
+            }
 
-        a {
-            background-color: transparent;
-            color: $contrast;
-            display: inline;
-            padding: 0;
-            text-decoration: none;
-        }
+            li + li {
+                margin-left: .5em;
+            }
+
+            li + li::before {
+                @include  _separator-before($white, "|");
+            }
+
+            a {
+                background-color: transparent;
+                color: $contrast;
+                display: inline;
+                padding: 0;
+                text-decoration: none;
+            }
 
-        a:hover {
-            background-color: transparent;
-            color: $shadow;
+            a:hover {
+                background-color: transparent;
+                color: $shadow;
+            }
         }
     }
 }
diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss
index c7deaac..5abb292 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -54,3 +54,54 @@ code {
     position: absolute;
     overflow: hidden;
 }
+
+// Nav
+// Fix for Android
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from { padding: 0; }
+    to { padding: 0; }
+}
+
+.menu {
+    input[type=checkbox] {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    label {
+        cursor: pointer;
+        user-select: none;
+
+        color: $contrast;
+        line-height: 1;
+        text-transform: uppercase;
+        position: absolute;
+        top: 1.5em; right: 1.5em;
+    }
+
+    label:hover {
+        color: $shadow;
+    }
+
+    label:before {
+        color: $white;
+        content: "\2261";
+        display: inline-block;
+        font-size: $fontSize * 1.5;
+        font-weight: bold;
+        margin-right: .25em;
+    }
+
+    .menu__items {
+        display: none;
+    }
+
+    input:checked ~ .menu__items {
+        display: block;
+    }
+}
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index dda018a..fe3d908 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -15,7 +15,7 @@ html {
 
 .headline__title {
     color: $contrast;
-    display: block;
+    display: inline-block;
     font-family: $fontFamily;
     font-size: $fontSize * 1.5;
     font-weight: bold;
-- 
cgit v1.2.3


From b91bb4e67e3242cfb196ce7923a4622db5f4d931 Mon Sep 17 00:00:00 2001
From: Olivier Fredon <the2ne@gmail.com>
Date: Thu, 20 Oct 2016 17:21:37 +0200
Subject: sass refactoring

---
 static/css/style.css                | 238 ++++++++++++++++++------------------
 static/sass/core.scss               |   5 +-
 static/sass/custom/breakpoints.scss |  76 ------------
 static/sass/custom/global.scss      |  83 +++----------
 static/sass/custom/layout.scss      |  31 ++++-
 static/sass/custom/navigation.scss  |  85 +++++++++++++
 static/sass/custom/typography.scss  |  20 +++
 7 files changed, 280 insertions(+), 258 deletions(-)
 create mode 100644 static/sass/custom/navigation.scss

diff --git a/static/css/style.css b/static/css/style.css
index 3d89e5e..e91623f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -425,6 +425,32 @@ img {
     -ms-interpolation-mode: bicubic;
 }
 
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from {
+        padding: 0;
+    }
+    to {
+        padding: 0;
+    }
+}
+
+.visua11y-hidden {
+    border: 0;
+    clip: rect(1px 1px 1px 1px);
+    /* for Internet Explorer */
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+}
+
 a {
     color: #C44741;
 }
@@ -463,70 +489,6 @@ code {
     padding: .5em 1.5em;
 }
 
-.visua11y-hidden {
-    border: 0;
-    clip: rect(1px 1px 1px 1px);
-    /* for Internet Explorer */
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    padding: 0;
-    position: absolute;
-    overflow: hidden;
-}
-
-body {
-    -webkit-animation: bugfix infinite 1s;
-}
-
-@-webkit-keyframes bugfix {
-    from {
-        padding: 0;
-    }
-    to {
-        padding: 0;
-    }
-}
-
-.menu input[type=checkbox] {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-}
-
-.menu label {
-    cursor: pointer;
-    user-select: none;
-    color: #C44741;
-    line-height: 1;
-    text-transform: uppercase;
-    position: absolute;
-    top: 1.5em;
-    right: 1.5em;
-}
-
-.menu label:hover {
-    color: #77201C;
-}
-
-.menu label:before {
-    color: #FFFFFF;
-    content: "\2261";
-    display: inline-block;
-    font-size: 1.5em;
-    font-weight: bold;
-    margin-right: .25em;
-}
-
-.menu .menu__items {
-    display: none;
-}
-
-.menu input:checked ~ .menu__items {
-    display: block;
-}
-
 html {
     background-color: #FFFFFF;
 }
@@ -665,6 +627,102 @@ html {
     margin-right: 0.5em;
 }
 
+@media screen and (min-width: 60em) {
+    .header-wrapper {
+        background-color: #E5E1D1;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+    }
+    .header-wrapper .headline {
+        padding: 0;
+    }
+    .header-wrapper .headline,
+    .header-wrapper .menu {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .header-wrapper .headline {
+        text-align: left;
+    }
+    .header-wrapper .menu {
+        text-align: right;
+    }
+}
+
+.menu input[type=checkbox] {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.menu label {
+    cursor: pointer;
+    user-select: none;
+    color: #C44741;
+    line-height: 1;
+    text-transform: uppercase;
+    position: absolute;
+    top: 1.5em;
+    right: 1.5em;
+}
+
+.menu label:hover {
+    color: #77201C;
+}
+
+.menu label:before {
+    color: #FFFFFF;
+    content: "\2261";
+    display: inline-block;
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-right: .25em;
+}
+
+.menu .menu__items {
+    display: none;
+}
+
+.menu input:checked ~ .menu__items {
+    display: block;
+}
+
+@media screen and (min-width: 60em) {
+    .menu label {
+        display: none;
+    }
+    .menu .menu__items {
+        display: block;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .menu .menu__items li {
+        display: inline-block;
+    }
+    .menu .menu__items li + li {
+        margin-left: .5em;
+    }
+    .menu .menu__items li + li::before {
+        color: #FFFFFF;
+        content: "|";
+        display: inline-block;
+        margin-right: 0.5em;
+    }
+    .menu .menu__items a {
+        background-color: transparent;
+        color: #C44741;
+        display: inline;
+        padding: 0;
+        text-decoration: none;
+    }
+    .menu .menu__items a:hover {
+        background-color: transparent;
+        color: #77201C;
+    }
+}
+
 html {
     color: #2C343B;
     font-size: 1em;
@@ -738,58 +796,6 @@ h2, h4, h6 {
     h6 {
         font-size: 1em;
     }
-    .header-wrapper {
-        background-color: #E5E1D1;
-        display: table;
-        padding: .5em 1.5em;
-        width: 100%;
-    }
-    .header-wrapper .headline {
-        padding: 0;
-    }
-    .header-wrapper .headline,
-    .header-wrapper .menu {
-        display: table-cell;
-        vertical-align: middle;
-    }
-    .header-wrapper .headline {
-        text-align: left;
-    }
-    .header-wrapper .menu {
-        text-align: right;
-    }
-    .menu label {
-        display: none;
-    }
-    .menu .menu__items {
-        display: block;
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-    .menu .menu__items li {
-        display: inline-block;
-    }
-    .menu .menu__items li + li {
-        margin-left: .5em;
-    }
-    .menu .menu__items li + li::before {
-        color: #FFFFFF;
-        content: "|";
-        display: inline-block;
-        margin-right: 0.5em;
-    }
-    .menu .menu__items a {
-        background-color: transparent;
-        color: #C44741;
-        display: inline;
-        padding: 0;
-        text-decoration: none;
-    }
-    .menu .menu__items a:hover {
-        background-color: transparent;
-        color: #77201C;
-    }
 }
 
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/static/sass/core.scss b/static/sass/core.scss
index 6030ee9..2c88091 100644
--- a/static/sass/core.scss
+++ b/static/sass/core.scss
@@ -6,6 +6,7 @@
         "vendor/normalize",
         "custom/global",
         "custom/layout",
-        "custom/typography",
-        "custom/breakpoints"
+        "custom/navigation",
+        "custom/typography"
+        // "custom/breakpoints"
 ;
\ No newline at end of file
diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss
index 05f05a4..0a6bfa3 100644
--- a/static/sass/custom/breakpoints.scss
+++ b/static/sass/custom/breakpoints.scss
@@ -4,86 +4,10 @@
 
 // Medium breakpoint
 @media screen and (min-width: 40em) {
-    h1 { font-size: $fontSize * 3; }
-    h2 { font-size: $fontSize * 2.5; }
-    h3 { font-size: $fontSize * 2; }
-    h4 { font-size: $fontSize * 1.75; }
-    h5 { font-size: $fontSize * 1.25; }
-    h6 { font-size: $fontSize * 1; }
 
 }
 
 // Desktop breakpoint
 @media screen and (min-width: 60em) {
-    h1 { font-size: $fontSize * 4.5; }
-    h2 { font-size: $fontSize * 3; }
-    h3 { font-size: $fontSize * 2.5; }
-    h4 { font-size: $fontSize * 2; }
-    h5 { font-size: $fontSize * 1.5; }
-    h6 { font-size: $fontSize * 1; }
 
-    // header
-    .header-wrapper {
-        background-color: $neutral;
-        display: table;
-        padding: .5em 1.5em;
-        width: 100%;
-        .headline {
-            padding: 0;
-        }
-
-        .headline,
-        .menu {
-            display: table-cell;
-            vertical-align: middle;
-        }
-
-        .headline {
-            text-align: left;
-        }
-
-        .menu {
-            text-align: right;
-        }
-    }
-
-    // Menu
-    .menu {
-
-        label {
-            display: none;
-        }
-
-        .menu__items {
-            display: block;
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-
-            li {
-                display: inline-block;
-            }
-
-            li + li {
-                margin-left: .5em;
-            }
-
-            li + li::before {
-                @include  _separator-before($white, "|");
-            }
-
-            a {
-                background-color: transparent;
-                color: $contrast;
-                display: inline;
-                padding: 0;
-                text-decoration: none;
-            }
-
-            a:hover {
-                background-color: transparent;
-                color: $shadow;
-            }
-        }
-    }
 }
diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss
index 5abb292..1067e07 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -13,7 +13,27 @@
 
 img { -ms-interpolation-mode: bicubic; }
 
+// Fix for Android
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from { padding: 0; }
+    to { padding: 0; }
+}
+
+// Helpers
 
+.visua11y-hidden {
+    border: 0;
+    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px; width: 1px;
+    margin: -1px; padding: 0;
+    position: absolute;
+    overflow: hidden;
+}
 
 // Links
 
@@ -42,66 +62,3 @@ code {
     padding: .5em 1.5em;
 
 }
-
-// Helpers
-
-.visua11y-hidden {
-    border: 0;
-    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px; width: 1px;
-    margin: -1px; padding: 0;
-    position: absolute;
-    overflow: hidden;
-}
-
-// Nav
-// Fix for Android
-body {
-    -webkit-animation: bugfix infinite 1s;
-}
-
-@-webkit-keyframes bugfix {
-    from { padding: 0; }
-    to { padding: 0; }
-}
-
-.menu {
-    input[type=checkbox] {
-        position: absolute;
-        top: -9999px;
-        left: -9999px;
-    }
-
-    label {
-        cursor: pointer;
-        user-select: none;
-
-        color: $contrast;
-        line-height: 1;
-        text-transform: uppercase;
-        position: absolute;
-        top: 1.5em; right: 1.5em;
-    }
-
-    label:hover {
-        color: $shadow;
-    }
-
-    label:before {
-        color: $white;
-        content: "\2261";
-        display: inline-block;
-        font-size: $fontSize * 1.5;
-        font-weight: bold;
-        margin-right: .25em;
-    }
-
-    .menu__items {
-        display: none;
-    }
-
-    input:checked ~ .menu__items {
-        display: block;
-    }
-}
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 113b61c..23859ab 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -13,6 +13,7 @@ html {
         background-color: $neutral;
         padding: .5em 1.5em;
     }
+
     a {
         text-decoration: none;
     }
@@ -34,7 +35,6 @@ html {
 
     a:hover {
         background-color: $shadow;
-
     }
 }
 
@@ -132,4 +132,33 @@ html {
     .pagination__prev + .pagination__next::before {
         @include  _separator-before($neutral, "|");
     }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    // header
+    .header-wrapper {
+        background-color: $neutral;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+        
+        .headline {
+            padding: 0;
+        }
+
+        .headline,
+        .menu {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .headline {
+            text-align: left;
+        }
+
+        .menu {
+            text-align: right;
+        }
+    }
 }
\ No newline at end of file
diff --git a/static/sass/custom/navigation.scss b/static/sass/custom/navigation.scss
new file mode 100644
index 0000000..b37bf5d
--- /dev/null
+++ b/static/sass/custom/navigation.scss
@@ -0,0 +1,85 @@
+////
+/// Navigation
+////
+
+.menu {
+    input[type=checkbox] {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    label {
+        // a like
+        cursor: pointer;
+        user-select: none;
+        // Custom
+        color: $contrast;
+        line-height: 1;
+        text-transform: uppercase;
+        position: absolute;
+        top: 1.5em; right: 1.5em;
+    }
+
+    label:hover {
+        color: $shadow;
+    }
+
+    label:before {
+        color: $white;
+        content: "\2261";
+        display: inline-block;
+        font-size: $fontSize * 1.5;
+        font-weight: bold;
+        margin-right: .25em;
+    }
+
+    .menu__items {
+        display: none;
+    }
+
+    input:checked ~ .menu__items {
+        display: block;
+    }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    .menu {
+        label {
+            display: none;
+        }
+
+        .menu__items {
+            display: block;
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                display: inline-block;
+            }
+
+            li + li {
+                margin-left: .5em;
+            }
+
+            li + li::before {
+                @include  _separator-before($white, "|");
+            }
+
+            a {
+                background-color: transparent;
+                color: $contrast;
+                display: inline;
+                padding: 0;
+                text-decoration: none;
+            }
+
+            a:hover {
+                background-color: transparent;
+                color: $shadow;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index fe3d908..9d7df41 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -34,3 +34,23 @@ h2, h4, h6 {
     line-height: $baseline - .3;
     color: $light;
 }
+
+// Medium breakpoint
+@media screen and (min-width: 40em) {
+    h1 { font-size: $fontSize * 3; }
+    h2 { font-size: $fontSize * 2.5; }
+    h3 { font-size: $fontSize * 2; }
+    h4 { font-size: $fontSize * 1.75; }
+    h5 { font-size: $fontSize * 1.25; }
+    h6 { font-size: $fontSize * 1; }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    h1 { font-size: $fontSize * 4.5; }
+    h2 { font-size: $fontSize * 3; }
+    h3 { font-size: $fontSize * 2.5; }
+    h4 { font-size: $fontSize * 2; }
+    h5 { font-size: $fontSize * 1.5; }
+    h6 { font-size: $fontSize * 1; }
+}
-- 
cgit v1.2.3