From 110d34531e22f773efdf1ce01fe7e8b056acbcac Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sun, 16 Jul 2017 23:06:51 +0200
Subject: [PATCH] New mobile menu.

---
 layouts/partials/menu.html |   2 +-
 sass/_zen.scss             | 124 +++++++++++++++++++++++++++++++------
 static/css/styles.css      |   2 +-
 static/js/script.js        |  16 ++++-
 4 files changed, 120 insertions(+), 24 deletions(-)

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index dd3ed12..7803146 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -2,7 +2,7 @@
 {{ $currentID := .UniqueID }}
 <nav class="main-menu layout__navigation layout__full" role="navigation">
 <h2 class="visually-hidden">Main menu</h2>
-<ul class="navbar clearfix">
+<ul class="navbar">
 <li><a class="{{ if .IsHome }}active{{ end }}" href="/">{{ i18n "menu_home" }}</a></li>
 {{ range after 1 (where .Site.Pages "Section" "") -}}
 <li><a class="{{ if eq $currentID .UniqueID }}active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
diff --git a/sass/_zen.scss b/sass/_zen.scss
index ed70cb5..b4e9542 100644
--- a/sass/_zen.scss
+++ b/sass/_zen.scss
@@ -183,26 +183,7 @@ body {
 }
 
 .header {
-  padding-top: $zen-gutters / 2;
-
-  @include respond-to(m) {
-    padding-top: $zen-gutters;
-  }
-
-  &__logo {
-    @include respond-to(s) {
-    }
-  }
-
-  &__site-name {
-    @include respond-to(s) {
-    }
-  }
-
-  &__region {
-    @include respond-to(s) {
-    }
-  }
+  padding-top: $zen-gutters;
 }
 
 /* Navigation */
@@ -330,3 +311,106 @@ body {
     }
   }
 }
+
+
+
+
+
+.js-nav-wrapper {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.js-nav-cover {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(color(text), .2);
+  opacity: 0;
+
+  .js-nav-open & {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.js-nav-toggle {
+  @include typeface(headings);
+  display: block;
+  position: absolute;
+  top: $zen-gutters / 2;
+  right: $zen-gutters + $zen-gutters / 2 + $zen-gutters / 4;
+  z-index: 12;
+  text-decoration: none;
+  font-weight: bold;
+  line-height: 1;
+  pointer-events: auto;
+
+  .js-nav-open & {
+    color: color(text-bg);
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    margin-left: $zen-gutters / 4;
+    width: $zen-gutters;
+    height: 4px;
+    border-top: 12px double color(text);
+    border-bottom: 4px solid color(text);
+  }
+
+  .js-nav-open &::after {
+    border-color: color(text-bg);
+  }
+}
+
+.js-nav-sheet {
+  position: relative;
+  background-color: color(header-bg);
+  width: 90vw;
+  height: 100vh;
+  padding: 2rem;
+  transform: translateX(100vw);
+  z-index: 11;
+
+  .js-nav-open & {
+    pointer-events: auto;
+    box-shadow: -10px 0 10px -10px color('nearblack');
+    transform: translateX(10vw);
+  }
+
+  .js-navbar {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+
+    li {
+      list-style-type: none;
+      margin: .4rem 0;
+
+      a {
+        color: color(white);
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.js-nav-cover,
+.js-nav-toggle,
+.js-nav-toggle::after,
+.js-nav-sheet {
+  transition: all 130ms ease-in;
+
+  .js-nav-open & {
+    transition: all 330ms ease-out;
+  }
+}
diff --git a/static/css/styles.css b/static/css/styles.css
index 40491a5..5dff8e1 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1 +1 @@
-/*! typey | GPLv2 License | https://github.com/jptaranto/typey */*{box-sizing:border-box}html{font-size:137.5%;line-height:1.40909em;font-family:"Garamond Premier Pro","Adobe Garamond",Garamond,Charter,"Times New Roman",serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-height:100%}@media print{html{font-size:12pt}}body{margin:0;padding:0;color:#000;background-color:#fff}@media (min-width:1111px){html{font-size:112.5%;line-height:1.38889em}}@media print and (min-width:1111px){html{font-size:12pt}}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{color:#000;-webkit-text-decoration-skip:objects}:visited{color:#000}a:active{color:#c00}a:active:not(.button){background-color:transparent}a:active,a:hover{outline-width:0}.header__site-name,h1{font-size:1.27273rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.18182rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.09091rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.81818rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.72727rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}@media (min-width:666px){.header__site-name,h1{font-size:1.88889rem;line-height:2.81818rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.55556rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.22222rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.88889rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.77778rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp,var{font-family:Menlo,"Ubuntu Mono","DejaVu Sans Mono","Courier New",Courier,monospace,sans-serif;font-size:1em}dfn{font-style:italic}mark{background-color:#fd0;color:#000}small{font-size:.81818rem}sub,sup{font-size:.72727rem;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.divider,hr{margin:1.40909rem 0;border:0;border-top:1px solid #ccc}.divider>:first-child,hr>:first-child{margin-top:1.40909rem}blockquote{margin:1.40909rem 2rem}dl,menu,ol,ul{margin:1.40909rem 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 44px}menu,ol,ul{padding:0 0 0 44px}figure{margin:1.40909rem 0}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:1.40909rem 0}img{border-style:none}img,svg{max-width:100%;height:auto}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{box-sizing:border-box;max-width:100%;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}input{overflow:visible}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}fieldset{padding:.49318rem .88068rem .91591rem;border:1px solid #ccc;margin:0 2px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;color:inherit;margin-left:-5px;padding:0 5px}label{display:block;font-weight:700}optgroup{font-weight:700}textarea{overflow:auto}table{margin:1.40909rem 0;border-collapse:collapse;border-spacing:0;width:100%}td,th{padding:0}.layout__page{max-width:960px}.layout__content,.layout__first-sidebar,.layout__footer,.layout__header,.layout__navigation,.layout__page-bottom,.layout__page-top,.layout__second-sidebar{padding:0 10px}@media (min-width:666px){.layout__content,.layout__first-sidebar,.layout__footer,.layout__header,.layout__navigation,.layout__page-bottom,.layout__page-top,.layout__second-sidebar{padding:0 20px}}@supports (display:grid){.layout__page{display:grid;grid-template-columns:[first-start] 1fr [last-end]}@media (min-width:666px){.layout__page{grid-template-rows:[head-start] auto [nav-start] auto [page-top-start] auto [main-start] 1fr [page-bottom-start] auto [footer-start] auto;min-height:100vh;margin:0 auto}.layout__sidebar-first{grid-template-columns:[first-start] 1fr [last-start] 2fr [last-end]}.layout__sidebar-second{grid-template-columns:[first-start] 2fr [last-start] 1fr [last-end]}.layout__sidebar-two{grid-template-columns:[first-start] 1fr [middle-start] 2fr [last-start] 1fr [last-end]}.layout__full{grid-column:first-start/last-end}.layout__first-sidebar{grid-column:first-start}.layout__header{grid-row:head-start}.layout__navigation{grid-row:nav-start}.layout__page-top{grid-row:page-top-start}.layout__content,.layout__first-sidebar,.layout__second-sidebar{grid-row:main-start}.layout__page-bottom{grid-row:page-bottom-start}.layout__footer{grid-row:footer-start}}}.box{margin-bottom:1.40909rem;border:5px solid #ccc;padding:1em}.box__title{margin:0}.box:focus,.box:hover{border-color:#000}.box--highlight{border-color:#000}.button,[type=reset],[type=submit],button,html [type=button]{-moz-appearance:button;-webkit-appearance:button}.button,[type=button],[type=reset],[type=submit],button{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;margin-right:1.05682rem;margin-bottom:1.05682rem;display:inline-block;padding:2px 10px;line-height:inherit;text-decoration:none;cursor:pointer;color:#333;text-align:center;background-image:linear-gradient(#f6f6f6,#e2e2e2);border:1px solid #e4e4e4;border-left-color:#d2d2d2;border-right-color:#d2d2d2;border-bottom-color:#b4b4b4;border-radius:2px}.button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}.button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{text-decoration:none;color:#333}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{border-color:#555;text-shadow:#333 0 -1px 0;background:#666;color:#fff}[disabled].button,[disabled][type=button],[disabled][type=reset],[disabled][type=submit],button[disabled]{cursor:default;color:#999;background-color:#eee;border-color:#eee;background-image:none;text-shadow:none}[disabled].button:active,[disabled].button:focus,[disabled].button:hover,[disabled][type=button]:active,[disabled][type=button]:focus,[disabled][type=button]:hover,[disabled][type=reset]:active,[disabled][type=reset]:focus,[disabled][type=reset]:hover,[disabled][type=submit]:active,[disabled][type=submit]:focus,[disabled][type=submit]:hover,button[disabled]:active,button[disabled]:focus,button[disabled]:hover{color:#999}.clearfix::before{content:'';display:table}.clearfix::after{content:'';display:table;clear:both}@media (min-width:666px){.header{display:flex}}.header__logo{margin:0 20px 0 0}.header__logo-image{vertical-align:bottom}.header__site-name{margin:0;display:inline-block}.header__site-link:link,.header__site-link:visited{color:#000;text-decoration:none}.header__site-link:focus,.header__site-link:hover{text-decoration:underline}@media (min-width:666px){.header__region{margin-left:auto}}.hidden,html.js .js-hidden{display:none}.highlight-mark{color:#c00;background-color:transparent}.inline-links{padding:0}.inline-links__item{display:inline;list-style-type:none;padding:0 1em 0 0}.inline-sibling{display:inline;margin-right:10px}.inline-sibling *,.inline-sibling__child{display:inline}.inline-sibling+*,.inline-sibling+*>:first-child,.inline-sibling+*>:first-child>:first-child,.inline-sibling__adjacent{display:inline}.responsive-video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.responsive-video iframe,.responsive-video__embed{position:absolute;top:0;left:0;width:100%;height:100%}.responsive-video--4-3{padding-bottom:75%}.breadcrumb__title,.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}.visually-hidden--focusable:active,.visually-hidden--focusable:focus,.visually-hidden--off{position:static!important;clip:auto;height:auto;width:auto;overflow:visible}.watermark{font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;display:block;height:0;overflow:visible;background-color:transparent;color:#eee;font-size:75px;line-height:1;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.1);word-wrap:break-word}.breadcrumb__list{margin:0;padding:0}.breadcrumb__item{display:inline;list-style-type:none;margin:0;padding:0}.more-link{text-align:right}.more-link__help-icon{padding:1px 0 1px 20px;background-image:url(navigation/more-link/more-link__help-icon.svg);background-position:0 50%;background-repeat:no-repeat}.nav-menu__item{list-style-image:url(navigation/nav-menu/leaf.svg);list-style-type:square}.nav-menu__item--is-expanded,.nav-menu__item.is-expanded{list-style-image:url(navigation/nav-menu/expanded.svg);list-style-type:circle}.nav-menu__item--is-collapsed,.nav-menu__item.is-collapsed{list-style-image:url(navigation/nav-menu/collapsed.svg);list-style-type:disc}.nav-menu__link--is-active,.nav-menu__link.is-active{color:#000}.navbar{display:flex;margin:0;padding:0;text-align:left}.navbar li,.navbar__item{padding:0 10px 0 0;list-style-type:none;list-style-image:none}.pager{clear:both;padding:0;text-align:center}.pager-current,.pager-ellipsis,.pager-first,.pager-item,.pager-last,.pager-next,.pager-previous,.pager__current-item,.pager__item{display:inline;padding:0 .5em;list-style-type:none;background-image:none}.pager-current,.pager__current-item{font-weight:700}.skip-link{display:block;padding:2px 0 3px;text-align:center}.skip-link:link,.skip-link:visited{background-color:#666;color:#fff}.skip-link__wrapper{margin:0}article>.content ul,aside ul{display:table;list-style:none;padding:0}article>.content ul>li,aside ul>li{display:table-row}article>.content ul>li::before,aside ul>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:'\2022'}@media (min-width:1111px){article>.content ul>li::before,aside ul>li::before{font-size:.88889rem}}article>.content ol,aside ol{display:table;list-style:none;padding:0}article>.content ol>li,aside ol>li{display:table-row;counter-increment:table-ol}article>.content ol>li::before,aside ol>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:counter(table-ol) ".";text-align:right}@media (min-width:1111px){article>.content ol>li::before,aside ol>li::before{font-size:.88889rem}}p,pre{margin:1.05682rem 0}figcaption,label,legend,th{font-size:.81818rem;line-height:1.40909rem}@media (min-width:1111px){figcaption,label,legend,th{font-size:.88889rem;line-height:1.40909rem}}.footer,article>header{font-size:.72727rem;line-height:1.40909rem}@media (min-width:1111px){.footer,article>header{font-size:.77778rem;line-height:1.40909rem}}.footer,.header,article>header,h1,h2,h3,label,legend,nav,th{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;color:#333;font-weight:400}article>header{color:#999}article>header p{margin:.28182rem 0}@media (min-width:888px){article .submitted,article .tags{display:inline-block;padding-right:1rem}}article .tags ul{margin:0;padding:0}article .tags li,article .tags ul{display:inline}article .tags li{list-style-type:none}article .tags a{padding-right:.28182rem}article code{font-size:.81818rem;line-height:1.40909rem;word-wrap:break-word}article pre{color:#333;border-radius:3px;padding:5px;border:1px solid #ccc;background-color:#fff;overflow:auto;max-height:250px;max-width:550px}article pre>code{display:inline-block;white-space:pre}.title-submitted{margin-bottom:0}@media (min-width:666px){figure{display:table}figure img{display:block}figure.left{padding:0 .70455rem .70455rem 0;margin:0;float:left;clear:both}figure.left figcaption{padding:0 .70455rem .70455rem 0}figure.right{padding:0 0 .70455rem .70455rem;margin:0;float:right;clear:both}figure.right figcaption{padding:0 0 .70455rem .70455rem}}@media (min-width:666px){figcaption{display:table-caption;caption-side:bottom}}figcaption h4,figcaption p{margin:0}body{background-color:#eee}.page{background-color:#fff}.header{padding-top:10px}@media (min-width:777px){.header{padding-top:20px}}.main-menu{margin-top:.70455rem;margin-bottom:.70455rem;outline:0}.main-menu li{margin-right:.70455rem;margin-bottom:.70455rem;padding:0}.main-menu a{display:block;background-color:#333;color:#fff;padding:2px 8px;text-decoration:none}.main-menu a:focus,.main-menu a:hover{background-color:#666}.main-menu a.active,.main-menu a:active{background-color:#333;text-decoration:underline}.menu a.active{text-decoration:none}.footer{margin-top:2.11364rem;padding:.70455rem 0;text-align:center;border-top:2px solid #333}.footer p{margin:0}.message{padding:10px;border-width:1px;border-style:solid;width:95%}.message.status{background-color:#f4feee;color:#43a808;border-color:#43a808}.message.warning{background-color:#fffce6;color:#000;border-color:#000}.message.error{background-color:#fff0f0;color:#c00;border-color:#c00}.search-form{padding-top:.70455rem}.search-text{font-size:1.09091rem;line-height:1.40909rem}.content input,.content textarea{margin-bottom:1.05682rem;width:95%}.content input:required+span::after,.content textarea:required+span::after{content:' *';color:#c00;vertical-align:top}.content input:not(:placeholder-shown):valid,.content textarea:not(:placeholder-shown):valid{background-color:#f4feee}.content input:not(:placeholder-shown):invalid,.content textarea:not(:placeholder-shown):invalid{background-color:#fff0f0}.content button{display:block}.js-submitted input:valid,.js-submitted textarea:valid{background-color:#f4feee}.js-submitted input:invalid,.js-submitted textarea:invalid{background-color:#fff0f0}
\ No newline at end of file
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */*{box-sizing:border-box}html{font-size:137.5%;line-height:1.40909em;font-family:"Garamond Premier Pro","Adobe Garamond",Garamond,Charter,"Times New Roman",serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-height:100%}@media print{html{font-size:12pt}}body{margin:0;padding:0;color:#000;background-color:#fff}@media (min-width:1111px){html{font-size:112.5%;line-height:1.38889em}}@media print and (min-width:1111px){html{font-size:12pt}}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{color:#000;-webkit-text-decoration-skip:objects}:visited{color:#000}a:active{color:#c00}a:active:not(.button){background-color:transparent}a:active,a:hover{outline-width:0}.header__site-name,h1{font-size:1.27273rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.18182rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.09091rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.81818rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.72727rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}@media (min-width:666px){.header__site-name,h1{font-size:1.88889rem;line-height:2.81818rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.55556rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.22222rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.88889rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.77778rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp,var{font-family:Menlo,"Ubuntu Mono","DejaVu Sans Mono","Courier New",Courier,monospace,sans-serif;font-size:1em}dfn{font-style:italic}mark{background-color:#fd0;color:#000}small{font-size:.81818rem}sub,sup{font-size:.72727rem;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.divider,hr{margin:1.40909rem 0;border:0;border-top:1px solid #ccc}.divider>:first-child,hr>:first-child{margin-top:1.40909rem}blockquote{margin:1.40909rem 2rem}dl,menu,ol,ul{margin:1.40909rem 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 44px}menu,ol,ul{padding:0 0 0 44px}figure{margin:1.40909rem 0}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:1.40909rem 0}img{border-style:none}img,svg{max-width:100%;height:auto}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{box-sizing:border-box;max-width:100%;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}input{overflow:visible}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}fieldset{padding:.49318rem .88068rem .91591rem;border:1px solid #ccc;margin:0 2px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;color:inherit;margin-left:-5px;padding:0 5px}label{display:block;font-weight:700}optgroup{font-weight:700}textarea{overflow:auto}table{margin:1.40909rem 0;border-collapse:collapse;border-spacing:0;width:100%}td,th{padding:0}.layout__page{max-width:960px}.layout__content,.layout__first-sidebar,.layout__footer,.layout__header,.layout__navigation,.layout__page-bottom,.layout__page-top,.layout__second-sidebar{padding:0 10px}@media (min-width:666px){.layout__content,.layout__first-sidebar,.layout__footer,.layout__header,.layout__navigation,.layout__page-bottom,.layout__page-top,.layout__second-sidebar{padding:0 20px}}@supports (display:grid){.layout__page{display:grid;grid-template-columns:[first-start] 1fr [last-end]}@media (min-width:666px){.layout__page{grid-template-rows:[head-start] auto [nav-start] auto [page-top-start] auto [main-start] 1fr [page-bottom-start] auto [footer-start] auto;min-height:100vh;margin:0 auto}.layout__sidebar-first{grid-template-columns:[first-start] 1fr [last-start] 2fr [last-end]}.layout__sidebar-second{grid-template-columns:[first-start] 2fr [last-start] 1fr [last-end]}.layout__sidebar-two{grid-template-columns:[first-start] 1fr [middle-start] 2fr [last-start] 1fr [last-end]}.layout__full{grid-column:first-start/last-end}.layout__first-sidebar{grid-column:first-start}.layout__header{grid-row:head-start}.layout__navigation{grid-row:nav-start}.layout__page-top{grid-row:page-top-start}.layout__content,.layout__first-sidebar,.layout__second-sidebar{grid-row:main-start}.layout__page-bottom{grid-row:page-bottom-start}.layout__footer{grid-row:footer-start}}}.box{margin-bottom:1.40909rem;border:5px solid #ccc;padding:1em}.box__title{margin:0}.box:focus,.box:hover{border-color:#000}.box--highlight{border-color:#000}.button,[type=reset],[type=submit],button,html [type=button]{-moz-appearance:button;-webkit-appearance:button}.button,[type=button],[type=reset],[type=submit],button{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;margin-right:1.05682rem;margin-bottom:1.05682rem;display:inline-block;padding:2px 10px;line-height:inherit;text-decoration:none;cursor:pointer;color:#333;text-align:center;background-image:linear-gradient(#f6f6f6,#e2e2e2);border:1px solid #e4e4e4;border-left-color:#d2d2d2;border-right-color:#d2d2d2;border-bottom-color:#b4b4b4;border-radius:2px}.button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}.button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{text-decoration:none;color:#333}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{border-color:#555;text-shadow:#333 0 -1px 0;background:#666;color:#fff}[disabled].button,[disabled][type=button],[disabled][type=reset],[disabled][type=submit],button[disabled]{cursor:default;color:#999;background-color:#eee;border-color:#eee;background-image:none;text-shadow:none}[disabled].button:active,[disabled].button:focus,[disabled].button:hover,[disabled][type=button]:active,[disabled][type=button]:focus,[disabled][type=button]:hover,[disabled][type=reset]:active,[disabled][type=reset]:focus,[disabled][type=reset]:hover,[disabled][type=submit]:active,[disabled][type=submit]:focus,[disabled][type=submit]:hover,button[disabled]:active,button[disabled]:focus,button[disabled]:hover{color:#999}.clearfix::before{content:'';display:table}.clearfix::after{content:'';display:table;clear:both}@media (min-width:666px){.header{display:flex}}.header__logo{margin:0 20px 0 0}.header__logo-image{vertical-align:bottom}.header__site-name{margin:0;display:inline-block}.header__site-link:link,.header__site-link:visited{color:#000;text-decoration:none}.header__site-link:focus,.header__site-link:hover{text-decoration:underline}@media (min-width:666px){.header__region{margin-left:auto}}.hidden,html.js .js-hidden{display:none}.highlight-mark{color:#c00;background-color:transparent}.inline-links{padding:0}.inline-links__item{display:inline;list-style-type:none;padding:0 1em 0 0}.inline-sibling{display:inline;margin-right:10px}.inline-sibling *,.inline-sibling__child{display:inline}.inline-sibling+*,.inline-sibling+*>:first-child,.inline-sibling+*>:first-child>:first-child,.inline-sibling__adjacent{display:inline}.responsive-video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.responsive-video iframe,.responsive-video__embed{position:absolute;top:0;left:0;width:100%;height:100%}.responsive-video--4-3{padding-bottom:75%}.breadcrumb__title,.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}.visually-hidden--focusable:active,.visually-hidden--focusable:focus,.visually-hidden--off{position:static!important;clip:auto;height:auto;width:auto;overflow:visible}.watermark{font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;display:block;height:0;overflow:visible;background-color:transparent;color:#eee;font-size:75px;line-height:1;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.1);word-wrap:break-word}.breadcrumb__list{margin:0;padding:0}.breadcrumb__item{display:inline;list-style-type:none;margin:0;padding:0}.more-link{text-align:right}.more-link__help-icon{padding:1px 0 1px 20px;background-image:url(navigation/more-link/more-link__help-icon.svg);background-position:0 50%;background-repeat:no-repeat}.nav-menu__item{list-style-image:url(navigation/nav-menu/leaf.svg);list-style-type:square}.nav-menu__item--is-expanded,.nav-menu__item.is-expanded{list-style-image:url(navigation/nav-menu/expanded.svg);list-style-type:circle}.nav-menu__item--is-collapsed,.nav-menu__item.is-collapsed{list-style-image:url(navigation/nav-menu/collapsed.svg);list-style-type:disc}.nav-menu__link--is-active,.nav-menu__link.is-active{color:#000}.navbar{display:flex;margin:0;padding:0;text-align:left}.navbar li,.navbar__item{padding:0 10px 0 0;list-style-type:none;list-style-image:none}.pager{clear:both;padding:0;text-align:center}.pager-current,.pager-ellipsis,.pager-first,.pager-item,.pager-last,.pager-next,.pager-previous,.pager__current-item,.pager__item{display:inline;padding:0 .5em;list-style-type:none;background-image:none}.pager-current,.pager__current-item{font-weight:700}.skip-link{display:block;padding:2px 0 3px;text-align:center}.skip-link:link,.skip-link:visited{background-color:#666;color:#fff}.skip-link__wrapper{margin:0}article>.content ul,aside ul{display:table;list-style:none;padding:0}article>.content ul>li,aside ul>li{display:table-row}article>.content ul>li::before,aside ul>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:'\2022'}@media (min-width:1111px){article>.content ul>li::before,aside ul>li::before{font-size:.88889rem}}article>.content ol,aside ol{display:table;list-style:none;padding:0}article>.content ol>li,aside ol>li{display:table-row;counter-increment:table-ol}article>.content ol>li::before,aside ol>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:counter(table-ol) ".";text-align:right}@media (min-width:1111px){article>.content ol>li::before,aside ol>li::before{font-size:.88889rem}}p,pre{margin:1.05682rem 0}figcaption,label,legend,th{font-size:.81818rem;line-height:1.40909rem}@media (min-width:1111px){figcaption,label,legend,th{font-size:.88889rem;line-height:1.40909rem}}.footer,article>header{font-size:.72727rem;line-height:1.40909rem}@media (min-width:1111px){.footer,article>header{font-size:.77778rem;line-height:1.40909rem}}.footer,.header,article>header,h1,h2,h3,label,legend,nav,th{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;color:#333;font-weight:400}article>header{color:#999}article>header p{margin:.28182rem 0}@media (min-width:888px){article .submitted,article .tags{display:inline-block;padding-right:1rem}}article .tags ul{margin:0;padding:0}article .tags li,article .tags ul{display:inline}article .tags li{list-style-type:none}article .tags a{padding-right:.28182rem}article code{font-size:.81818rem;line-height:1.40909rem;word-wrap:break-word}article pre{color:#333;border-radius:3px;padding:5px;border:1px solid #ccc;background-color:#fff;overflow:auto;max-height:250px;max-width:550px}article pre>code{display:inline-block;white-space:pre}.title-submitted{margin-bottom:0}@media (min-width:666px){figure{display:table}figure img{display:block}figure.left{padding:0 .70455rem .70455rem 0;margin:0;float:left;clear:both}figure.left figcaption{padding:0 .70455rem .70455rem 0}figure.right{padding:0 0 .70455rem .70455rem;margin:0;float:right;clear:both}figure.right figcaption{padding:0 0 .70455rem .70455rem}}@media (min-width:666px){figcaption{display:table-caption;caption-side:bottom}}figcaption h4,figcaption p{margin:0}body{background-color:#eee}.page{background-color:#fff}.header{padding-top:20px}.main-menu{margin-top:.70455rem;margin-bottom:.70455rem;outline:0}.main-menu li{margin-right:.70455rem;margin-bottom:.70455rem;padding:0}.main-menu a{display:block;background-color:#333;color:#fff;padding:2px 8px;text-decoration:none}.main-menu a:focus,.main-menu a:hover{background-color:#666}.main-menu a.active,.main-menu a:active{background-color:#333;text-decoration:underline}.menu a.active{text-decoration:none}.footer{margin-top:2.11364rem;padding:.70455rem 0;text-align:center;border-top:2px solid #333}.footer p{margin:0}.message{padding:10px;border-width:1px;border-style:solid;width:95%}.message.status{background-color:#f4feee;color:#43a808;border-color:#43a808}.message.warning{background-color:#fffce6;color:#000;border-color:#000}.message.error{background-color:#fff0f0;color:#c00;border-color:#c00}.search-form{padding-top:.70455rem}.search-text{font-size:1.09091rem;line-height:1.40909rem}.content input,.content textarea{margin-bottom:1.05682rem;width:95%}.content input:required+span::after,.content textarea:required+span::after{content:' *';color:#c00;vertical-align:top}.content input:not(:placeholder-shown):valid,.content textarea:not(:placeholder-shown):valid{background-color:#f4feee}.content input:not(:placeholder-shown):invalid,.content textarea:not(:placeholder-shown):invalid{background-color:#fff0f0}.content button{display:block}.js-submitted input:valid,.js-submitted textarea:valid{background-color:#f4feee}.js-submitted input:invalid,.js-submitted textarea:invalid{background-color:#fff0f0}.js-nav-wrapper{position:fixed;right:0;top:0;width:100vw;height:100vh;overflow:hidden;z-index:10;pointer-events:none}.js-nav-cover{position:absolute;width:100vw;height:100vh;background-color:rgba(0,0,0,.2);opacity:0}.js-nav-open .js-nav-cover{opacity:1;pointer-events:auto}.js-nav-toggle{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;display:block;position:absolute;top:10px;right:35px;z-index:12;text-decoration:none;font-weight:700;line-height:1;pointer-events:auto}.js-nav-open .js-nav-toggle{color:#fff}.js-nav-toggle::after{position:absolute;content:'';margin-left:5px;width:20px;height:4px;border-top:12px double #000;border-bottom:4px solid #000}.js-nav-open .js-nav-toggle::after{border-color:#fff}.js-nav-sheet{position:relative;background-color:#333;width:90vw;height:100vh;padding:2rem;transform:translateX(100vw);z-index:11}.js-nav-open .js-nav-sheet{pointer-events:auto;box-shadow:-10px 0 10px -10px #333;transform:translateX(10vw)}.js-nav-sheet .js-navbar{display:flex;flex-direction:column;padding:0;margin:0}.js-nav-sheet .js-navbar li{list-style-type:none;margin:.4rem 0}.js-nav-sheet .js-navbar li a{color:#fff;text-decoration:none}.js-nav-cover,.js-nav-sheet,.js-nav-toggle,.js-nav-toggle::after{transition:all 130ms ease-in}.js-nav-open .js-nav-cover,.js-nav-open .js-nav-sheet,.js-nav-open .js-nav-toggle,.js-nav-open .js-nav-toggle::after{transition:all 330ms ease-out}
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 1a1f8fa..a06f446 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -11,10 +11,22 @@
   $('html').addClass('js');
 
   // Activate the SlickNav menu for small screens.
-  if (window.matchMedia && $.isFunction($.fn.slicknav)) {
+  if (window.matchMedia) {
     var mq = window.matchMedia('(max-width: 666px)');
     if (mq.matches) {
-      $('.main-menu').addClass('hidden').find('.navbar').filter(':first').slicknav();
+      // Create the nav toggle button and the nav sheet.
+      $('.page').after('<div class="js-nav-wrapper"><div class="js-nav-cover"></div><a href="#navigation" class="js-nav-toggle" aria-haspopup="true" role="button">Menu</a><nav class="js-nav-sheet"></nav></div>');
+
+      // Populate the nav sheet.
+      $('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.js-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
+      $('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.js-nav-sheet');
+
+      // Toggle the nav sheet.
+      $('.js-nav-cover, .js-nav-toggle').on('click toushstart', function (e) {
+        e.preventDefault();
+        $('.js-nav-wrapper').toggleClass('js-nav-open');
+      });
+
     }
   }