add responsive

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <div class="pause"></div>
     <to-do-list></to-do-list>
     <div class="aside">
       <div class="ytb" v-show="displayYoutube">
@@ -16,6 +15,7 @@
 
 <script>
 import ToDoList from "@/components/ToDoList";
+
 export default {
   name: 'App',
   components: {
@@ -43,9 +43,8 @@ a {
 }
 
 body {
-  background: -webkit-linear-gradient(  0deg, rgba(255, 253, 226, 1) 0%, rgba(255, 228, 164, 1) 50%, rgba(255, 217, 153, 1) 100%);
+  background: #fdde95;
 }
-
 footer {
   text-align: center;
   margin-top: 16px;

src/components/Pomodoro.vue

@@ -63,6 +63,7 @@ export default {
       }
       if (!this.isRestingTime) {
         this.enableButton("pause");
+        this.enableButton("reset");
       }
       this.disableButton("start");
       let all = document.querySelectorAll("#presetTime button");
@@ -121,7 +122,7 @@ export default {
           }
           this.prettyTime()
           this.countDownTimer()
-        }, 1000)
+        }, 1)
       }
     },
     changeDots() {
@@ -172,6 +173,7 @@ export default {
 #startStop > button{
   font-size: 32px;
   width: 120px;
+  text-align: center;
 }
 
 #params {
@@ -182,6 +184,7 @@ export default {
   margin: 8px;
   font-size: 24px;
   width: 62px;
+  text-align: center;
 }
 
 #seconds {
@@ -193,10 +196,29 @@ export default {
   width: 10vw;
 }
 
+@media (max-width: 490px) {
+  #message {
+    display: none;
+  }
+}
+
+@media (min-width: 490px) {
   #message {
     font-size: 1.6rem;
   }
+}
 
+@media (max-width: 390px) {
+  .dot {
+    display: none;
+  }
+
+  .active {
+    display: none;
+  }
+}
+
+@media (min-width: 390px) {
   .dot {
     height: 25px;
     width: 25px;
@@ -214,5 +236,6 @@ export default {
     margin: 12px 4px 12px 4px;
     display: inline-block;
   }
+}
 
 </style>

src/components/ToDoList.vue

@@ -62,7 +62,8 @@ export default {
   }
 
   #pomodoro {
-    width: 60%;
+    width: 50%;
+    margin-right: 32px;
   }
 
   #todolist {