Amelioring design

2 files changed, 72 insertions, 5 deletions

diff --git a/design/design.css b/design/design.css
index 820bf29..a8a4ab7 100644
--- a/design/design.css
+++ b/design/design.css
@@ -1,6 +1,6 @@
 .headerBar {
   background-color: #111111;
-  margin-bottom: 30px;
+  margin-bottom: 40px;
   font-size: 70px;
   box-shadow: 0px 2px 2px grey;
 }
@@ -16,6 +16,51 @@
   transition: color 0.4s ease;
 }
 
+.headerBar > button:focus {
+  background-color: #222222;
+}
+
+.headerBar > button.title {
+  letter-spacing: 12px;
+  padding: 0 50px;
+}
+
+.headerBar > button.addTimer {
+  float: right;
+  padding: 0 50px;
+}
+
+.headerBar > button:hover,
+.headerBar > button:hover {
+  color: #CCCC88;
+  border-color: #CCCC88;
+}
+
+.timers {
+  text-align: center;
+  font-size: 30px;
+}
+
+.timer {
+  line-height: 80px;
+  height: 80px;
+}
+
+.headerBar > button {
+  background-color: #111111;
+  color: white;
+  height: 150px;
+  line-height: 150px;
+  font-size: 70px;
+  border: none;
+  font-family: "DejaVu Serif";
+  transition: color 0.4s ease;
+}
+
+.headerBar > button:focus {
+  background-color: #222222;
+}
+
 .headerBar > button.title {
   letter-spacing: 12px;
   padding: 0 50px;
@@ -48,11 +93,22 @@
   text-align: center;
   height: 80px;
   margin-right: 20px;
-  border-radius: 2px;
+  border-radius: 35px;
+  box-shadow: 0px 4px #AAAAAA;
+  border: 1px solid #DDDDDD;
 }
 
 .block:hover {
-  border: 1px solid #BBBBBB;
+  border: 1px solid #AAAAAA;
+}
+
+.block:active {
+  transform: translateY(2px);
+  box-shadow: 0px 2px #AAAAAA;
+}
+
+.block:focus {
+  border: 1px solid #AAAAAA;
 }
 
 .timer.isRunning > :not(.remove) {
@@ -76,7 +132,6 @@
 }
 
 .timer > button {
-  border: none;
   width: 100px;
   font-size: 30px;
 }
@@ -90,5 +145,5 @@
 }
 
 .timer:not(last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 40px;
 }
diff --git a/design/reset.css b/design/reset.css
index 419794c..d7942e1 100644
--- a/design/reset.css
+++ b/design/reset.css
@@ -58,3 +58,15 @@ button {
   cursor: pointer;
   box-sizing: border-box;
 }
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+button:focus {
+  outline: 0;
+}
+
+button:active {
+  padding: 0;
+}