Fix CSS bug and remove duplicate styles

ashermorgan · Jun 13, 2024 · adbca08 · adbca08
1 parent 8e3828a
commit adbca08
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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 {