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,15 +70,21 @@ <h2>
  </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
  most common words) in the options, or change the language entirely.
  </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 @@ <h2>
  </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 @@ <h2>
  <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 @@ <h2>
  </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 @@ <h2>
  </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 @@ <h2>
  </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 @@ <h2>
  <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,