account wip

client/assets/styles/account.less

@@ -0,0 +1,58 @@
+@import 'colours.less';
+
+.account-page {
+    height: 100%;
+    display: grid;
+
+    grid-template-rows: minmax(min-content, 2fr) 1fr;
+    grid-template-columns: 1fr;
+
+    grid-template-areas:
+        "team"
+        "account";
+
+    button {
+        display: block;
+        height: 3em;
+        width: 75%;
+    }
+
+    input {
+        width: 75%;
+        height: 3em;
+        display: block;
+    }
+
+    .team {
+        grid-area: team;
+
+        /* poor man's <hr>*/
+        border-bottom: 0.1em solid #444;
+    }
+
+    .account {
+        margin: 2em 2em 0 0;
+        grid-area: account;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-gap: 0 1em;
+    }
+}
+
+.stripe-btn {
+    background: @yellow;
+    color: black;
+    border-radius: 2px;
+    border-width: 0;
+
+    &:active, &:focus, &:hover {
+        color: black;
+    }
+
+    &[disabled] {
+        border: 1px solid @yellow;
+        color: @yellow;
+        background: black;
+    }
+}

client/assets/styles/colours.less

@@ -4,6 +4,7 @@
 @blue: #3050f8;
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
+@yellow: #ffa100;
 
 @black: black;
 @gray: #222;

client/assets/styles/game.less

@@ -1,3 +1,4 @@
+@import 'colours.less';
 /* GAME */
 
 .game {

client/assets/styles/styles.less

@@ -90,6 +90,10 @@ nav {
     padding-left: 2em;
     margin-right: 2em;
     max-height: 100%;
+
+    h1 {
+        margin-bottom: 0.5em;
+    }
 }
 
 nav h2:first-child {
@@ -166,17 +170,17 @@ button, input {
     transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
-}
 
-button:hover {
-    color: whitesmoke;
-    border-color: @gray-hover;
-}
+    &:hover {
+        color: whitesmoke;
+        border-color: @gray-hover;
+    }
 
-button:focus {
-    /*colour necesary to bash skellington*/
-    color: @gray-focus;
-    border-color: @gray-focus;
+    &:focus {
+        /*colour necesary to bash skellington*/
+        color: @gray-focus;
+        border-color: @gray-focus;
+    }
 }
 
 a {
@@ -327,16 +331,12 @@ header {
     margin-bottom: 1.5em;
 }
 
-.account {
-    margin: 1em 0;
-}
-
 .header-title {
     flex: 1;
     letter-spacing: 0.05em;
 }
 
-.account-status {
+.account-info {
     display: flex;
 }
 
@@ -346,7 +346,7 @@ header {
     display: inline;
 }
 
-.account-status svg {
+.account-info svg {
     margin: 0.5em 0 0 1em;
     height: 1em;
     background-color: black;
@@ -481,6 +481,10 @@ header {
         display: grid;
         grid-template-columns: 1fr 1fr;
 
+        h1 {
+            margin-bottom: 0.5em;
+        }
+
         .list {
             letter-spacing: 0.25em;
             text-transform: uppercase;
@@ -504,19 +508,6 @@ header {
     font-size: 1.2em;
 }
 
-.stripe-btn {
-    width: 100%;
-    padding: 0 0.5em;
-    margin: 0.25em 0;
-    background: whitesmoke;
-    color: black;
-    border-radius: 2px;
-}
-
-.stripe-btn:hover {
-    color: black;
-}
-
 .play-btn {
     font-size: 150%;
 }
@@ -566,6 +557,11 @@ main .top button {
     width: 100%;
 }
 
+.credits {
+    color: @yellow;
+    font-weight: 800;
+}
+
 .timer-container {
     display: flex;
     flex: 1 1 100%;