fix: normalise title maj & correct hover label of footer

Author: taghizadlaura

website/index.html

@@ -90,7 +90,7 @@ <h2>How has gender representation evolved across Olympic sports and disciplines
       </div>
       <div class="slide" data-anchor="gender-container">
         <div id="gender-viz">
-          <h3>Gender representation in Olympic sports</h2>
+          <h3>Gender Representation in Olympic Sports</h2>
           <h4>
             Hover over the disciplines to explore how men’s and women’s participation differs across sports and disciplines.
           </h4>
@@ -142,7 +142,7 @@ <h2>Which delegations tend to win medals, and which don't?</h2>
 
       <div class="slide" data-anchor="medal-flow">
         <div id="medal-viz">
-          <h3 class="medal-viz-title">Distribution of medals in Summer Olympics</h3>
+          <h3 class="medal-viz-title">Distribution of Medals in Winter Olympics</h3>
 
           <div class="medal-controls">
             <div>
@@ -175,7 +175,7 @@ <h4 class="medal-viz-subtitle"></h4>
       </div>
 
       <div class="slide" data-anchor="never-medaled">
-        <h3 class="never-medaled-viz-title">Countries that have participated without ever winning a medal</h3>
+        <h3 class="never-medaled-viz-title">Countries That Have Participated Without Ever Winning a Medal</h3>
 
         <div id="never-medaled-viz"></div>
 
@@ -214,7 +214,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>
+          <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>
@@ -271,7 +271,7 @@ <h2>How do geopolitical conflicts affect the Olympic Games?</h2>
         </div>
       </div>
       <div class="slide" data-anchor="geopolitics-viz">
-        <h2 class="geo-viz-title">Geopolitical disruptions in the Olympic Games</h2>
+        <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>
@@ -325,15 +325,15 @@ <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">Fair comparison of countries</h2>
+        <h2 class="fair-viz-title">Fair Comparison of Countries</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>
+        <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>
@@ -342,7 +342,7 @@ <h2 class="fair-viz-title">Fair ranking of countries</h2>
     </div>
 
     <div class="section" data-anchor="conclusion">
-      <h2>Finish line</h2>
+      <h2>Finish Line</h2>
 
       <div class="text-columns">
         <div class="text-column">

website/js/delegations.js

@@ -836,7 +836,7 @@
       .attr("class", "medal-sankey-svg");
 
     d3.select(selectors.root).select(".medal-viz-title").text(
-      `Distribution of medals in ${graph.season} Olympics`
+      `Distribution of Medals in ${graph.season} Olympics`
     );
 
     d3.select(selectors.root).select(".medal-viz-subtitle").text(

website/js/fair-distribution.js

@@ -812,8 +812,8 @@
       </div>
 
       <div class="fair-ranking-layout">
-        ${rankingTable("Actual medal ranking", actualRanking, "actual")}
-        ${rankingTable("Fair medal ranking", fairRanking, "fair")}
+        ${rankingTable("Actual Medal Ranking", actualRanking, "actual")}
+        ${rankingTable("Fair Medal Ranking", fairRanking, "fair")}
       </div>
     `);
 

website/js/never-medaled.js

@@ -676,7 +676,7 @@
     const path = d3.geoPath().projection(projection);
 
     d3.select(".never-medaled-viz-title").text(
-      `Countries that have participated without ever winning a medal`
+      `Countries That Have Participated Without Ever Winning a Medal`
     );
 
     const byCountry = new Map(

website/js/race-navigation.js

@@ -67,9 +67,12 @@
         </div>
 
         <span class="race-anchor-label">FINISH</span>
-        <button class="race-finish-btn" type="button" title="Go to Finish">
-          ${waterBottleSvg()}
-        </button>
+        <div class="race-finish-wrap">
+          <button class="race-finish-btn" type="button">
+            ${waterBottleSvg()}
+          </button>
+          <span class="race-label">Cool Down</span>
+        </div>
       </div>
     `;
 

website/styles.css

@@ -1506,6 +1506,22 @@ h4 {
   transform: scale(1.08);
 }
 
+.race-finish-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.race-finish-wrap .race-label {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.race-finish-wrap:hover .race-label {
+  opacity: 1;
+  transform: translateY(-50%) translateX(4px);
+}
+
 .race-track {
   position: relative;
   width: 100%;