running-tools

A collection of tools for runners and their coaches
git clone https://git.ashermorgan.net/running-tools/
Log | Files | Refs | README
commit 11b02ecbe7dd41a513466091f4b9086af069315e
parent f4ec775d24bb61edbd31dfefcd914880945d8316
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Thu,  5 Sep 2024 13:10:41 -0700

Fix dark mode styles for noscript message

Diffstat:

Mindex.html | 27++++-----------------------


Msrc/App.vue | 6+++---


2 files changed, 7 insertions(+), 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;
   }
 }