Add 404 page

_redirects

@@ -0,0 +1 @@
+/* /404.html 404

src/404.md

@@ -0,0 +1,7 @@
+---
+title: "Oops! Page not found"
+permalink: "/404.html"
+layout: "layout/404.html"
+---
+
+<p class="lead">It seems that this URL doesn’t exist. Maybe you misspelled it, or it is removed.</p>

src/_includes/layout/404.html

@@ -0,0 +1,23 @@
+{% extends "layout/base.html" %}
+
+{% block content %}
+    <div class="l-404">
+        <div class="container">
+            <div class="l-404__inner">
+                <img src="/img/not-found.svg" class="l-404__image" alt="">
+                <div class="l-404__caption">
+                    <h1 class="l-404__title">{{ title }}</h1>
+                    <div class="post-content">
+                        {{ content | safe }}
+                    </div>
+                  <a href="/" class="btn btn--rounded btn--lg btn--primary">Go home</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% set gettingStartedSettings = {
+        "classes": "l-getting-started--border-block-start"
+    } %}
+    {% include "../partial/getting-started.html" %}
+{% endblock %}

src/css/main.css

@@ -3737,6 +3737,37 @@ pre[class*=language-] {
   }
 }
 
+.l-404 {
+  border-block-end: 1px solid var(--spruce-base-color-border);
+  padding-block: var(--spruce-section-gap);
+}
+.l-404__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  text-align: center;
+}
+.l-404__image {
+  margin-inline: auto;
+  max-inline-size: 12rem;
+}
+.l-404__caption {
+  margin-inline: auto;
+  max-inline-size: 40rem;
+  text-align: center;
+  text-wrap: balance;
+}
+.l-404__caption > * {
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+.l-404__caption > * + * {
+  margin-block-start: 1.5rem;
+}
+.l-404__title {
+  font-size: clamp(2.275rem, 5vw + 1rem, 3.5rem);
+}
+
 .btn--rounded {
   border-radius: var(--doc-border-radius-md);
 }

src/scss/layout/_404.scss

@@ -0,0 +1,30 @@
+@use 'sprucecss/scss/spruce' as *;
+
+.l-404 {
+  border-block-end: 1px solid color('border');
+  padding-block: get-css-variable(--section-gap);
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: spacer('m');
+    text-align: center;
+  }
+
+  &__image {
+    margin-inline: auto;
+    max-inline-size: 12rem;
+  }
+
+  &__caption {
+    @include layout-stack('m');
+    margin-inline: auto;
+    max-inline-size: 40rem;
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  &__title {
+    font-size: responsive-font-size(3.5rem, 35, '5vw + 1rem');
+  }
+}

src/scss/layout/_index.scss

@@ -7,3 +7,4 @@
 @forward 'template';
 @forward 'color';
 @forward 'templates';
+@forward '404';