f

2 files changed, 23 insertions, 132 deletions

diff --git a/www/css/index.css b/www/css/index.css
deleted file mode 100644
index 51daa79..0000000
--- a/www/css/index.css
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
-    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
-    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
-    background-image:-webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #A7A7A7),
-        color-stop(0.51, #E4E4E4)
-    );
-    background-attachment:fixed;
-    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
-    font-size:12px;
-    height:100%;
-    margin:0px;
-    padding:0px;
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    -webkit-border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
- 
-@-webkit-keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
- 
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
diff --git a/www/css/index.scss b/www/css/index.scss
index 2f246a7..81d5a1a 100644
--- a/www/css/index.scss
+++ b/www/css/index.scss
@@ -5,14 +5,19 @@ html, body, table {
 	height: 100%;
 	padding: 0;
 	margin: 0;
+
 	background-color: $red;
+	color: $yellow;
+
+	font-family: sans-serif;
+	font-weight: bolder;
 }
 
 table {
 	width: 100%;
 	border-collapse: collapse;
 	td, th {
-		border: solid 1px black;
+		border: solid 1px $yellow;
 	}
 	td {
 		text-align: center;
@@ -22,34 +27,35 @@ table {
 	thead {
 		height: 10%;
 		background-color: $yellow;
+		color: $red;
 	}
 	tbody {
 		td {
 			width: 33%;
 			height: 30%;
-			a {
-				/*display: inline-block;*/
-				display: table-cell;
+			div {
+				/* A wrapper round cell contents allowing us to use fancy
+				   table-positioning inside of the cell */
+				display: table;
 				width: 100%;
 				height: 100%;
-				text-decoration: none;
-				/* What this does is insert a 0-width, but tall, element to the left
-				   of the text, to stretch the line-height to the full
-				   height of the <a> element. *//*
-				span:before {
-					content: " ";
-					display: inline-block;
+				a {
+					display: table-cell;
 					height: 100%;
+					width: 100%;
 					vertical-align: middle;
 				}
-				span {
-					display: inline-block;
-				}*/
 			}
 		}
 	}
 }
-a:hover, a:active, a:focus {
-	text-decoration: underline;
-	background-color: $yellow;
+
+a {
+	text-decoration: none;
+	color: $yellow;
+	&:hover, &:active, &:focus {
+		text-decoration: underline;
+		background-color: $yellow;
+		color: $red;
+	}
 }