💄 (app) better responsive design

src/App.vue

@@ -32,6 +32,6 @@
 }
 
 svg {
-  margin: 1rem;
+  margin: 0.1rem;
 }
 </style>

src/components/DevSession.vue

@@ -64,6 +64,7 @@ export default defineComponent({
 .dev-session {
   h2 {
     font-size: 24pt;
+    margin-bottom: 0;
   }
 
   input {

src/components/IntervalInput.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
 import { useInterval } from '../hooks/useInterval'
 
 export default defineComponent({
@@ -48,8 +48,22 @@ export default defineComponent({
   props: {
     editable: { type: Boolean, required: true }
   },
-  setup() {
-    const { minus, plus, label } = useInterval()
+  setup(props) {
+    const { interval, minInterval, minus, plus } = useInterval()
+
+    const label = computed(() => {
+      if (interval.value > 1) {
+        return props.editable
+          ? `${interval.value} minutes`
+          : `${interval.value} minute session`
+      }
+
+      if (interval.value === minInterval) {
+        return props.editable ? '30 seconds' : '30 second session'
+      }
+
+      return `${interval.value} minute`
+    })
 
     return {
       minus,

src/components/ZoneMusic.vue

@@ -65,6 +65,9 @@ label[data-pm-holder] {
     }
   }
 }
+.pm-field {
+  margin-bottom: 0;
+}
 .disabled {
   color: desaturate($color, 70%);
 }

src/hooks/useInterval.ts

@@ -1,7 +1,6 @@
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
-import { computed } from '@vue/composition-api'
 
 const MIN_INTERVAL = 0.5
 
@@ -19,22 +18,10 @@ export const useInterval = () => {
     setInterval(Math.floor(interval.value + 1))
   }
 
-  const label = computed(() => {
-    if (interval.value > 1) {
-      return `${interval.value} minutes`
-    }
-
-    if (interval.value === MIN_INTERVAL) {
-      return '30 seconds'
-    }
-
-    return `${interval.value} minute`
-  })
-
   return {
     interval,
+    minInterval: MIN_INTERVAL,
     minus,
-    plus,
-    label
+    plus
   }
 }

src/styles/app.scss

@@ -45,3 +45,7 @@ button {
     margin: 0.5rem;
   }
 }
+
+a {
+  color: white;
+}

src/views/Home.vue

@@ -76,6 +76,15 @@
       @play="start"
       @pause="pause"
     />
+    <footer>
+      chill with
+      <a
+        href="https://www.youtube.com/watch?v=5qap5aO4i9A"
+        target="_blank"
+        rel="noopener noreferrer"
+        >chilled cow</a
+      >
+    </footer>
   </div>
 </template>
 
@@ -120,6 +129,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables';
+
 .home {
   display: flex;
   flex: 1;
@@ -144,4 +155,10 @@ export default defineComponent({
 .music {
   margin: 1rem 0;
 }
+
+footer {
+  justify-self: flex-end;
+  font-family: $serif-font-family;
+  font-style: italic;
+}
 </style>