1 files changed, 87 insertions, 1 deletions

diff --git a/public/style.css b/public/style.css
index 25b35cc..f2113e0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -6,7 +6,13 @@
   transition-timing-function: ease-in-out;
 }
 
+html, body {
+  height: 100%;
+}
+
 body {
+  display: flex;
+  flex-direction: column;
   text-align: center;
 
           user-select: none;
@@ -16,21 +22,101 @@ body {
 }
 
 h1 {
+  padding: .3em;
   text-transform: uppercase;
+  font-size: 6vw;
 }
 
 #help-btn { float: left; }
 #settings-btn, #stats-btn { float: right; }
 
+#board {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#board table {
+  table-layout: fixed;
+  border-spacing: .5vw;
+  width: 55%;
+}
+
 #keyboard {
   width: 100%;
   table-layout: fixed;
   border-spacing: 1vw;
 }
 
-td[data-key] {
+#board td, td[data-key] {
   background: #eee;
   padding: 0.5em;
   font-size: 4vw;
   border-radius: 2vw;
 }
+
+td[data-key] { cursor: pointer }
+
+td[data-key=enter]::after,
+td[data-key=bspc]::after {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 0;
+  height: 0;
+  border: 1.5vw solid transparent;
+}
+
+td[data-key=enter]::after {
+  border-left: 2.4vw solid #000;
+  border-right-width: 0;
+}
+
+td[data-key=bspc]::after {
+  border-right: 2.4vw solid #000;
+  border-left-width: 0;
+}
+
+td[data-key]:hover { box-shadow: 0 0 0 3px #0002; }
+td.absent  { background: #aaa }
+td.present { background: #f9c74f }
+td.found   { background: #90be6d }
+
+footer p {
+  padding: 0 0 .6em;
+  font-size: 3vw;
+}
+
+@media (min-width:701px) {
+  h1 { font-size: 42px }
+
+  #board table {
+    width: 385px;
+    border-spacing: 3.5px;
+  }
+
+  #keyboard {
+    width: 700px;
+    margin: 0 auto;
+    border-spacing: 7px;
+  }
+  #board td, td[data-key] {
+    font-size: 28px;
+    border-radius: 14px;
+  }
+  td[data-key=enter]::after,
+  td[data-key=bspc]::after {
+    border: 10.5px solid transparent;
+  }
+  td[data-key=enter]::after {
+    border-left: 17px solid #000;
+    border-right-width: 0;
+  }
+  td[data-key=bspc]::after {
+    border-right: 17px solid #000;
+    border-left-width: 0;
+  }
+
+  footer p { font-size: 21px }
+}