Fix dark mode styles for noscript message

ashermorgan · Sep 5, 2024 · 11b02ec · 11b02ec
1 parent f4ec775
commit 11b02ec
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -59,29 +59,10 @@
   </head>
   <body>
     <noscript>
-      <style>
-        * {
-          margin: 0px;
-          padding: 0px;
-          box-sizing: border-box;
-        }
-        body {
-          font-family: Segoe UI, sans-serif;
-          text-align: center;
-        }
-        header {
-          background-color: hsl(30, 100%, 50%);
-          padding: 0.25em;
-          font-size: 2em;
-          font-weight: bold;
-        }
-        p {
-          margin: 1em;
-          font-weight: bold;
-        }
-      </style>
-      <header>Running Tools</header>
-      <p>Running Tools requires JavaScript. Please enable it to continue.</p>
+      <header><h1>Running Tools</h1></header>
+      <p style="margin: 1em; font-weight: bold; text-align: center">
+        Running Tools requires JavaScript. Please enable it to continue.
+      </p>
     </noscript>
 
     <!-- built files will be auto injected -->

diff --git a/src/App.vue b/src/App.vue
@@ -27,7 +27,7 @@ import VueFeather from 'vue-feather';
   </div>
 </template>
 
-<style scoped>
+<style>
 header {
   background-color: var(--theme);
   padding: 0.5em;
@@ -45,7 +45,7 @@ header a {
   padding: 0em;
   color: #000000;
 }
-h1 {
+header h1 {
   grid-column: 3;
   font-size: 2em;
   font-weight: bold;
@@ -57,7 +57,7 @@ h1 {
 }
 @media only screen and (max-width: 450px) {
   /* adjust title size to fit small devices */
-  h1 {
+  header h1 {
     font-size: 7vw;
   }
 }