running-tools

commit adbca08c2b3d0ec5d085abcb63162e4165f37f1a
parent 8e3828aed14f5cf61c19c8941103ca7e06c19739
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Thu, 13 Jun 2024 15:29:24 -0700

Fix CSS bug and remove duplicate styles

Diffstat:
M
src/assets/target-calculator.css
 | 
2
+-
M
src/views/SplitCalculator.vue
 | 
28
+++++++++++++---------------

2 files changed, 14 insertions(+), 16 deletions(-)
diff --git a/src/assets/target-calculator.css b/src/assets/target-calculator.css
@@ -10,7 +10,7 @@ h2 {
   font-size: 1.3em;
   margin-bottom: 0.2em;
 }
-* + h2, summary h2 {
+h2:not(:first-child), summary h2 {
   margin-top: 0.5em;
 }
 
diff --git a/src/views/SplitCalculator.vue b/src/views/SplitCalculator.vue
@@ -1,17 +1,19 @@
 <template>
   <div class="calculator">
-    <div class="default-units">
-      Default units:
-      <select v-model="defaultUnitSystem" aria-label="Default units">
-        <option value="imperial">Miles</option>
-        <option value="metric">Kilometers</option>
-      </select>
-    </div>
+    <div class="input">
+      <div class="default-units">
+        Default units:
+        <select v-model="defaultUnitSystem" aria-label="Default units">
+          <option value="imperial">Miles</option>
+          <option value="metric">Kilometers</option>
+        </select>
+      </div>
 
-    <div class="target-set">
-      Target Set:
-      <target-set-selector v-model:selectedTargetSet="selectedTargetSet" setType="split"
-        v-model:targetSets="targetSets" :default-unit-system="defaultUnitSystem"/>
+      <div class="target-set">
+        Target Set:
+        <target-set-selector v-model:selectedTargetSet="selectedTargetSet" setType="split"
+          v-model:targetSets="targetSets" :default-unit-system="defaultUnitSystem"/>
+      </div>
     </div>
 
     <div class="output">
@@ -70,10 +72,6 @@ const targetSet = computed({
 <style scoped>
 @import '@/assets/target-calculator.css';
 
-.target-set, .default-units {
-  margin-bottom: 5px;
-}
-
 /* Widen default calculator output */
 @media only screen and (min-width: 501px) {
   .output {