running-tools

commit e297aed9c097caf19bf6bca64643b2d39905e55c
parent 970377bad66713d8d3b70bc42622aa78393ecab9
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Thu, 12 Aug 2021 15:01:08 -0700

Update styles

Diffstat:
M
src/App.vue
 | 
23
++++++++++++++++++++---
M
src/assets/global.css
 | 
6
++++++
M
src/components/DecimalInput.vue
 | 
7
+++++++
M
src/components/IntInput.vue
 | 
7
+++++++
M
src/components/TimeInput.vue
 | 
4
++--

5 files changed, 42 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,28 @@
 <template>
   <div id="app">
     <header>
-      <h1>running-calculator</h1>
+      <router-link class="title" to="/home">running-calculator</router-link>
     </header>
-    <router-view/>
+    <div id="route-content">
+      <router-view/>
+    </div>
   </div>
 </template>
 
-<style>
+<style scoped>
+header {
+  background-color: hsl(30, 100%, 50%);
+  padding: 0.5em;
+  text-align: center;
+}
+.title {
+  font-size: 2em;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  color: #000000;
+}
+#route-content {
+  margin: 1em;
+}
 </style>
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -4,3 +4,9 @@
   padding: 0px;
   box-sizing: border-box;
 }
+body {
+  font-family: Segoe UI, sans-serif;
+}
+input, select {
+  padding: 0.2em;
+}
diff --git a/src/components/DecimalInput.vue b/src/components/DecimalInput.vue
@@ -214,3 +214,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+input {
+  width: 5em;  /* can fit 999.99 comfortably */
+  text-align: center;
+}
+</style>
diff --git a/src/components/IntInput.vue b/src/components/IntInput.vue
@@ -208,3 +208,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+input {
+  width: 3em;  /* can fit 999 comfortably */
+  text-align: center;
+}
+</style>
diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue
@@ -89,8 +89,8 @@ export default {
 </script>
 
 <style scoped>
-input {
-  text-align: center;
+div {
+  display: inline-block;
 }
 .hours, .minutes {
   width: 2em;