Moving sass and js files in to the assets directory.

assets/sass/navigation/mobile/_mobile.scss

@@ -0,0 +1,105 @@
+.mobile-nav-wrapper {
+  @include typeface(headings);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  z-index: 20;
+  pointer-events: none;
+
+  .js-nav-open & {
+    position: fixed;
+  }
+}
+
+.mobile-nav-cover {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-color: $mobile-menu-cover;
+  opacity: 0;
+
+  .js-nav-open & {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.mobile-nav-toggle {
+  display: block;
+  position: absolute;
+  top: $zen-gutters / 2;
+  right: $zen-gutters / 2;
+  padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px;
+  z-index: 22;
+  text-decoration: none;
+  font-weight: bold;
+  line-height: 1;
+  border: 1px solid $border;
+  border-radius: 3px;
+  color: $text;
+  pointer-events: auto;
+
+  .js-nav-open & {
+    color: $text-bg;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    margin-left: $zen-gutters / 4;
+    width: $zen-gutters;
+    height: $zen-gutters;
+    border-top: 12px double $text;
+    border-bottom: 4px solid $text;
+  }
+
+  .js-nav-open &::after {
+    border-color: $text-bg;
+  }
+}
+
+.mobile-nav-sheet {
+  background-color: $mobile-menu;
+  width: 90vw;
+  height: 100vh;
+  padding: 2rem;
+  transform: translateX(100vw);
+  z-index: 21;
+
+  a {
+    color: $text-bg;
+    text-decoration: none;
+  }
+
+  .js-nav-open & {
+    pointer-events: auto;
+    box-shadow: -10px 0 10px -10px $nearblack;
+    transform: translateX(10vw);
+  }
+
+  .js-navbar {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+
+    li {
+      list-style-type: none;
+      margin: .4rem 0;
+    }
+  }
+}
+
+.mobile-nav-cover,
+.mobile-nav-toggle,
+.mobile-nav-toggle::after,
+.mobile-nav-sheet {
+  transition: all 130ms ease-in;
+
+  .js-nav-open & {
+    transition: all 330ms ease-out;
+  }
+}

assets/sass/navigation/more-link/_more-link.scss

@@ -0,0 +1,24 @@
+// "More" link
+//
+// Styles the "Read more…" and "Help" links common on the web.
+
+.more-link,
+%more-link {
+  text-align: right;
+
+  @include rtl() {
+    text-align: left;
+  }
+
+  &__help-icon {
+    padding: 1px 0 1px 20px;
+    background-image: image-url('navigation', 'more-link/more-link__help-icon.svg');
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+
+    @include rtl() {
+      padding: 1px 20px 1px 0;
+      background-position: 100% 50%;
+    }
+  }
+}

assets/sass/navigation/more-link/more-link__help-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="8" cy="8" r="7" fill="#c5c5c5"/><path d="M8.767,10.847l-1.644,0c-0.004,-0.236 -0.007,-1.216 -0.007,-1.268c0,-0.533 0.089,-0.972 0.265,-1.316c0.176,-0.343 0.529,-0.73 1.058,-1.16c0.528,-0.43 0.844,-0.712 0.948,-0.845c0.159,-0.211 0.238,-0.443 0.238,-0.697c0,-0.352 -0.141,-0.654 -0.422,-0.906c-0.282,-0.251 -0.661,-0.377 -1.139,-0.377c-0.46,0 -0.844,0.131 -1.154,0.393c-0.309,0.263 -0.522,0.662 -0.638,1.2l-1.664,-0.207c0.047,-0.769 0.375,-1.423 0.983,-1.96c0.609,-0.538 1.407,-0.806 2.396,-0.806c1.041,0 1.868,0.272 2.483,0.816c0.615,0.543 0.922,1.177 0.922,1.899c0,0.4 -0.113,0.778 -0.338,1.135c-0.226,0.357 -0.709,0.843 -1.448,1.457c-0.383,0.319 -0.62,0.574 -0.713,0.768c-0.092,0.193 -0.134,1.376 -0.126,1.874ZM7.123,13.102l0,-1.629l1.666,0l0,1.629l-1.666,0Z" fill="#fff"/></svg>

assets/sass/navigation/navbar/_navbar.scss

@@ -0,0 +1,32 @@
+// Dependencies.
+@import 'components/visually-hidden/visually-hidden';
+
+// Navbar
+//
+// A simple method to get navigation links to appear in one line.
+
+.navbar,
+%navbar {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+
+  @include rtl() {
+    flex-direction: row-reverse;
+    text-align: right;
+    padding: 0;
+  }
+
+  &__item,
+  li {
+    padding: 0 10px 0 0;
+    list-style-type: none;
+    list-style-image: none;
+
+    @include rtl() {
+      padding: 0 0 0 10px;
+    }
+  }
+}

assets/sass/navigation/pager/_pager.scss

@@ -0,0 +1,51 @@
+// Pager
+//
+// Paged navigation is a list of page numbers when more than 1 page of content
+// is available.
+
+.pager,
+%pager {
+  @include margin-top(.5);
+  @include margin-bottom(.5);
+  clear: both;
+  padding: 0;
+  text-align: center;
+
+  // A page item in the pager list.
+  &__item {
+    display: inline;
+    padding: 0 .5em;
+    list-style-type: none;
+    background-image: none;
+  }
+
+  // The current page's list item.
+  &__current-item {
+    @extend %pager__item;
+    font-weight: bold;
+  }
+}
+
+//
+// Zen selectors.
+//
+
+// .pager-item     - A list item containing a page number in the list of pages.
+// .pager-first    - The first page's list item.
+// .pager-previous - The previous page's list item.
+// .pager-next     - The next page's list item.
+// .pager-last     - The last page's list item.
+// .pager-ellipsis - A concatenation of several list items using an ellipsis.
+
+.pager-item,
+.pager-first,
+.pager-previous,
+.pager-next,
+.pager-last,
+.pager-ellipsis {
+  @extend %pager__item;
+}
+
+.pager-current {
+  @extend %pager__current-item;
+}