added simple implementation for displaying keymap in a matrix layout

public/css/style.scss

@@ -2,8 +2,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap");
 @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=Oxygen&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
 
 :root {
   --roundness: 0.25rem;
@@ -379,7 +379,7 @@ a:hover {
     .check {
       span {
         display: block;
-        font-size: .76rem;
+        font-size: 0.76rem;
         color: var(--sub-color);
         margin-left: 1.5rem;
       }
@@ -391,7 +391,7 @@ a:hover {
         height: 0;
         display: none;
 
-        &~.customTextRandomCheckbox {
+        & ~ .customTextRandomCheckbox {
           width: 12px;
           height: 12px;
           background: rgba(0, 0, 0, 0.1);
@@ -402,7 +402,7 @@ a:hover {
           transition: 0.25s;
         }
 
-        &:checked~.customTextRandomCheckbox {
+        &:checked ~ .customTextRandomCheckbox {
           background: var(--main-color);
         }
       }
@@ -785,8 +785,7 @@ a:hover {
   }
 
   &.outline {
-    @extend #caret,
-    .block;
+    @extend #caret, .block;
     background: transparent;
     border: 1px solid var(--caret-color);
   }
@@ -824,7 +823,6 @@ a:hover {
 }
 
 @keyframes caretFlash {
-
   0%,
   100% {
     opacity: 0;
@@ -1509,9 +1507,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);
 }
 
@@ -1617,7 +1615,7 @@ key {
             height: 0;
             display: none;
 
-            &~.customCheckbox {
+            & ~ .customCheckbox {
               width: 12px;
               height: 12px;
               background: rgba(0, 0, 0, 0.1);
@@ -1628,7 +1626,7 @@ key {
               transition: 0.25s;
             }
 
-            &:checked~.customCheckbox {
+            &:checked ~ .customCheckbox {
               background: var(--main-color);
             }
           }
@@ -1692,14 +1690,14 @@ key {
     color: var(--sub-color);
     line-height: 2rem;
     cursor: pointer;
-    transition: .25s;
+    transition: 0.25s;
 
     &:hover {
       color: var(--text-color);
     }
 
     .fas {
-      margin-left: .5rem;
+      margin-left: 0.5rem;
 
       &.rotate {
         transform: rotate(-90deg);
@@ -1904,7 +1902,7 @@ key {
         "title tabs"
         "buttons buttons";
       column-gap: 2rem;
-      row-gap: .5rem;
+      row-gap: 0.5rem;
 
       .tabs {
         display: grid;
@@ -2058,7 +2056,7 @@ key {
 
         .fas,
         .punc {
-          margin-right: .25rem;
+          margin-right: 0.25rem;
         }
 
         .spacer {
@@ -2143,7 +2141,6 @@ key {
         grid-template-columns: repeat(4, 1fr);
         grid-auto-flow: unset;
       }
-
     }
 
     .buttons {
@@ -2434,4 +2431,9 @@ key {
 .r5 {
   display: grid;
   grid-template-columns: 4fr 7.5fr 4fr;
-}
+}
+
+.matrix {
+  display: flex;
+  justify-content: left;
+}

public/index.html

@@ -1244,6 +1244,14 @@
               <div class="button" keymapMode="next" tabindex="0" onclick="this.blur();">next</div>
             </div>
           </div>
+          <div class="section keymapMatrix">
+              <h1>keymap matrix</h1>
+              <div class="text">Displays the layout in a matrix style.</div>
+              <div class="buttons">
+                <div class="button off" tabindex="0" onclick="this.blur();">off</div>
+                <div class="button on" tabindex="0" onclick="this.blur();">on</div>
+              </div>
+          </div>
           <div class="section keymapLayout">
             <h1>keymap layout</h1>
             <div class="buttons">

public/js/settings.js

@@ -94,11 +94,17 @@ settingsGroups.keymapMode = new SettingsGroup(
   () => {
     if (config.keymapMode === "off") {
       $(".pageSettings .section.keymapLayout").addClass("hidden");
+      $(".pageSettings .section.keymapMatrix").addClass("hidden");
     } else {
       $(".pageSettings .section.keymapLayout").removeClass("hidden");
+      $(".pageSettings .section.keymapMatrix").removeClass("hidden");
     }
   }
 );
+settingsGroups.keymapMatrix = new SettingsGroup(
+  "keymapMatrix",
+  changeKeymapMatrix
+);
 settingsGroups.keymapLayout = new SettingsGroup(
   "keymapLayout",
   changeKeymapLayout

public/js/userconfig.js

@@ -40,6 +40,7 @@ let defaultConfig = {
   stopOnError: false,
   showAllLines: false,
   keymapMode: "off",
+  keymapMatrix: false,
   keymapLayout: "qwerty",
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
@@ -147,6 +148,7 @@ function applyConfig(configObj) {
     setTimerColor(configObj.timerColor, true);
     setTimerOpacity(configObj.timerOpacity, true);
     changeKeymapMode(configObj.keymapMode, true);
+    changeKeymapMatrix(configObj.keymapMatrix, true);
     changeKeymapLayout(configObj.keymapLayout, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothLineScroll(configObj.smoothLineScroll, true);
@@ -791,6 +793,17 @@ function changeKeymapMode(mode, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+function changeKeymapMatrix(boolean, nosave) {
+  if (boolean !== undefined) config.keymapMatrix = boolean;
+  if (boolean === false) {
+    $(".r1, .r2, .r3, .r4").removeClass("matrix");
+  }
+  if (boolean === true) {
+    $(".r1, .r2, .r3, .r4").addClass("matrix");
+  }
+  if (!nosave) saveConfigToCookie();
+}
+
 function changeKeymapLayout(layout, nosave) {
   if (layout == null || layout == undefined) {
     layout = "qwerty";