add 404 page (#1690)

* add 404 page * apply suggestions from code review
expressjs · Jan 6, 2025 · c2c8ccf · c2c8ccf
1 parent 11efa75
commit c2c8ccf
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/404.md b/404.md
@@ -0,0 +1,12 @@
+---
+layout: 404
+title: Page not found
+description: We couldn’t find the page you’re looking for.
+lang: en
+---
+
+# {{ page.title }}
+
+We couldn’t find the page you’re looking for. Check the address or [head back home](/).
+
+If this is a mistake, [let us know](https://github.com/expressjs/expressjs.com/issues/new/), and we will try to fix it!
diff --git a/_layouts/404.html b/_layouts/404.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  {% include head.html %}
+
+  {% if page.lang == 'en' %}
+  <body class="en-doc">
+  {% else %}
+  <body class="non-en-doc">
+  {% endif %}
+    {% include header/header-{{ page.lang }}.html %}
+    <div id="overlay"></div>
+    <main class="content-404">
+      {{ content }}
+    </main>
+    {% include footer/footer-{{ page.lang }}.html %}
+  </body>
+</html>
diff --git a/css/style.css b/css/style.css
@@ -872,6 +872,19 @@ h2 a {
   border-color: #333;
 }
 
+.content-404 {
+  height: 70vh;
+  padding: 153px 32px 7%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.content-404 p {
+  font-size: 16px;
+}
+
 /* search-bar desktop re-sizing */
 @media all and (min-width: 950px) {
   .algolia-autocomplete {