commit b7ee3e69737c9d9824182ae7fc3a5ce2fd577b8b
parent d3917d0ae528d5deeeaf188bce6ca90f8fe50c69
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date: Fri, 6 Sep 2024 09:35:17 -0700
Add dark mode styles for 404.html
Diffstat:
3 files changed, 35 insertions(+), 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 */
