add titles

Author: lathug

website/index.html

@@ -208,6 +208,7 @@ <h2>Which body type excels in a particular discipline?</h2>
       </div>
       <div class="slide" data-anchor="body-types-viz">
         <div id="bodytype-viz">
+          <h2 class="bodytype-viz-title">Olympic body types by discipline</h2>
           <div class="bodytype-controls">
             <div class="bodytype-control">
               <label for="bodytype-season">Season:</label>
@@ -264,10 +265,13 @@ <h2>How do geopolitical conflicts affect the Olympic Games?</h2>
         </div>
       </div>
       <div class="slide" data-anchor="geopolitics-viz">
-        <p class="geo-intro">
+        <h2 class="geo-viz-title">Geopolitical disruptions in the Olympic Games</h2>
+        <p class="geo-viz-subtitle">
           Click on a year in the timeline to explore its Olympic context. For boycott years, open a participation comparison.
         </p>
 
+        <p class="geo-intro">
+
         <div class="geo-layout">
           <div class="geo-map-column">
             <div id="geopolitics-map-viz"></div>
@@ -315,9 +319,18 @@ <h2>What would a fair distribution of Olympic medals look like?</h2>
         </div>
       </div>
       <div class="slide" data-anchor="fair-viz">
+        <h2 class="fair-viz-title">Actual medals vs. fair medals</h2>
+        <p class="fair-viz-subtitle">
+          Compare two countries and see how medal counts change when population and GDP are taken into account.
+        </p>
+
         <div id="fair-viz"></div>
       </div>
       <div class="slide" data-anchor="fair-ranking">
+        <h2 class="fair-viz-title">Fair ranking of countries</h2>
+        <p class="fair-viz-subtitle">
+          See how countries rank when medal counts are adjusted for population and GDP.
+        </p>
         <div id="fair-ranking-viz"></div>
       </div>
     </div>

website/js/geopolitics-conflicts.js

@@ -361,7 +361,7 @@
     if (boycottYears.has(selected.year)) {
       button
         .classed("visible", true)
-        .text("Click to see how this boycott influenced participation")
+        .text("Click here to see how this boycott influenced participation")
         .on("click", () => {
           const participationData = addNeighborValues(
             computeParticipationAroundYear(selected.year, 16)

website/styles.css

@@ -788,11 +788,31 @@ p {
 
 .geo-hover-text {
   margin: 0 0 4px;
+  font-size: 18px;
 }
 
 .geo-country-hint {
   margin: 4px 0 0;
-  font-size: 24px;
+  font-size: 18px;
+}
+
+.geo-viz-title {
+  font-family: "Elms Sans", sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  width: 100%;
+  padding-bottom: 6px;
+  margin: 0 auto;
+}
+
+.geo-viz-subtitle {
+  font-family: "Elms Sans", sans-serif;
+  width: 75%;
+  margin: 0 auto 10px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.25;
+  color: rgba(255,255,255,0.75);
 }
 
 /* =============================================
@@ -1039,6 +1059,14 @@ p {
   }
 }
 
+.bodytype-viz-title {
+  font-family: "Elms Sans", sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  width: 100%;
+  padding-bottom: 6px;
+  margin: 0 auto;
+}
 
 /* =============================================
    Fair distribution controls
@@ -1285,6 +1313,25 @@ p {
   max-width: 360px;
 }
 
+.fair-viz-title {
+  font-family: "Elms Sans", sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  width: 100%;
+  padding-bottom: 6px;
+  margin: 0 auto;
+}
+
+.fair-viz-subtitle {
+  font-family: "Elms Sans", sans-serif;
+  width: 75%;
+  margin: 0 auto 14px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.25;
+  color: rgba(255,255,255,0.75);
+}
+
 /* =============================================
    Footer
    =========================================== */