Improved 404 page (#7)

* improved 404 page Signed-off-by: Jonah Iden <jonah.iden@typefox.io> * grammar Co-authored-by: Miro Spönemann <miro.spoenemann@typefox.io> --------- Signed-off-by: Jonah Iden <jonah.iden@typefox.io> Co-authored-by: Miro Spönemann <miro.spoenemann@typefox.io>
eclipse-oct · Jul 8, 2024 · b4fc488 · b4fc488
1 parent f2d61be
commit b4fc488
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/hugo/layouts/404.html b/hugo/layouts/404.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+
+<head>
+    {{ partial "oct-head" . }}
+</head>
+
+<body>
+    {{ partial "oct-header" . }}
+    <main>
+        <section style="height: 100%;">
+            <div class="text-content error-text">
+                <h1>Page Not Found</h1>
+                <h2>Couldn't find what you were looking for? Maybe we can help.</h1>
+                <div class="button-bar">
+                    <a class="button" href="https://www.typefox.io/">Get Support</a>
+                    <a class="button" href="/">Back to Homepage</a>
+                </div>
+            </div>
+        </section>    
+    </main>
+    {{ partial "oct-footer" . }}
+</body>
+
+
+</html>
diff --git a/hugo/static/css/style.css b/hugo/static/css/style.css
@@ -330,4 +330,30 @@ footer a {
 
 .login-form .button {
     margin-top: 0.75rem;
-}
+}
+.error-text {
+    line-height: 2rem;
+    height: 100%;
+    margin-top: 10%;;
+}
+.error-text h1,h2 {
+    text-align: center;
+}
+
+@media screen and (max-width: 768px){
+    .button-bar {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .button-bar a {
+        margin: auto;
+    }
+}
+
+.button-bar {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+}
+