fix: 404 page styling

assets/css/_page/_index.scss

@@ -12,5 +12,4 @@
 @import "_special";
 @import "_archive";
 @import "_home";
-@import "_404";
 @import "_taxonomy";

assets/css/main.css

@@ -868,6 +868,10 @@ html.dark {
   height: 2.5rem;
 }
 
+.tw-h-\[90vh\] {
+  height: 90vh;
+}
+
 .tw-h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -930,6 +934,14 @@ html.dark {
   flex-direction: column;
 }
 
+.tw-items-center {
+  align-items: center;
+}
+
+.tw-justify-center {
+  justify-content: center;
+}
+
 .tw-justify-between {
   justify-content: space-between;
 }
@@ -997,6 +1009,10 @@ html.dark {
   padding-top: 8rem;
 }
 
+.tw-text-center {
+  text-align: center;
+}
+
 .tw-align-text-bottom {
   vertical-align: text-bottom;
 }
@@ -1006,6 +1022,11 @@ html.dark {
   line-height: 2rem;
 }
 
+.tw-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .tw-uppercase {
   text-transform: uppercase;
 }

layouts/404.html

@@ -3,17 +3,15 @@
 {{- end -}}
 
 {{- define "content" -}}
-    <div class="page" id="content-404">
+    <div class="page tw-h-[90vh] tw-flex tw-flex-col tw-justify-center tw-items-center tw-text-3xl tw-text-center">
         <h1 id="error-emoji"></h1>
         <p class="error-text">
             {{- T "pageNotFoundText" -}}&nbsp;
             <button onclick="window.history.back();">{{ partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "hand-point-left") }}</button>
         </p>
     </div>
-    <script type="text/javascript">
-        (function() {
-            var emojiArray = ['\\(o_o)/', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)','(=\'X\'=)', '(>_<)', '(;-;)'];
-            document.getElementById('error-emoji').appendChild(document.createTextNode(emojiArray[Math.floor(Math.random() * emojiArray.length)]));
-        })();
+    <script>
+        const emojiArray = ['\\(o_o)/', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)','(=\'X\'=)', '(>_<)', '(;-;)'];
+        document.getElementById('error-emoji').appendChild(document.createTextNode(emojiArray[Math.floor(Math.random() * emojiArray.length)]));
     </script>
 {{- end -}}