top 10

css/style.css

@@ -17,7 +17,7 @@
 * {
     color: white;
     font-family: 'Share Tech';
-    font-size: 1em;
+    font-size: 3vmin;
 }
 
 body {
@@ -27,9 +27,9 @@ body {
 }
 
 h1 {
-    font-size: 50px;
-    margin: 20px;
-    text-shadow: 3px 2px rgb(153, 145, 175);
+    font-size: 5vmin;
+    margin: 2vmin;
+    text-shadow: 3px 2px rgba(153, 145, 175, 0.5);
     text-align: center;
 }
 
@@ -56,60 +56,84 @@ a:active {
 #actions {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    grid-gap: 20px;
-    margin: 40px auto;
-    width: 550px;
+    grid-gap: 2vmin;
+    margin: 4vmin auto;
+    width: 100vmin;
     justify-items: left;
 }
 
-#play {
+#button-link {
     text-align: center;
     font-weight: bold;
-	margin: 30px;
+	margin: 3vmin;
 }
 
-#grid {
+#container {
     position: relative;
     display: grid;
-    grid-template-columns: 120px 200px 120px;
-    grid-gap: 20px;
+    width: 72vmin;
+    grid-template-columns: 18vmin 30vmin 18vmin;
+    grid-gap: 3vmin;
     margin: auto;
-    width: 480px;
 }
 
 table {
     table-layout: fixed;
     border-spacing: 0;
-    width: 0;
-    height: 0;
 }
 
-td {
+th {
+    font-weight: normal;
+}
+
+th, td {
     border: 1px solid transparent;
     padding: 0;
-    width: 20px;
-    height: 20px;
+	border-style: outset;
 }
 
 #hold {
 	grid-column: 1;
     grid-row: 1;
-    width: 120px;
-    height: 120px;
+    width: 18vmin;
+    height: 18vmin;
+    justify-self: end;
 }
 
 #matrix {
     grid-column: 2;
     grid-row: 1 / 3;
-    width: 200px;
-    height: 480px;
+    width: 30vmin;
+    height: 72vmin;
 }
 
 #next {
     grid-column: 3;
     grid-row: 1 / 3;
-    width: 120px;
-    height: 480px;
+    width: 18vmin;
+    height: 72vmin;
+}
+
+#stats {
+    grid-column: 1;
+    grid-row: 2;
+    height: 0;
+    width: 18vmin;
+    justify-self: end;
+}
+
+.name {
+    font-family: 'Share Tech';
+    text-align: left;
+    font-size: 2.5vmin;
+    color: white;
+}
+
+.value {
+    font-family: 'Share Tech Mono';
+    text-align: right;
+    font-size: 2.5vmin;
+    color: white;
 }
 
 .invisible-row {
@@ -119,17 +143,17 @@ td {
 
 .visible-row {
     background-color: transparent;
-    border-color: rgba(128, 128, 128, 0.5);
+    border-color: rgba(128, 128, 128, 0.3);
     border-style: inset;
 }
 
 .tetromino-I {
-    background-color: rgb(153, 255, 255);
+    background-color: rgb(153, 255, 230);
     border-color: white;
 }
 
 .tetromino-J {
-    background-color: rgb(153, 255, 255);
+    background-color: rgb(153, 204, 255);
     border-color: white;
 }
 
@@ -179,31 +203,29 @@ td {
     border-style: solid;
 }
 
-#stats {
-    grid-column: 1;
-    grid-row: 2;
-    height: 0;
-    width: 120px;
-}
-
-.stat-label {
-    font-family: 'Share Tech';
-    text-align: left;
-}
-
-.stat-value {
-    font-family: 'Share Tech Mono';
-    text-align: right;
-}
-
 #message {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
-    font-size: 19px;
+    font-size: 3vmin;
     text-shadow: 1px 1px black;
     text-align: center;
     font-weight: bold;
+}
+
+#leaderboard {
+    min-width: 25%;
+    margin: auto;
+    text-align: center;
+    border-top: 1px solid white;
+    caption-side: top;
+}
+
+.player {
+    font-family: 'Share Tech';
+    text-align: center;
+    font-size: 2.5vmin;
+    color: white;
 }