UI Tweaks

src/App.vue

@@ -16,9 +16,6 @@ export default {
 </script>
 
 <style>
-body {
-  margin: 0;
-}
 
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -26,12 +23,13 @@ body {
   -moz-osx-font-smoothing: grayscale;
   height:100%;
   width:100%;
+  margin: 0;
   color: #2c3e50;
 }
 
 main {
   text-align: center;
-  margin-top: 40px;
+  /* margin-top: 40px; */
 }
 
 header {

src/components/Counter.vue

@@ -45,8 +45,8 @@ export default {
       }
     },
     reset () {
-      this.countCurrent = 0;
-      this.limitReached = false;
+      this.countCurrent = 0
+      this.limitReached = false
     }
   }
 }
@@ -56,35 +56,38 @@ export default {
 <style>
 
 .counter {
-    margin: 0;
-    width: 100%;
-    height: 100%;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .count-top {
   width:100%;
-  min-height:20%;
+  height: 2em;
   font-size: 3em;
   display: flex;
+  flex-direction: row;
   justify-content: flex-start;
   vertical-align: bottom;
 }
 .upper-label {
   flex: 0 0 auto;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   align-self: flex-end;
-  margin-bottom: 0.55em;
+  margin: auto;
 }
 .upper-input {
   font-size: 1em;
-  width: 3em;
+  width: 2em;
   flex: 1 1 auto;
-  margin: 0.2em;
+  margin: auto;
+  vertical-align: text-bottom;
 }
-
 .count-bottom {
   width:100%;
-  min-height:70%;
+  height:100%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -94,28 +97,12 @@ export default {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  margin: auto;
 }
 .value {
   font-family: -apple-system-tall-body, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  flex: 0 0 auto;
+  flex: auto;
   font-size: 10em;
 }
 
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #35495E;
-}
 </style>