updates to new services page (better formatting)

reviews.html

@@ -294,7 +294,6 @@
         for (let i = 0; i < reviews.length; i++) {
           let review = reviews[i];
           let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`;
-
           // load reviews
           target.insertAdjacentHTML(
             "beforeend",
@@ -323,21 +322,19 @@
 
       /** gallery jiggling (indicate to user they can slide images for comparison) */
       let jiggled = false;
-      async function jiggleGallerySliders() {
       let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25;
-        console.log('jiggle trheshold: ' + jiggleThreshold);
-        console.log('current pos: ' + window.scrollY);
-
+      async function jiggleGallerySliders() {
         // ensure jiggle only triggers once, upon gallery scrolling into view
         if (window.scrollY < jiggleThreshold || jiggled) return;
+        jiggled = true;
 
-        // once user scrolls to gallery, move sliders on all images up a bit
+        // once user scrolls to gallery, move sliders on all images right a bit
         let sliders = juxtapose.sliders;
         for (let i = 0; i < sliders.length; i++) {
           sliders[i].updateSlider(60, true);
         }
         
-        // sleep, then slide them all down,
+        // sleep, then slide them all left,
         await new Promise(resolve => setTimeout(resolve, 1000));
         for (let i = 0; i < sliders.length; i++) {
           sliders[i].updateSlider(40, true);
@@ -348,7 +345,6 @@
         for (let i = 0; i < sliders.length; i++) {
           sliders[i].updateSlider(50, true);
         }
-        jiggled = true;
       }
 
 
@@ -374,7 +370,7 @@
           images[i].style.height = newHeight + 'px';
         }
         
-        // resize images in iframe to match
+        // resize images in each iframe to match new dimensions
         images = document.getElementsByClassName("jx-image");
         for (let i = 0; i < images.length; i++) {
           images[i].style.width  = newWidth  + 'px';
@@ -383,6 +379,7 @@
           images[i].children[0].style.height = newHeight + 'px';
         }
 
+        // quickly touch every iframe/slider (otherwise the images glitch out until user interacts with slider again)
         let sliders = juxtapose.sliders;
         for (let i = 0; i < sliders.length; i++) {
           sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true);

services2.html

@@ -24,19 +24,28 @@
 
       #categoryLinks {
         display: flex;
+        flex-wrap: wrap;
         justify-content: space-evenly;
         align-items: center;
-        gap: 2rem;
+        gap: 5rem;
 
-        margin-top: 2rem;
+        margin-top: 5rem;
       }
 
       .jumpLink {
-        border: 1px solid var(--gold);
         padding: 1rem;
-        border-radius: 1rem;
+        display: flex;
+        align-items: center;;
+        
+        height: 8rem;
+        padding: 0 2rem;
+        
         text-decoration: none;
         color: var(--gold);
+        
+        border: 1px solid var(--gold);
+        border-radius: 1rem;
+        
         transition: 0.3s ease;
       }
       .jumpLink:hover {
@@ -174,11 +183,11 @@
         <div id="tableOfContents">
           <h1>Our Services</h1>
           <div id="categoryLinks">
-            <a href="#packagesJump" class="jumpLink"><h2>Service<br/>Packages</h2></a>
-            <a href="#ceramicJump" class="jumpLink"><h2>Ceramic<br/>Coating</h2></a>
-            <a href="#paintJump"><h2>Polish &<br/>Paint Correction</h2></a>
-            <a href="#exteriorJump"><h2>Exterior<br/>Detailing</h2></a>
-            <a href="#interiorJump"><h2>Interior<br/>Detailing</h2></a>
+            <a href="#packagesJump" class="jumpLink"><h2>Service Packages</h2></a>
+            <a href="#ceramicJump"  class="jumpLink"><h2>Ceramic Coating</h2></a>
+            <a href="#paintJump"    class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
+            <a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
+            <a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
           </div>
         </div>