added font size 4

src/js/commandline-lists.js

@@ -1169,6 +1169,14 @@ let commandsFontSize = {
         TestLogic.restart();
       },
     },
+    {
+      id: "changeFontSize4",
+      display: "4x",
+      exec: () => {
+        UpdateConfig.setFontSize(4);
+        TestLogic.restart();
+      },
+    },
   ],
 };
 

src/js/config.js

@@ -1389,11 +1389,17 @@ export function setFontSize(fontSize, nosave) {
   $("#caret, #paceCaret").removeClass("size2");
   $("#words").removeClass("size3");
   $("#caret, #paceCaret").removeClass("size3");
+  $("#words").removeClass("size35");
+  $("#caret, #paceCaret").removeClass("size35");
+  $("#words").removeClass("size4");
+  $("#caret, #paceCaret").removeClass("size4");
 
   $("#miniTimerAndLiveWpm").removeClass("size125");
   $("#miniTimerAndLiveWpm").removeClass("size15");
   $("#miniTimerAndLiveWpm").removeClass("size2");
   $("#miniTimerAndLiveWpm").removeClass("size3");
+  $("#miniTimerAndLiveWpm").removeClass("size35");
+  $("#miniTimerAndLiveWpm").removeClass("size4");
 
   if (fontSize == 125) {
     $("#words").addClass("size125");
@@ -1411,6 +1417,14 @@ export function setFontSize(fontSize, nosave) {
     $("#words").addClass("size3");
     $("#caret, #paceCaret").addClass("size3");
     $("#miniTimerAndLiveWpm").addClass("size3");
+  } else if (fontSize == 35) {
+    $("#words").addClass("size34");
+    $("#caret, #paceCaret").addClass("size35");
+    $("#miniTimerAndLiveWpm").addClass("size35");
+  } else if (fontSize == 4) {
+    $("#words").addClass("size4");
+    $("#caret, #paceCaret").addClass("size4");
+    $("#miniTimerAndLiveWpm").addClass("size4");
   }
   if (!nosave) saveToLocalStorage();
 }

src/sass/style.scss

@@ -1435,6 +1435,9 @@ label.checkbox {
     &.size3 {
       margin-left: -0.2rem;
     }
+    &.size4 {
+      margin-left: -0.3rem;
+    }
   }
 
   &.banana {
@@ -1450,6 +1453,9 @@ label.checkbox {
     &.size3 {
       margin-left: -0.5rem;
     }
+    &.size4 {
+      margin-left: -0.3rem;
+    }
   }
 
   &.block {
@@ -1487,6 +1493,9 @@ label.checkbox {
     &.size3 {
       margin-top: 3.9em;
     }
+    &.size4 {
+      margin-top: 4.7em;
+    }
   }
 
   &.size125 {
@@ -1504,6 +1513,10 @@ label.checkbox {
   &.size3 {
     transform: scale(2.8);
   }
+
+  &.size4 {
+    transform: scale(3.7);
+  }
 }
 
 @keyframes caretFlashSmooth {
@@ -2413,6 +2426,11 @@ key {
         font-size: 3rem;
         line-height: 3rem;
       }
+      &.size4 {
+        margin-top: -4.5rem;
+        font-size: 4rem;
+        line-height: 4rem;
+      }
     }
   }
 
@@ -2491,6 +2509,12 @@ key {
   margin: 0.75rem;
 }
 
+#words.size4 .word {
+  line-height: 4rem;
+  font-size: 4rem;
+  margin: 1rem;
+}
+
 #words.nospace {
   .word {
     margin: 0.5rem 0;

static/index.html

@@ -3100,6 +3100,14 @@
                   >
                     3
                   </div>
+                  <div
+                    class="button"
+                    fontsize="4"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    4
+                  </div>
                 </div>
               </div>
               <div class="section fontFamily fullWidth">