Add dark mode styles for 404.html

ashermorgan · Sep 6, 2024 · b7ee3e6 · b7ee3e6
1 parent d3917d0
commit b7ee3e6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 53 deletions.
diff --git a/404.html b/404.html
@@ -9,40 +9,20 @@
 
     <title>404 Not Found - Running Tools</title>
     <meta name="description" content="A collection of tools for runners and their coaches that calculate splits, predict race times, convert units, and more">
-
-    <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;
-      }
-      main {
-        margin: 1em;
-      }
-      h1 {
-        font-size: 1.5em;
-      }
-      p {
-        margin-top: 0.5em;
-      }
-    </style>
   </head>
 
   <body>
-    <header>Running Tools</header>
-    <main>
-      <h1>404 Not Found</h1>
-      <p><a href="%BASE_URL%">Return home</a></p>
+    <header>
+      <h1>Running Tools</h1>
+    </header>
+    <main style="margin: 1em; text-align: center">
+      <h2 style="font-size: 1.5em">404 Not Found</h2>
+      <p style="margin-top: 0.5em">
+        <a href="%BASE_URL%">Return home</a>
+      </p>
     </main>
+
+    <!-- no #app div, so styles will be loaded but app will not be mounted -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -27,38 +27,18 @@ import VueFeather from 'vue-feather';
   </div>
 </template>
 
-<style>
-header {
-  background-color: var(--theme);
-  padding: 0.5em;
-  display: grid;
-  grid-template-columns: 2em 1fr auto 1fr 2em;
-  grid-template-rows: auto;
-}
+<style scoped>
 header a {
   grid-column: 1;
   margin: auto;
   height: 2em;
   width: 2em;
 }
-::v-deep(.feather-chevron-left) {
+header ::v-deep(.feather-chevron-left) {
   padding: 0em;
   color: #000000;
 }
-header h1 {
-  grid-column: 3;
-  font-size: 2em;
-  font-weight: bold;
-  text-decoration: none;
-  color: #000000;
-}
 #route-content {
   margin: 1em;
 }
-@media only screen and (max-width: 450px) {
-  /* adjust title size to fit small devices */
-  header h1 {
-    font-size: 7vw;
-  }
-}
 </style>
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -122,6 +122,28 @@ input:invalid:not(:focus) {
   border: 1px solid var(--error);
 }
 
+/* basic page header style */
+header {
+  background-color: var(--theme);
+  padding: 0.5em;
+  display: grid;
+  grid-template-columns: 2em 1fr auto 1fr 2em;
+  grid-template-rows: auto;
+}
+header h1 {
+  grid-column: 3;
+  font-size: 2em;
+  font-weight: bold;
+  text-decoration: none;
+  color: #000000;
+}
+@media only screen and (max-width: 450px) {
+  /* adjust title size to fit small devices */
+  header h1 {
+    font-size: 7vw;
+  }
+}
+
 /* light/default theme */
 :root {
   /* The theme color of the app */