From 61e68b73e63dc6b94b240cc45bf7506c17765cdd Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Fri, 16 Apr 2021 18:40:37 +0100
Subject: [PATCH] updated about page

---
 src/sass/style.scss |  20 ++++-
 static/index.html   | 181 ++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 191 insertions(+), 10 deletions(-)

diff --git a/src/sass/style.scss b/src/sass/style.scss
index 0dcc08cd1..66d4a1ee6 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -2644,14 +2644,28 @@ key {
   display: grid;
   gap: 2rem;
 
+  .created{
+    text-align: center;
+    color: var(--sub-color);
+    a{
+      text-decoration: none;
+    }
+  }
+
   .section {
     display: grid;
-    gap: 0.5rem;
+    gap: 0.25rem;
 
-    .supporters {
+    .title{
+      font-size: 2rem;
+      line-height: 2rem;
+      color: var(--sub-color);
+      margin: 1rem 0;
+    }
+
+    .supporters, .contributors {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: center;
       gap: 0.25rem;
       color: var(--text-color);
     }
diff --git a/static/index.html b/static/index.html
index 8e5a35bee..b9d8343ae 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1473,8 +1473,12 @@
             </div>
           </div>
           <div class="page pageAbout hidden">
+            <div class="created">
+              Created with love by Miodec. <a href="#supporters_title">Supported</a> and <a href="#contributors_title">expanded</a> by many awesome people. Launched on 15th of May, 2020.
+            </div>
             <div class="section">
-              <h1>about</h1>
+              <div class="title">about</div>
+              <!-- <h1>about</h1> -->
               <p>
                 Monkeytype is a minimalistic typing test, featuring many test
                 modes, an account system to save your typing speed history and
@@ -1499,7 +1503,7 @@
                 <key>enter</key>
                 (or just
                 <key>tab</key>
-                if you have (
+                if you have
                 <a href="settings">quick tab mode enabled</a>
                 ) to restart the typing test. Open the command line by pressing
                 <key>esc</key>
@@ -1567,12 +1571,12 @@
               </p>
             </div>
             <div class="section">
-              <h1>credits</h1>
+              <div class="title">credits</div>
               <p>
                 <a href="https://www.reddit.com/user/montydrei" target="_blank">
-                  montydrei
+                  Montydrei
                 </a>
-                - name suggestion
+                for the name suggestion
               </p>
               <p>
                 <a
@@ -1584,6 +1588,9 @@
                 who provided valuable feedback on the original reddit post for
                 the prototype of this website
               </p>
+              <p>
+                <a href="#supporters_title">Supporters</a> who helped financially by donating, enabling optional ads or buying merch
+              </p>
               <p>
                 <a
                   href="https://github.com/Miodec/monkeytype/graphs/contributors"
@@ -1591,11 +1598,11 @@
                   Contributors
                 </a>
                 on GitHub that have helped with implementing various features,
-                adding themes and more.
+                adding themes and more
               </p>
             </div>
             <div class="section">
-              <h1>supporters</h1>
+              <h1 id="supporters_title">supporters</h1>
               <div class="supporters">
                 <div>Not Gate</div>
                 <div>Corey</div>
@@ -1676,6 +1683,166 @@
                 <div>Michael</div>
               </div>
             </div>
+            <div class="section">
+              <h1 id="contributors_title">contributors</h1>
+              <div class="contributors">
+                <div>typerqeo</div>
+                <div>bhomie</div>
+                <div>corey-b</div>
+                <div>UnrealApex</div>
+                <div>willerbee</div>
+                <div>dmartin-tech</div>
+                <div>SeerLite</div>
+                <div>FakeDazon</div>
+                <div>a1usha</div>
+                <div>Brachyurus</div>
+                <div>0x8b</div>
+                <div>seaerchin</div>
+                <div>ryan-harrington</div>
+                <div>Smithster</div>
+                <div>Marco-Pagani</div>
+                <div>CrumblyLiquid</div>
+                <div>Jack92829</div>
+                <div>xZa-k</div>
+                <div>avi123nash</div>
+                <div>bataak</div>
+                <div>Saint-dev</div>
+                <div>ThatOneCalculator</div>
+                <div>mwahlig</div>
+                <div>zachy-ho</div>
+                <div>aviegdown</div>
+                <div>ramnathk</div>
+                <div>GFruit</div>
+                <div>Killer8Hyper</div>
+                <div>MaticSulc</div>
+                <div>joshuamango</div>
+                <div>Ahmad-A0</div>
+                <div>christophersarmiento</div>
+                <div>71xn</div>
+                <div>jacekdobrowolski</div>
+                <div>leduyquang753</div>
+                <div>Maclogger</div>
+                <div>iwa</div>
+                <div>TayIorRobinson</div>
+                <div>vuong-buihv</div>
+                <div>barthakstege</div>
+                <div>l4ssc</div>
+                <div>throwawaywords</div>
+                <div>Jonny-exe</div>
+                <div>OctahedronV2</div>
+                <div>iitsalex</div>
+                <div>RealCyGuy</div>
+                <div>Inirdin</div>
+                <div>jkjrmlg</div>
+                <div>kunal-rp</div>
+                <div>KungPaoChick</div>
+                <div>MakerJake01</div>
+                <div>MysteriousLog6</div>
+                <div>Octarine-Phaneron</div>
+                <div>tawtis</div>
+                <div>Vitaman02</div>
+                <div>BarePotato</div>
+                <div>alegottu</div>
+                <div>s1mple-Lemon</div>
+                <div>Alenygam</div>
+                <div>fuwn</div>
+                <div>minerscale</div>
+                <div>aditya1rawat</div>
+                <div>ammarptn</div>
+                <div>ariebh</div>
+                <div>bsamseth</div>
+                <div>bool3max</div>
+                <div>dCubelic</div>
+                <div>elswenson</div>
+                <div>FabianSt305</div>
+                <div>Fraserbc</div>
+                <div>shinze</div>
+                <div>gkeep</div>
+                <div>JosueLeovani</div>
+                <div>dtuukkanen</div>
+                <div>lucas-fern</div>
+                <div>Magical-Penguin</div>
+                <div>mendelmaleh</div>
+                <div>NoCrypt</div>
+                <div>nullaf</div>
+                <div>chireia</div>
+                <div>sohamb117</div>
+                <div>stevep99</div>
+                <div>mintlodica</div>
+                <div>miyukowo</div>
+                <div>g-harel</div>
+                <div>kiriDevs</div>
+                <div>krsntn</div>
+                <div>baulml</div>
+                <div>ryevertigo</div>
+                <div>Fowl95</div>
+                <div>SoulNinja-dev</div>
+                <div>AfonsoVReis</div>
+                <div>popey456963</div>
+                <div>AlirezaTheBruh</div>
+                <div>anhduck14</div>
+                <div>cBachoo</div>
+                <div>beckxie</div>
+                <div>thescripted</div>
+                <div>CarinaChenot</div>
+                <div>Bregoliii</div>
+                <div>Cosmeeeen</div>
+                <div>danhogan</div>
+                <div>danii</div>
+                <div>David-Mordechai</div>
+                <div>EmNudge</div>
+                <div>kwfk</div>
+                <div>gavinmn</div>
+                <div>GioSDA</div>
+                <div>GuyClicking</div>
+                <div>HayataSama</div>
+                <div>zaxophone</div>
+                <div>Mollerz</div>
+                <div>jeremygautama</div>
+                <div>cincodenada</div>
+                <div>JonesSagabaen</div>
+                <div>kadenscott</div>
+                <div>GMKanat</div>
+                <div>lukew3</div>
+                <div>narze</div>
+                <div>Meimersdorfer</div>
+                <div>mia-cx</div>
+                <div>nikzzzz</div>
+                <div>OldMope</div>
+                <div>Oskar283</div>
+                <div>paulhchoi</div>
+                <div>pserey</div>
+                <div>pjrelex</div>
+                <div>18praneeth</div>
+                <div>RebonackAl</div>
+                <div>rhesamu</div>
+                <div>samyak039</div>
+                <div>sergiathanzo</div>
+                <div>phrohdoh</div>
+                <div>BlueGone</div>
+                <div>tsara27</div>
+                <div>vansul</div>
+                <div>zekth</div>
+                <div>voroskoi</div>
+                <div>andrewtran1995</div>
+                <div>angularorbit</div>
+                <div>aoaaceai</div>
+                <div>bilfri</div>
+                <div>gwenzek</div>
+                <div>iokiou</div>
+                <div>kikuKeii</div>
+                <div>kokaloo</div>
+                <div>nextZed</div>
+                <div>redarguireda</div>
+                <div>sudoerena</div>
+                <div>thuanpham2311</div>
+                <div>Rougemoot</div>
+                <div>wRadion</div>
+                <div>yaazkal</div>
+                <div>zigotica</div>
+                <div>cinoss</div>
+              </div>
+            </div>
           </div>
           <div class="page pageSettings hidden">
             <div class="scrollToTopButton">