diff --git a/reviews.html b/reviews.html index 67def80..521bd9a 100644 --- a/reviews.html +++ b/reviews.html @@ -294,7 +294,6 @@ for (let i = 0; i < reviews.length; i++) { let review = reviews[i]; let linkedName = `${review.name}`; - // load reviews target.insertAdjacentHTML( "beforeend", @@ -323,21 +322,19 @@ /** gallery jiggling (indicate to user they can slide images for comparison) */ let jiggled = false; + let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25; async function jiggleGallerySliders() { - let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25; - console.log('jiggle trheshold: ' + jiggleThreshold); - console.log('current pos: ' + window.scrollY); - // ensure jiggle only triggers once, upon gallery scrolling into view if (window.scrollY < jiggleThreshold || jiggled) return; - - // once user scrolls to gallery, move sliders on all images up a bit + jiggled = true; + + // 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); diff --git a/services2.html b/services2.html index f74468d..c8ac21a 100644 --- a/services2.html +++ b/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 @@