fix: position of stickman and hover labels

Author: taghizadlaura

website/js/race-navigation.js

@@ -2,7 +2,7 @@
   "use strict";
 
   const sectionLabels = {
-    title: "Start",
+    title: "Warm-up",
     introduction: "Starting Blocks",
     gender: "Gender",
     delegations: "Medals",
@@ -208,15 +208,13 @@
     const runner = nav.querySelector(".race-runner");
     if (!runner) return;
 
-    runner.style.top = `${progress}%`;
-
-    let runnerX = config.mainRunnerX;
-
     if (currentSection.hasSlides && slideIndex > 0) {
-        runnerX = `${config.firstSideRunnerX + (slideIndex - 1) * config.sideStep}px`;
+      runner.style.top = `calc(${progress}% - 30px)`;
+      runner.style.setProperty("--runner-x", `${config.firstSideRunnerX + (slideIndex - 1) * config.sideStep}px`);
+    } else {
+      runner.style.top = `${progress}%`;
+      runner.style.setProperty("--runner-x", config.mainRunnerX);
     }
-
-    runner.style.setProperty("--runner-x", runnerX);
   }
 
   function updateNavClasses(nav, currentSection, sectionIndex, direction) {

website/styles.css

@@ -1614,9 +1614,9 @@ h4 {
 /* Hover labels */
 .race-label {
   position: absolute;
-  left: 36px;
-  top: 50%;
-  transform: translateY(-50%);
+  left: 56px;
+  top: 100%;
+  transform: none;
   opacity: 0;
   pointer-events: none;
 
@@ -1635,6 +1635,20 @@ h4 {
 }
 
 .race-checkpoint:hover .race-label {
+  opacity: 1;
+  transform: translateX(4px);
+}
+
+.race-checkpoint:nth-child(1) .race-label,
+.race-checkpoint:nth-child(2) .race-label,
+.race-checkpoint:last-child .race-label {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.race-checkpoint:nth-child(1):hover .race-label,
+.race-checkpoint:nth-child(2):hover .race-label,
+.race-checkpoint:last-child:hover .race-label {
   opacity: 1;
   transform: translateY(-50%) translateX(4px);
 }