docs: add intro text

Author: francelu

website/index.html

@@ -32,19 +32,15 @@
     <div class="section" data-anchor="introduction" style="--bg-img: url('data/intro_background.jpg')">
       <h1>Olympic Inequalities</h1>
       <h2>How have sociocultural, economic, and geopolitical contexts been reflected in the Olympics over time?</h2>
-      <p>TODO: update intro</p>
       <p>
-        The Olympic Games are often presented as a neutral celebration of human performance.
-        But who gets to participate, who wins, and which countries dominate are shaped by
-        much more than talent alone.
+        At first glance, the Olympics look like so-called fair Games: the best atheletes compete, and the best win.
+        But is it really that simple?
+        The truth is, medals are influenced by much more than talent.
       </p>
-
-      <p>
-        This project explores Olympic inequality through five axes: gender representation,
-        geography of medal winners, athlete body types, geopolitical disruptions, and economic fairness.
-      </p>
-
       <p>
+        Wealth, population, politics, and opportunities all play a role in who gets on the podium.
+        We're going to see five axes behind medals in Olympics:
+        gender representation, geography of medal winners, athlete body types, geopolitical disruptions, and economic fairness.
         Scroll through the story to see how social, political, and economic contexts have shaped
         the Games over time.
       </p>

website/styles.css

@@ -46,16 +46,7 @@ body {
 }
 
 .section {
-  padding: 3%;
-}
-
-.section[data-anchor="introduction"] {
-  box-sizing: border-box;
-  background-attachment: fixed;
-  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-img);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  padding: 5%;
 }
 
 /* Remove "Made with fullpage.js" link at bottom of page */
@@ -118,6 +109,7 @@ h2,
 h3,
 p {
   color: white;
+  line-height: 1.15;
 }
 
 body,
@@ -142,7 +134,6 @@ h1 {
 h2 {
   font-size: 40px;
   padding-bottom: 24px;
-  line-height: 1.15;
 }
 
 h3 {
@@ -152,6 +143,27 @@ h3 {
 
 p {
   text-align: justify;
+  padding-bottom: 6px;
+}
+
+/* =============================================
+   Introduction section
+   =========================================== */
+
+.section[data-anchor="introduction"] {
+  box-sizing: border-box;
+  background-attachment: fixed;
+  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-img);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-anchor="introduction"] p {
+  margin: 0 auto;
+  width: 60%;
 }
 
 /* =============================================