From 0beb07e23914e26854607e7e6c2e403805b7ab8b Mon Sep 17 00:00:00 2001
From: Jeff Wong <awole20@gmail.com>
Date: Wed, 1 Nov 2023 12:15:48 -0700
Subject: [PATCH] styling

---
 html/error_page.html | 52 +++++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 22 deletions(-)
diff --git a/html/error_page.html b/html/error_page.html
index eb9ba36..58a7e5b 100644
--- a/html/error_page.html
+++ b/html/error_page.html
@@ -6,20 +6,26 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <style>
      :root {
-       --background-color: #dddddd;
-       --color: #222222;
-       --border-color: #bbbbbb;
+       --background-color: #ffffff;
+       --background-color-base: #f8f8f8;
+       --color: #434343;
+       --border-color: #e9e9e9;
        @media (prefers-color-scheme: dark) {
          --color: #dddddd;
          --border-color: #444444;
+         --background-color-base: #282828;
          --background-color: #222222;
        }
      }
      body {
+       margin: 8px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
-       background-color: var(--background-color);
        color: var(--color);
+       background-color: var(--background-color-base);
+     }
+     #page {
+       height: 100vh;
        background-image: url(error-page-bg.png)
      }
      main {
@@ -27,7 +33,7 @@
        margin-inline: auto;
        background-color: var(--background-color);
        box-shadow: 0 4px 19px 6px rgba(0,0,0,.05);
-       padding: 1em;
+       padding: 2em;
        border: 1px solid var(--border-color);
        border-radius: 8px;
      }
@@ -66,22 +72,24 @@
     </style>
   </head>
   <body>
-    <main>
-      <picture>
-        <source srcset="error-page-dark.png" media="(prefers-color-scheme: dark)"/>
-        <img src="error-page.png"/>
-      </picture>
-      <h1>Site offline</h1>
-      <p>
-        Please wait while Discourse is being configured.
-        This page will refresh when everything is ready.
-      </p>
-      <div id="loading">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </main>
+    <div id="page">
+      <main>
+        <picture>
+          <source srcset="error-page-dark.png" media="(prefers-color-scheme: dark)"/>
+          <img src="error-page.png"/>
+        </picture>
+        <h1>Site offline</h1>
+        <p>
+          Please wait while Discourse is being configured.
+          This page will refresh when everything is ready.
+        </p>
+        <div id="loading">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </main>
+    </div>
   </body>
 </html>
