game controls

client/assets/styles/game.less

@@ -4,10 +4,20 @@
     overflow: hidden;
     display: grid;
     grid-template-rows: 1fr 0.5fr 1.5fr;
+    grid-template-columns: 1fr 0.15fr;
     grid-template-areas:
-        "opponent"
-        "target"
-        "player";
+        "opponent controls"
+        "target   controls"
+        "player   controls";
+
+    .controls {
+        margin: 1em 1em 0 0;
+        grid-area: controls;
+
+        button {
+            width: 100%;
+        }
+    }
 }
 
 .game .team {
@@ -413,7 +423,17 @@
 
 @media (max-width: 1000px) {
     .game {
+        grid-template-areas:
+            "opponent"
+            "target  "
+            "player  ";
+
         grid-template-rows: 1fr 0.2fr 1.5fr;
+        grid-template-columns: 1fr;
+
+        .controls {
+            display: none;
+        }
     }
 
     .game .stats div {

client/assets/styles/instance.less

@@ -4,12 +4,11 @@
     overflow-x: hidden;
     display: grid;
     grid-template-columns: 2fr minmax(min-content, 1fr);
-    grid-template-rows: 1fr min-content min-content;
+    grid-template-rows: min-content 1fr;
 
     grid-template-areas:
-        "constructs constructs"
-        "rule rule"
-        "vbox info";
+        "vbox info"
+        "constructs constructs";
 
     hr {
         grid-area: rule;
@@ -38,22 +37,18 @@
 .scoreboard {
     display: flex;
     flex-flow: column;
-    height: 100%;
+    align-items: center;
 
     table {
         flex: 1;
     }
 
     button {
-        margin: 2em 0 0 0;
         flex: 1;
-        font-size: 200%;
-        border-color: @green;
-    }
-
-    .ready {
-        background: black;
-        color: forestgreen;
+        margin-bottom: 1em;
+        width: 75%;
+        font-size: 150%;
+        line-height: 3em;
     }
 }
 
@@ -176,12 +171,12 @@
 .instance-construct {
     flex: 1;
     display: grid;
-    grid-template-rows: min-content 1fr min-content min-content min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
         "name   "
-        "avatar "
         "skills "
         "specs  "
+        "avatar "
         "stats  ";
 
     /*padding: 0.5em;*/
@@ -404,24 +399,28 @@
 
 
 .faceoff {
+    text-align: center;
     overflow: hidden;
     display: grid;
-    grid-template-rows: min-content 1fr 1fr min-content ;
+    grid-template-rows: min-content 1fr 1.5fr min-content min-content;
     grid-template-areas:
         "oppname"
         "opponent"
         "player"
-        "playername";
+        "playername"
+        "ready";
 
-    .ready {
-        background: black;
-        color: @green;
-    }
 
     h1 {
         text-align: center;
     }
 
+    button {
+        grid-area: ready;
+        justify-self: center;
+        margin-top: 1em;
+    }
+
     .opponent-name {
         margin-bottom: 1em;
         grid-area: oppname;

client/assets/styles/styles.less

@@ -81,12 +81,11 @@ figure {
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd"
-      "main main"
-      "main main";
+      "nav main"
+      "nav main";
 }
 
 nav {
-    display: none;
     grid-area: nav;
     padding-left: 2em;
     margin-right: 2em;
@@ -595,16 +594,27 @@ main .top button {
 }
 
 .ready {
-    background: forestgreen;
-    color: black;
-
-    transition-property: color, background;
+    color: forestgreen;
+    transition-property: color background;
     transition-duration: 0.5s;
     transition-timing-function: ease;
 }
 
-.ready:hover, .ready:active, .ready:focus {
-    color: black;
+button.ready {
+    width: 75%;
+    font-size: 150%;
+    line-height: 3em;
+
+    &:hover {
+        color: forestgreen;
+        border-color: forestgreen;
+    }
+
+    &:active, &:focus {
+        background: forestgreen;
+        color: black;
+        border-color: forestgreen;
+    }
 }
 
 .timer-container {

client/assets/styles/vbox.less

@@ -1,6 +1,8 @@
 @import 'colours.less';
 
 .vbox {
+    margin-bottom: 2em;
+
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;