Improve articles generally

Author: aryanpingle

src/index.ejs

@@ -97,7 +97,7 @@
             <article class="introduction-article">
                 <section>
                     <p>
-                        This is a fan-made website that helps you read the
+                        This is a fan made website that helps you read the
                         in-game language of
                         <a
                             href="https://store.steampowered.com/app/553420/TUNIC/"
@@ -130,8 +130,8 @@
                         </picture>
                     </header>
                     <p>
-                        Anything you type in English will be translated to
-                        phonetic, and then converted to Runic.<br />
+                        Convert English text to phonetic - and then to a Runic
+                        image.<br />
                         Put phrases within <b>&#64;</b> to display them in
                         English, like <b>&#64;The Librarian&#64;</b>.
                     </p>
@@ -159,7 +159,10 @@
                             />
                         </picture>
                     </header>
-                    <p>Click on any card to copy the vowel.</p>
+                    <p>
+                        The perimeter of a rune describes the vowel - click on a
+                        card to copy it!
+                    </p>
                 </section>
                 <div id="rune-vowel-table"></div>
             </article>
@@ -184,7 +187,10 @@
                             />
                         </picture>
                     </header>
-                    <p>Click on any card to copy the consonant.</p>
+                    <p>
+                        The inner segments of a rune describes the consonant -
+                        click on a card to copy it!
+                    </p>
                 </section>
                 <div id="rune-consonant-table"></div>
             </article>

src/initial-resources/index.css

@@ -94,6 +94,7 @@ section .section-banner {
 section > p {
     text-align: center;
     text-wrap: balance;
+    color: var(--on-surface-0-alt);
     margin: 1.33em 0;
 }
 
@@ -126,6 +127,12 @@ b {
     font-weight: 700;
 }
 
+/* Introductory article */
+
+.introduction-article p {
+    color: var(--on-surface-0);
+}
+
 /* The fancy orb stuff */
 
 .fancy-orb-background {