Merge pull request #495 from GSA-TTS/np/LG-11971/404-page

nprimak · web-flow · commit 7f9cf63cdcae · 2024-08-22T11:17:09.000-04:00
Add 404 page borrowed from brochure site
diff --git a/_layouts/not_found.html b/_layouts/not_found.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html lang="en" class="not-found">
+  <head>
+    {% include google_analytics.html %}
+    {% include osc_analytics.html %}
+    {% include dap.html %}
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    {% capture title -%}
+      {% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif -%}
+    {% endcapture -%}
+
+    <title>{{ title }}</title>
+    <meta property="og:title" content="{{ title }}">
+
+    {% if page.lead -%}
+      <meta name="description" content="{{ page.lead | markdownify | strip_html | strip }}">
+      <meta property="og:description" content="{{ page.lead | markdownify | strip_html | strip }}">
+    {% endif -%}
+
+    <meta name="twitter:card" value="summary">
+    <meta property="og:type" content="article">
+
+    <link rel="shortcut icon" type="image/ico" href="{{ site.baseurl }}/assets/img/favicons/favicon.ico">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
+  </head>
+
+  <body class="not-found">
+  {{ content }}
+  </body>
+</html>
diff --git a/_pages/404.md b/_pages/404.md
@@ -0,0 +1,33 @@
+---
+layout: not_found
+title: This page is no longer available.
+permalink: /404.html
+sitemap: false
+---
+
+<main class="site-wrapper">
+  <div class="site-wrapper-inner">
+    <div class="cover-container">
+      <div class="masthead clearfix">
+        <div class="inner">
+          <a href="/"><img src="{{ '/assets/img/logo-white.svg' | prepend: site.baseurl}}" width="150" alt="Login.gov logo" class='masthead-brand'/></a>
+        </div>
+      </div>
+      <div class="inner cover">
+        <h1>
+          The page you are looking for may have moved or is no longer available.
+        </h1>
+        <p>
+          Please check the URL.
+        </p>
+        <p>
+          Here are some links that might be helpful:
+        </p>
+      </div>
+      <ul>
+        <li><a href="{{ site.baseurl }}/">Home</a></li>
+        <li><a href="{{ site.baseurl }}/support/">Support</a></li>
+      </ul>
+    </div>
+  </div>
+</main>
diff --git a/assets/scss/_not_found.scss b/assets/scss/_not_found.scss
@@ -0,0 +1,75 @@
+html.not-found {
+  height: 100%;
+}
+
+body.not-found {
+    color: #fff;
+    text-align: center;
+    height: 100%;
+  
+    main {
+      background-color: #112e51;
+    }
+  
+    a,
+    a:focus,
+    a:hover {
+      color: #fff;
+    }
+  
+    .site-wrapper {
+      height: 100%;
+      min-height: 100%;
+      width: 100%;
+      display: table;
+    }
+  
+    .site-wrapper-inner {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  
+    .cover-container {
+      margin: auto;
+      max-width: 600px;
+    }
+  
+    .inner {
+      padding: 0 30px;
+    }
+  
+    .cover {
+      padding: 0 20px;
+    }
+  
+    .masthead-brand {
+      margin-top: 10px;
+    }
+  
+    ul {
+      padding: 0;
+    }
+  
+    li {
+      display: inline;
+      margin: 20px;
+    }
+  
+    h1 {
+      margin-top: 32px;
+      margin-bottom: 24px;
+    }
+  
+    @media (min-width: 768px) {
+      .cover-container {
+        width: 100%;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .cover-container {
+        width: 720px;
+      }
+    }
+  }
+  
diff --git a/assets/scss/main.css.scss b/assets/scss/main.css.scss
@@ -14,6 +14,7 @@
 );
 @forward "uswds";
 @forward "footer";
+@forward "not_found";
 
 $block-background-color: #fafafa;
 
