[pull] master from monkeytypegame:master

frontend/src/html/footer.html

@@ -3,18 +3,18 @@
     <i class="fas fa-terminal"></i>
   </div>
   <div class="keyTips">
-    <key>tab</key>
+    <kbd>tab</kbd>
     and
-    <key>enter</key>
+    <kbd>enter</kbd>
     - Restart Test
     <br />
-    <key>ctrl/cmd</key>
+    <kbd>ctrl/cmd</kbd>
     +
-    <key>shift</key>
+    <kbd>shift</kbd>
     +
-    <key>p</key>
+    <kbd>p</kbd>
     or
-    <key>esc</key>
+    <kbd>esc</kbd>
     - Command Line
   </div>
   <div class="leftright">

frontend/src/html/pages/about.html

@@ -86,20 +86,20 @@ <h2>
     </div>
     <p>
       You can use
-      <key>tab</key>
+      <kbd>tab</kbd>
       and
-      <key>enter</key>
+      <kbd>enter</kbd>
       (or just
-      <key>tab</key>
+      <kbd>tab</kbd>
       if you have quick tab mode enabled) to restart the typing test. Open the
       command line by pressing
-      <key>ctrl/cmd</key>
+      <kbd>ctrl/cmd</kbd>
       +
-      <key>shift</key>
+      <kbd>shift</kbd>
       +
-      <key>p</key>
+      <kbd>p</kbd>
       or
-      <key>esc</key>
+      <kbd>esc</kbd>
       - there you can access all the functionality you need without touching
       your mouse.
     </p>

frontend/src/html/pages/settings.html

@@ -38,13 +38,13 @@
 
   <div class="tip">
     tip: You can also change all these settings quickly using the command line (
-    <key>ctrl/cmd</key>
+    <kbd>ctrl/cmd</kbd>
     +
-    <key>shift</key>
+    <kbd>shift</kbd>
     +
-    <key>p</key>
+    <kbd>p</kbd>
     or
-    <key>esc</key>
+    <kbd>esc</kbd>
     )
   </div>
 
@@ -135,15 +135,15 @@
       </div>
       <div class="text">
         Press
-        <key>tab</key>
+        <kbd>tab</kbd>
         ,
-        <key>esc</key>
+        <kbd>esc</kbd>
         or
-        <key>enter</key>
+        <kbd>enter</kbd>
         to quickly restart the test, or to quickly jump to the test page. These
         options disable tab navigation on most parts of the website. Using the
         "esc" option will move opening the commandline to the
-        <key>tab</key>
+        <kbd>tab</kbd>
         key.
       </div>
       <div class="buttons">
@@ -167,7 +167,7 @@
         Changing it to 'typing' will repeat the quote if you restart while
         typing.
       </div>
-      <!-- , and 'always' will always repeat the quote (you will need to press <key>shift + tab</key> to move on to the next quote). -->
+      <!-- , and 'always' will always repeat the quote (you will need to press <kbd>shift + tab</kbd> to move on to the next quote). -->
       <div class="buttons">
         <button data-config-value="off">off</button>
         <button data-config-value="typing">typing</button>
@@ -226,7 +226,7 @@
         When enabled, it will show the command line with all commands in a
         single list instead of submenu arrangements. Selecting 'manual' will
         expose all commands only after typing
-        <key>></key>
+        <kbd>></kbd>
         .
       </div>
       <div class="buttons">
@@ -452,14 +452,14 @@
       </div>
       <div class="text">
         This mode will force you to use opposite
-        <key>shift</key>
+        <kbd>shift</kbd>
         keys for shifting. Using an incorrect one will count as an error. This
         feature ignores keys in locations
-        <key>B</key>
+        <kbd>B</kbd>
         ,
-        <key>Y</key>
+        <kbd>Y</kbd>
         , and
-        <key>^</key>
+        <kbd>^</kbd>
         because many people use the other hand for those keys. If you're using
         external software to emulate your layout (including QMK), you should use
         the "keymap" mode - the standard "on" will not work. This will enforce

frontend/src/html/popups.html

@@ -874,13 +874,13 @@
     <div class="tip">
       You can start an infinite test by inputting 0. Then, to stop the test, use
       the Bail Out feature (
-      <key>esc</key>
+      <kbd>esc</kbd>
       or
-      <key>ctrl/cmd</key>
+      <kbd>ctrl/cmd</kbd>
       +
-      <key>shift</key>
+      <kbd>shift</kbd>
       +
-      <key>p</key>
+      <kbd>p</kbd>
       > Bail Out)
     </div>
     <button>ok</button>
@@ -897,13 +897,13 @@
       <br />
       You can start an infinite test by inputting 0. Then, to stop the test, use
       the Bail Out feature (
-      <key>esc</key>
+      <kbd>esc</kbd>
       or
-      <key>ctrl/cmd</key>
+      <kbd>ctrl/cmd</kbd>
       +
-      <key>shift</key>
+      <kbd>shift</kbd>
       +
-      <key>p</key>
+      <kbd>p</kbd>
       > Bail Out)
     </div>
     <button>ok</button>

frontend/src/styles/core.scss

@@ -195,17 +195,16 @@ body {
   opacity: 0;
 }
 
-key {
+kbd {
   color: var(--bg-color);
   background-color: var(--sub-color);
-  /* font-weight: bold; */
-  padding: 0.1rem 0.3rem;
-  margin: 0rem 0rem;
-  border-radius: 0.1rem;
-  display: inline-block;
-  font-size: 0.7rem;
-  line-height: 0.7rem;
-  margin: 0 0.5em;
+
+  // color: var(--text-color);
+  // background: var(--sub-alt-color);
+
+  padding: 0.2em 0.4em;
+  border-radius: 0.25em;
+  font-size: 0.75em;
 }
 
 .pageLoading {

frontend/src/ts/pages/settings.ts

@@ -722,7 +722,7 @@ export async function update(
   const commandKey = Config.quickRestart === "esc" ? "tab" : "esc";
   qs(".pageSettings .tip")?.setHtml(`
     tip: You can also change all these settings quickly using the
-    command line (<key>${commandKey}</key> or <key>${modifierKey}</key> + <key>shift</key> + <key>p</key>)`);
+    command line (<kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>)`);
 
   if (
     customLayoutFluidSelect !== undefined &&

frontend/src/ts/ui.ts

@@ -52,10 +52,10 @@ function updateKeytips(): void {
   qs("footer .keyTips")?.setHtml(`
     ${
       Config.quickRestart === "off"
-        ? "<key>tab</key> + <key>enter</key>"
-        : `<key>${Config.quickRestart}</key>`
+        ? "<kbd>tab</kbd> + <kbd>enter</kbd>"
+        : `<kbd>${Config.quickRestart}</kbd>`
     } - restart test<br>
-    <key>${commandKey}</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
+    <kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> - command line`);
 }
 
 if (isDevEnvironment()) {