impr(about page): add icons

frontend/src/html/pages/about.html

@@ -51,7 +51,10 @@
     <p class="small">distribution of time 60 leaderboard results (wpm)</p>
   </div>
   <div class="section">
-    <div class="bigtitle">about</div>
+    <div class="bigtitle">
+      <i class="fas fa-info-circle"></i>
+      about
+    </div>
     <h2>
       Monkeytype is a minimalistic and customizable typing test. It features
       many test modes, an account system to save your typing speed history, and
@@ -67,7 +70,10 @@
     </h2>
   </div>
   <div class="section">
-    <div class="title">word set</div>
+    <div class="title">
+      <i class="fas fa-align-left"></i>
+      word set
+    </div>
     <p>
       By default, this website uses the most common 200 words in the English
       language to generate its tests. You can change to an expanded set (1000
@@ -75,7 +81,10 @@
     </p>
   </div>
   <div class="section">
-    <div class="title">keybinds</div>
+    <div class="title">
+      <i class="fas fa-keyboard"></i>
+      keybinds
+    </div>
     <p>
       You can use
       <key>tab</key>
@@ -97,7 +106,10 @@
     </p>
   </div>
   <div class="section">
-    <div class="title">stats</div>
+    <div class="title">
+      <i class="fas fa-list-ol"></i>
+      stats
+    </div>
     <p>
       wpm - total number of characters in the correctly typed words (including
       spaces), divided by 5 and normalised to 60 seconds.
@@ -125,7 +137,10 @@
     <div id="ad-about-1-small"></div>
   </div>
   <div class="section">
-    <div class="title">results screen</div>
+    <div class="title">
+      <i class="fas fa-chart-area"></i>
+      results screen
+    </div>
     <p>
       After completing a test you will be able to see your wpm, raw wpm,
       accuracy, character stats, test length, leaderboards info and test info.
@@ -136,15 +151,22 @@
     </p>
   </div>
   <div class="section">
-    <div class="title">bug report or feature request</div>
+    <div class="title">
+      <i class="fas fa-bug"></i>
+      bug report or feature request
+    </div>
     <p>
       If you encounter a bug, or have a feature request - join the Discord
       server, send me an email, a direct message on Twitter or create an issue
       on GitHub.
     </p>
   </div>
+  <div></div>
   <div class="section">
-    <div class="bigtitle">support</div>
+    <div class="bigtitle">
+      <i class="fas fa-life-ring"></i>
+      support
+    </div>
     <p>
       Thanks to everyone who has supported this project. It would not be
       possible without you and your continued support.
@@ -187,8 +209,12 @@
       </a> -->
     </div>
   </div>
+  <div></div>
   <div class="section">
-    <div class="bigtitle">contact</div>
+    <div class="bigtitle">
+      <i class="fas fa-envelope"></i>
+      contact
+    </div>
     <p>
       If you encounter a bug, have a feature request or just want to say hi -
       here are the different ways you can contact me directly.
@@ -227,8 +253,12 @@
       </a>
     </div>
   </div>
+  <div></div>
   <div class="section">
-    <div class="bigtitle">credits</div>
+    <div class="bigtitle">
+      <i class="fas fa-users"></i>
+      credits
+    </div>
     <p>
       <a
         href="https://www.reddit.com/user/montydrei"
@@ -274,12 +304,20 @@
     <div class="icon small"><i class="fas fa-ad"></i></div>
     <div id="ad-about-2-small"></div>
   </div>
+  <div></div>
   <div class="section">
-    <div id="supporters_title" class="bigtitle">supporters</div>
+    <div id="supporters_title" class="bigtitle">
+      <i class="fas fa-hand-holding-usd"></i>
+      supporters
+    </div>
     <div class="supporters"></div>
   </div>
+  <div></div>
   <div class="section">
-    <div id="contributors_title" class="bigtitle">contributors</div>
+    <div id="contributors_title" class="bigtitle">
+      <i class="fas fa-code-branch"></i>
+      contributors
+    </div>
     <div class="contributors"></div>
   </div>
 </div>

frontend/src/styles/about.scss

@@ -16,21 +16,30 @@
 
   .section {
     display: grid;
-    gap: 0.25rem;
 
     .bigtitle {
       font-size: 2rem;
-      line-height: 2rem;
       color: var(--sub-color);
       margin: 0 0 1rem 0;
+      display: inline-flex;
+      align-items: baseline;
+      margin-bottom: 0.25em;
+      i {
+        margin-right: 0.5em;
+      }
     }
 
     .title {
       font-size: 1rem;
-      line-height: 1rem;
       color: var(--sub-color);
       margin: 0;
       font-weight: 300;
+      display: inline-flex;
+      align-items: baseline;
+      margin-bottom: 0.25em;
+      i {
+        margin-right: 0.5em;
+      }
     }
 
     .contactButtons,