From 2d3bb8acd02cd11a5994fb6e86cda47ad42e5342 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Sat, 17 Aug 2024 13:21:42 +0100
Subject: [PATCH] Add styles to noscript message

---
 thallium-frontend/index.html | 39 +++++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/thallium-frontend/index.html b/thallium-frontend/index.html
index 5ae088c..ed77f19 100644
--- a/thallium-frontend/index.html
+++ b/thallium-frontend/index.html
@@ -12,9 +12,42 @@
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
   <noscript>
-    <h1>Hi, we've noticed you're browsing with JavaScript disabled.</h1>
-    <p>We are sorry, but we do not support this at the time.</p>
-    <p>Please enable JavaScript to use our site.</p>
+    <div class="noscript-container">
+      <h1>Hi, we've noticed you're browsing with JavaScript disabled.</h1>
+      <p>We are sorry, but we do not support this at the time.</p>
+      <p>Please enable JavaScript to use our site.</p>
+    </div>
+    <style>
+      body {
+        font-family: "Source Code Pro", monospace;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+      }
+
+      .noscript-container {
+        margin: 0 1rem;
+      }
+
+      h1 {
+        font-size: 2rem;
+        margin: 0;
+      }
+
+      p {
+        font-size: 1rem;
+        margin: 0;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #333;
+          color: #fff;
+        }
+      }
+    </style>
   </noscript>
 </body>