cleans up css

package.json

@@ -15,7 +15,7 @@
     "lodash": "^4.17.4",
     "moment": "^2.19.1",
     "moment-timezone": "^0.5.13",
-    "node-sass": "^4.5.3",
+    "node-sass": "^7.0.0",
     "vue": "^2.4.2",
     "vue-momentjs": "^0.1.1",
     "vue-router": "^2.7.0",
@@ -56,7 +56,7 @@
     "portfinder": "^1.0.13",
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
+    "shelljs": "^0.8.5",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.0.4",
     "vue-style-loader": "^3.0.3",

src/components/clock/clock.css

@@ -1,7 +1,10 @@
-.container{
+* {
+  box-sizing: border-box;
+}
+
+.container {
 	margin: 10px auto;
 	display: flex;
-	flex-direction: row;
 	border: 2px solid black;
 	min-height: 500px;
 	max-width: 800px;
@@ -11,21 +14,21 @@
   text-align: center;
 }
 
+.one {
+  max-height: 50%;
+  width: 100%;
+}
+
 .two {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	border-left: 2px solid black;
 }
 
-.one {
-  max-height: 50%;
-	width: 100%;
-}
 
 .onesandtwo{
 	display: flex;
-	flex-direction: row;
 	min-height: 200px;
 }
 
@@ -38,32 +41,25 @@
 
 .box {
   border: solid;
+  opacity:0.8
 }
 
 #b1t, #b1b {
   width: 100px;
   height: 100px;
-  box-sizing: border-box;
-	opacity:0.8;
 }
 
 #b2 {
   width: 200px;
   height: 200px;
-  box-sizing: border-box;
-	opacity:0.8;
 }
 
 #b3 {
   width: 300px;
   height: 300px;
-  box-sizing: border-box;
-	opacity:0.8;
 }
 
 #b5 {
   width: 500px;
   height: 500px;
-  box-sizing: border-box;
-	opacity:0.8;
 }

src/components/clock/clock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="clock">
+  <div>
     <div class="container">
       <div class="inner">
         <div class="onesandtwo">
@@ -15,8 +15,7 @@
     </div>
     <div class="center">
       <h1>{{ now }} in {{ tzLabel }}</h1>
-      <div class="timezone-labels">
-
+      <div>
         <select v-model="tzLabel" @change="zoneUpdate">
           <option v-for="tzLabel in tzLabels" :key="tzLabel.key">{{ tzLabel }}</option>
         </select>