Merge pull request #15 from influxdata/v2-layout

404 page

assets/styles/layouts/_layout-error-page.scss

@@ -0,0 +1,88 @@
+.error-page {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: space-around;
+
+  .error-content {
+    margin-top: 10vh;
+    max-width: 310px;
+  }
+
+  .error-code {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 auto;
+    width: 15rem;
+    height: 15rem;
+    max-width: 80vw;
+    max-height: 80vw;
+    border-radius: 50%;
+    box-shadow: 5px 5px 30px $sidebar-search-shadow;
+
+    .error-code-border {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      border: 2px solid rgba($article-link, .5);
+      width: 90%;
+      height: 90%;
+      border-radius: 50%;
+    }
+
+    h1 {
+      font-family: $klavika;
+      color: $article-link;
+      font-size: 5rem;
+      font-weight: 300;
+      text-align: center;
+    }
+  }
+
+  a {
+    color: $article-link;
+    text-decoration: none;
+    font-weight: bold;
+    &:hover {
+      color: $article-link-hover;
+    }
+  }
+
+  .wayfinding {
+    display: flex;
+    justify-content: space-around;
+    align-content: center;
+    margin: 2rem 0 1.5rem;
+
+    .btn {
+      display: block;
+      flex-grow: 1;
+      margin-right: 4px;
+      padding: .75rem 1rem;
+      border-radius: $border-radius;
+      background: $error-page-btn;
+      text-align: center;
+      color: $error-page-btn-text;
+      &:hover {
+        background: $error-page-btn-hover;
+        color: $error-page-btn-hover-text;
+      }
+      &.back:before {
+        content: "\e90a";
+        font-family: "icomoon";
+        margin-right: .35rem;
+        vertical-align: text-top;
+      }
+    }
+  }
+
+  p {
+    // text-align: center;
+    color: $article-text;
+    line-height: 1.5rem;
+  }
+
+
+}

assets/styles/styles-default.scss

@@ -16,4 +16,5 @@
         "layouts/layout-sidebar-toggle",
         "layouts/layout-content-wrapper",
         "layouts/layout-article",
-        "layouts/syntax-highlighting";
+        "layouts/syntax-highlighting",
+        "layouts/layout-error-page";

assets/styles/themes/_theme-dark.scss

@@ -125,3 +125,9 @@ $nav-border: $g5-pepper !default;
 $nav-toggle: $g16-pearl !default;
 $nav-toggle-hover: $g16-pearl !default;
 $nav-toggle-bg-hover: $b-ocean !default;
+
+// Error Page Colors
+$error-page-btn: $b-ocean !default;
+$error-page-btn-text: $g20-white !default;
+$error-page-btn-hover: $g20-white !default;
+$error-page-btn-hover-text: $b-ocean !default;

assets/styles/themes/_theme-light.scss

@@ -124,3 +124,9 @@ $nav-border: $g14-chromium;
 $nav-toggle: $g20-white;
 $nav-toggle-hover: $g20-white;
 $nav-toggle-bg-hover: $b-ocean;
+
+// Error Page Colors
+$error-page-btn: $b-ocean;
+$error-page-btn-text: $g20-white;
+$error-page-btn-hover: $b-pool;
+$error-page-btn-hover-text: $g20-white;

layouts/404.html

@@ -0,0 +1,34 @@
+{{ partial "header.html" . }}
+
+<div class="error-page">
+    <div class="error-content">
+      <div class="error-code">
+        <div class="error-code-border">
+          <h1>404</h1>
+        </div>
+      </div>
+      <div class="wayfinding">
+        <a class="btn back" href="javascript:history.back()">Back</a>
+        <a class="btn version">InfluxDB</a>
+      </div>
+    	<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
+    </div>
+</div>
+
+<script>
+  function getProjectVersion(urlPath) {
+    if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] }
+    else { return undefined  }
+  }
+
+  var path = window.location.pathname
+  var projectVersion = getProjectVersion(path)
+
+  if ( projectVersion != undefined ) {
+    $('.btn.version').append(' ' + projectVersion).attr('href', '/' + projectVersion + '/');
+  } else {
+    $('.btn.version').hide()
+  }
+</script>
+
+{{ partial "footer.html" . }}