Add a simple error code page (mostly for handling 404s)

assets/css/default.css

@@ -326,6 +326,28 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 
+/*
+ * Error page
+ */
+
+div.center-hv {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: column;
+}
+
+p#error-code, p#error-message {
+    position: relative;
+    padding: 0;
+    margin: 0;
+}
+
+p#error-code    { font-size: 8em; bottom: 3vh; right: 5vw; }
+p#error-message { font-size: 2em; bottom: 2vh; left: 3vw;  }
+
+
 /*
  * Responsive rules
  */

src/invidious/routes/errors.cr

@@ -26,7 +26,7 @@ module Invidious::Routes::ErrorRoutes
       end
     end
 
-    # TODO: create a proper 404 page
+    env.response.status_code = 404
-    haltf env, status_code: 404
+    templated "error_code"
   end
 end

src/invidious/views/error_code.ecr

@@ -0,0 +1,11 @@
+<% message = HTML.escape(env.response.status.description || "Unknown error") %>
+
+
+<% content_for "header" do %>
+<title><%= message %> - Invidious</title>
+<% end %>
+
+<div class="h-box center-hv">
+    <div><p class="error-code"><%= env.response.status.code %></p></div>
+    <div><p class="error-message"><%= message %></p></div>
+</div>