From d6f82c03a6d36cb4c9f923f542a673785286ca37 Mon Sep 17 00:00:00 2001 From: Kenji Hirabayashi Date: Tue, 1 Oct 2019 17:38:26 -0500 Subject: [PATCH 1/4] cleans up css --- src/components/clock/clock.css | 26 +++++++++++--------------- src/components/clock/clock.vue | 5 ++--- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/clock/clock.css b/src/components/clock/clock.css index dc52359..0aa28b8 100644 --- a/src/components/clock/clock.css +++ b/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,6 +14,11 @@ text-align: center; } +.one { + max-height: 50%; + width: 100%; +} + .two { display: flex; flex-direction: column; @@ -18,14 +26,9 @@ 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; } diff --git a/src/components/clock/clock.vue b/src/components/clock/clock.vue index a17b3b9..ec9a87d 100644 --- a/src/components/clock/clock.vue +++ b/src/components/clock/clock.vue @@ -1,5 +1,5 @@