Added 'details' sections to provide more information about the site

src/index.html

@@ -42,10 +42,28 @@
                             <option value="all">All Available</option>
                         </select>
                     </p>
+                    <p>
+                    </p>
                 </div>
+                <details id="about">
+                    <summary>About this Site</summary>
+                    This is a site developed to track the value of the World of Warcraft Token from various
+                    regions over time. I developed it because I wanted a quick and simple way to track the
+                    cost without being advertised to or tracked, and to play around with various "serverless"
+                    technologies. As such, my promise to you is never to use any tracking Javascript, and the
+                    only logging is for debugging purposes of the backend - which does not get IPs.
+                </details>
+                <details id="what-is">
+                    <summary>What is the WoW Token</summary>
+                    The World of Warcraft Token is a first-party system developed by Blizzard to allow you
+                    to either spend currency (local denomination or Blizzard Balance) and convert it to gold
+                    in retail World of Warcraft, or use gold to buy game time or Blizzard Balance. To find out
+                    more, visit the support article on Blizzard's website
+                    <a href="https://us.battle.net/support/en/article/31218">here</a>.
+                </details>
                 <div id="source">
                     <p>
-                        <a href="https://blog.emily.sh/wowtoken-app/">About and Source</a>
+                        <a href="https://blog.emily.sh/wowtoken-app/">Source</a>
                     </p>
                 </div>
             </div>

src/style.css

@@ -324,6 +324,32 @@ p {
     line-height: 3em;
 }
 
+details {
+    background-color: #073642;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0.5em 0.5em 0;
+    font-size: 17px;
+    line-height: 1.5em;
+    margin: .5em 5vw;
+}
+
+details > summary {
+    color: #aaaaaa;
+    cursor: pointer;
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+}
+
+details[open] {
+    padding: 0.5em;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: 0.5em;
+}
 
 #option_select {
     font-size: 20px;
@@ -352,7 +378,6 @@ p {
     flex-direction: column;
 }
 
-
 .lds-ripple {
     position: relative;
     align-self: center;