From f11520855f2cced65a0b068e9cd1b626e9b7be7d Mon Sep 17 00:00:00 2001
From: David Martin <dmartin.tech@outlook.com>
Date: Sat, 24 Oct 2020 17:03:10 -0500
Subject: [PATCH 1/3] Fixed certain keymaps in matrix mode

Instead of using id's to select keys to hide, use nth-child so it's universal
---
 public/css/style.scss | 165 +++++++++++++++++++++---------------------
 1 file changed, 83 insertions(+), 82 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 999ac5c06..5fcc62ffa 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -4,7 +4,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
 
 :root {
   --roundness: 0.25rem;
@@ -481,8 +481,8 @@ a:hover {
       color: var(--sub-color);
     }
 
-    .tip{
-      font-size: .75rem;
+    .tip {
+      font-size: 0.75rem;
       color: var(--sub-color);
     }
   }
@@ -812,16 +812,16 @@ a:hover {
   align-items: center;
   z-index: 999;
   grid-template-rows: auto 1fr auto;
-  &.wide125{
+  &.wide125 {
     max-width: 1250px;
   }
-  &.wide150{
+  &.wide150 {
     max-width: 1500px;
   }
-  &.wide200{
+  &.wide200 {
     max-width: 2000px;
   }
-  &.widemax{
+  &.widemax {
     max-width: unset;
   }
 }
@@ -839,7 +839,7 @@ a:hover {
   transform-origin: top left;
 }
 
-#paceCaret{
+#paceCaret {
   height: 1.5rem;
   // background: var(--sub-color);
   background: var(--sub-color);
@@ -851,8 +851,8 @@ a:hover {
   width: 2px;
 }
 
-#caret, #paceCaret{
-
+#caret,
+#paceCaret {
   &.off {
     width: 0;
   }
@@ -908,7 +908,7 @@ a:hover {
   &.size2 {
     transform: scale(1.9);
   }
-  
+
   &.size3 {
     transform: scale(2.8);
   }
@@ -1158,31 +1158,31 @@ key {
     margin-bottom: 1rem;
   }
 
-  .leftright{
+  .leftright {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 1rem;
-    .left{
+    .left {
       text-align: left;
     }
-    .right{
+    .right {
       text-align: right;
       // display: flex;
       // gap: 1rem;
       // align-items: center;
       // justify-content: flex-end;
-      .current-theme{
-        transition: .25s;
+      .current-theme {
+        transition: 0.25s;
         text-decoration: none;
-        &:hover{
+        &:hover {
           color: var(--main-color);
           cursor: pointer;
         }
       }
-      .discordLink{
-        transition: .25s;
+      .discordLink {
+        transition: 0.25s;
         text-decoration: none;
-        &:hover{
+        &:hover {
           color: var(--main-color);
           cursor: pointer;
         }
@@ -1192,7 +1192,7 @@ key {
 
   .version {
     opacity: 0;
-    transition: .25s;
+    transition: 0.25s;
     &:hover {
       cursor: pointer;
       color: var(--main-color);
@@ -1215,10 +1215,10 @@ key {
   grid-template-areas:
     "stats chart"
     "morestats morestats";
-    // "wordsHistory wordsHistory"
-    // "buttons buttons"
-    // "login login"
-    // "ssw ssw";
+  // "wordsHistory wordsHistory"
+  // "buttons buttons"
+  // "login login"
+  // "ssw ssw";
 
   .buttons {
     display: grid;
@@ -1229,16 +1229,16 @@ key {
     grid-column: 1/3;
   }
 
-  .ssWatermark{
+  .ssWatermark {
     // grid-area: ssw;
     grid-column: 1/3;
   }
 
-  #resultWordsHistory{
+  #resultWordsHistory {
     // grid-area: wordsHistory;
     color: var(--sub-color);
     grid-column: 1/3;
-    .words{
+    .words {
       display: flex;
       flex-wrap: wrap;
       width: 100%;
@@ -1327,15 +1327,14 @@ key {
         line-height: 2rem;
       }
 
-      &.time{
-        .afk{
+      &.time {
+        .afk {
           color: var(--sub-color);
-          font-size: .75rem;
-          line-height: .75rem;
+          font-size: 0.75rem;
+          line-height: 0.75rem;
           margin-left: 0.2rem;
         }
       }
-
     }
 
     // .infoAndTags {
@@ -1416,7 +1415,7 @@ key {
       .bottom {
         font-size: 1rem;
         line-height: 1rem;
-        .lbChange .fas{
+        .lbChange .fas {
           margin-right: 0.15rem;
         }
       }
@@ -1618,7 +1617,7 @@ key {
   }
 }
 
-#restartTestButton{
+#restartTestButton {
   margin: 0 auto;
   margin-top: 1rem;
 }
@@ -1728,7 +1727,7 @@ key {
   /*   margin-bottom: 1px; */
   border-bottom: 2px solid transparent;
   line-height: 1rem;
-  letter{
+  letter {
     display: inline;
   }
 
@@ -1742,7 +1741,7 @@ key {
     padding: 0.5rem;
     /* left: .5rem; */
     margin-left: -0.5rem;
-    margin-top: -1.5rem; 
+    margin-top: -1.5rem;
     border-radius: var(--roundness);
     // box-shadow: 0 0 10px rgba(0,0,0,.25);
     transition: 0.25s;
@@ -1779,9 +1778,9 @@ key {
   border-bottom: 2px solid var(--error-color);
   text-shadow: 1px 0px 0px var(--bg-color),
     // 2px 0px 0px var(--bg-color),
-      -1px 0px 0px var(--bg-color),
+    -1px 0px 0px var(--bg-color),
     // -2px 0px 0px var(--bg-color),
-      0px 1px 0px var(--bg-color),
+    0px 1px 0px var(--bg-color),
     1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
 }
 
@@ -1803,7 +1802,7 @@ key {
 
 .word letter.incorrect {
   color: var(--error-color);
-  position:relative;
+  position: relative;
 }
 
 .word letter.incorrect hint {
@@ -1811,11 +1810,11 @@ key {
   bottom: -1em;
   color: var(--text-color);
   line-height: initial;
-  font-size: .75em;
+  font-size: 0.75em;
   text-shadow: none;
   padding: 1px;
   left: 0;
-  opacity: .5;
+  opacity: 0.5;
   text-align: center;
   width: 100%;
 }
@@ -2034,10 +2033,10 @@ key {
       }
     }
 
-    &.paceCaret{
-      .customPaceCaretSpeed{
+    &.paceCaret {
+      .customPaceCaretSpeed {
         width: 4rem;
-        padding: 0 .5rem;
+        padding: 0 0.5rem;
       }
     }
 
@@ -2070,8 +2069,7 @@ key {
     }
 
     &.discordIntegration {
-
-      #unlinkDiscordButton{
+      #unlinkDiscordButton {
         margin-top: 0.5rem;
         font-size: 0.75rem;
       }
@@ -2480,12 +2478,12 @@ key {
         display: grid;
         grid-template-columns: auto 300px;
         align-items: center;
-        .text{
+        .text {
           height: min-content;
         }
-        .buttons{
+        .buttons {
           display: grid;
-          gap: .5rem;
+          gap: 0.5rem;
         }
       }
       .chartPreloader {
@@ -2750,7 +2748,7 @@ key {
     .pageSettings .section.keymapStyle .buttons {
       grid-template-columns: 1fr 1fr 1fr;
     }
-    
+
     #result .morestats {
       gap: 1rem;
       grid-template-rows: 1fr 1fr;
@@ -2758,7 +2756,6 @@ key {
   }
 }
 
-
 @media only screen and (max-width: 800px) {
   #centerContent {
     #top {
@@ -2819,43 +2816,43 @@ key {
 }
 
 @media only screen and (max-width: 600px) {
-#middle{
-  #result{
-    grid-template-areas:
-      "stats stats"
-      "chart chart"
-      "morestats morestats";
-    .stats{
-      grid-template-areas: "wpm acc";
-      gap: 4rem;
-    }
-    .stats.morestats{
-      grid-template-rows: 1fr 1fr 1fr;
-      gap: 1rem;
+  #middle {
+    #result {
+      grid-template-areas:
+        "stats stats"
+        "chart chart"
+        "morestats morestats";
+      .stats {
+        grid-template-areas: "wpm acc";
+        gap: 4rem;
+      }
+      .stats.morestats {
+        grid-template-rows: 1fr 1fr 1fr;
+        gap: 1rem;
+      }
     }
   }
 }
-}
 
 @media only screen and (max-width: 500px) {
-  #top{
-    .logo{
-      .bottom{
+  #top {
+    .logo {
+      .bottom {
         font-size: 1.75rem;
         line-height: 1.75rem;
-        margin-top: .5rem;
+        margin-top: 0.5rem;
       }
-      .top{
+      .top {
         display: none;
       }
     }
-    #menu{
-      .icon-button{
+    #menu {
+      .icon-button {
         padding: 0;
       }
     }
   }
-  #centerContent{
+  #centerContent {
     padding: 1rem;
   }
 }
@@ -3007,14 +3004,18 @@ key {
       grid-template-columns: 6.9fr 4.6fr 6.9fr;
     }
 
-    #KeyLeftBracket {
-      opacity: 0;
-    }
-    #KeyRightBracket {
-      opacity: 0;
-    }
-    #KeyQuote {
-      opacity: 0;
+    .row {
+      :nth-child(0) {
+        opacity: 0;
+      }
+
+      :nth-child(13) {
+        opacity: 0;
+      }
+
+      :nth-child(14) {
+        opacity: 0;
+      }
     }
   }
   &.split {

From bd471d1bc9d095b195f6a6a74641493b172995c2 Mon Sep 17 00:00:00 2001
From: David Martin <dmartin.tech@outlook.com>
Date: Sat, 24 Oct 2020 17:42:05 -0500
Subject: [PATCH 2/3] Included keymap fix for the split matrix layout

---
 public/css/style.scss | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 5fcc62ffa..a31285e77 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -3078,17 +3078,18 @@ key {
       grid-template-columns: 6fr 2fr 1fr 2fr 6fr;
     }
 
-    #KeyLeftBracket {
-      opacity: 0;
-    }
-    #KeyRightBracket {
-      opacity: 0;
-    }
-    #KeyQuote {
-      opacity: 0;
-    }
-    #KeySpace2 {
-      opacity: 1;
+    .row { 
+      :nth-child(0) {
+        opacity: 0;
+      }
+      
+      :nth-child(13) {
+        opacity: 0;
+      }
+      
+      :nth-child(14) {
+        opacity: 0;
+      }
     }
   }
 }

From 096fcce6a41a172e5fe69bd5f7166c609b352dd5 Mon Sep 17 00:00:00 2001
From: David Martin <dmartin.tech@outlook.com>
Date: Sat, 24 Oct 2020 17:45:05 -0500
Subject: [PATCH 3/3] Removed nth-child(0)

unneeded
---
 public/css/style.scss | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index a31285e77..cf286da10 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -3005,10 +3005,6 @@ key {
     }
 
     .row {
-      :nth-child(0) {
-        opacity: 0;
-      }
-
       :nth-child(13) {
         opacity: 0;
       }
@@ -3078,11 +3074,7 @@ key {
       grid-template-columns: 6fr 2fr 1fr 2fr 6fr;
     }
 
-    .row { 
-      :nth-child(0) {
-        opacity: 0;
-      }
-      
+    .row {
       :nth-child(13) {
         opacity: 0;
       }