From a4a8db2b8da6de9f0bd2d5ebf6237a6666eed3b6 Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jdb@jdb-labs.com>
Date: Fri, 28 Oct 2016 22:43:16 -0500
Subject: [PATCH] Styling scorekeeper.

---
 scorekeeper/scorekeep.html | 76 ++++++++++++++++++++++++++++----------
 1 file changed, 57 insertions(+), 19 deletions(-)
diff --git a/scorekeeper/scorekeep.html b/scorekeeper/scorekeep.html
index 8234a2b..450e320 100644
--- a/scorekeeper/scorekeep.html
+++ b/scorekeeper/scorekeep.html
@@ -3,35 +3,69 @@
   <head>
     <title>Scrabble Score</title>
     <style>
+* { box-sizing: border-box; }
+
 html {
   background-color: #eee;
 }
 
+body {
+  margin: 0;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 div.score {
+  color: white;
   display: inline-block;
   font-family: monospace, sans-serif;
   font-weight: bold;
+  margin: 0;
   position: relative;
   text-align: center;
-  width: 49%;
+  vertical-align: center;
+  width: 50%;
+  height: 50%;
 }
 
 div.score span { font-size: 20vw; }
 
-.score.p1 { color: darkblue; }
-.score.p2 { color: darkred; }
-.score.p3 { color: darkgreen; }
-.score.p4 { color: black; }
+.score.p1 {
+  background-color: darkblue;
+  border: solid 1vw darkblue;
+  border-right: dashed 1vw darkred;
+}
+.score.p2 {
+  background-color: darkred;
+  border: solid 1vw darkred;
+  border-bottom: dashed black 1vw;
+}
+.score.p3 {
+  background-color: darkgreen;
+  border: solid 1vw darkgreen;
+  border-top: dashed darkblue 1vw;
+}
+.score.p4 {
+  background-color: black;
+  border: solid 1vw black;
+  border-left: dashed darkgreen 1vw;
+}
 
 input {
+  background: transparent;
   border: none;
   border-bottom: solid thin black;
+  color: white;
   font-family: monospace;
-  font-size: 4vw;
+  font-size: 3vw;
+  opacity: 0.5;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 24%;
+  right: 2vw;
+  bottom: 1vw;
+  text-align: right;
 }
     </style>
 
@@ -48,19 +82,23 @@ function updateScore(event, player) {
   <body>
     <div class="p1 score">
       <span class>0</span>
-      <input onkeypress="updateScore(event, 'p1')" name=p1 type=number />
-    </div>
-    <div class="p2 score">
+      <input name=p1 type=number placeholder="add points"
+        onkeypress="updateScore(event, 'p1')" />
+    </div><!--
+    --><div class="p2 score">
       <span class>0</span>
-      <input onkeypress="updateScore(event, 'p2')" name=p2 type=number />
-    </div>
-    <div class="p3 score">
+      <input name=p2 type=number placeholder="add points"
+        onkeypress="updateScore(event, 'p2')" />
+    </div><!--
+    --><div class="p3 score">
       <span class>0</span>
-      <input onkeypress="updateScore(event, 'p3')" name=p3 type=number />
-    </div>
-    <div class="p4 score">
+      <input name=p3 type=number placeholder="add points"
+        onkeypress="updateScore(event, 'p3')" />
+    </div><!--
+    --><div class="p4 score">
       <span class>0</span>
-      <input onkeypress="updateScore(event, 'p4')" name=p4 type=number />
+      <input name=p4 type=number placeholder="add points"
+        onkeypress="updateScore(event, 'p4')" />
     </div>
   </body>
 </html>
