diff --git a/index.html b/index.html index 32c910c..01a16ad 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ Document +
@@ -15,11 +16,21 @@
+
+

Hours of Deliciousness

+

Broughton:

+

Sunday - Thursday: 11AM - 10PM

+

Friday - Saturday: 11AM - 11PM

+

Airport Kiosk: Daily 11AM - 7PM

+

Airport Shop: Daily Noon - 8PM

+

What's Popular

@@ -129,14 +140,6 @@

Is Your Troop Visiting Savannah?

Leopolds and the Girl Scouts! A true Savannah Tradition!
-
-

Hours of Deliciousness

-

Broughton:

-

Sunday - Thursday: 11AM - 10PM

-

Friday - Saturday: 11AM - 11PM

-

Airport Kiosk: Daily 11AM - 7PM

-

Airport Shop: Daily Noon - 8PM

-

Join our Family

diff --git a/slider.js b/slider.js new file mode 100644 index 0000000..ddc7c90 --- /dev/null +++ b/slider.js @@ -0,0 +1,67 @@ +const slider = document.querySelector('.slider'); +const sliderContainer = document.querySelector('.sliderContainer'); +const items = document.querySelectorAll('.item'); +const rowGap = (window.innerWidth / 2); // Adjust this value based on your desired row gap + +let currentIndex = 0; +let touchStartX = 0; + +// Calculate the total width of all items, including the row gap +const totalItemsWidth = Array.from(items).reduce((total, item) => { + const itemStyle = getComputedStyle(item); + const itemWidth = item.offsetWidth + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight); + return total + itemWidth + rowGap; +}, 0); + +// Set the width of the slider container to accommodate all items +sliderContainer.style.width = `${totalItemsWidth}px`; + +function slideTo(index) { + const itemStyle = getComputedStyle(items[index]); + const itemMarginLeft = parseFloat(itemStyle.marginLeft); + const itemMarginRight = parseFloat(itemStyle.marginLeft); + let translation; + + if (index < 0 || index >= items.length) { + return; + } + + translation = index * (items[0].offsetWidth + rowGap); + sliderContainer.style.transform = `translateX(-${translation}px)`; + currentIndex = index; +} + +function slideNext() { + slideTo(currentIndex + 1); +} + +function slidePrev() { + slideTo(currentIndex - 1); +} + +setInterval(slideNext, 4500); // Automatically slide every 4.5 seconds + +slider.addEventListener('touchstart', handleTouchStart); +slider.addEventListener('touchmove', handleTouchMove); +slider.addEventListener('touchend', handleTouchEnd); + +function handleTouchStart(event) { + touchStartX = event.touches[0].clientX; +} + +function handleTouchMove(event) { + event.preventDefault(); // Prevent default scrolling behavior + + const touchX = event.touches[0].clientX; + const touchDiff = touchX - touchStartX; + + if (touchDiff > 50) { + slidePrev(); + } else if (touchDiff < -50) { + slideNext(); + } +} + +function handleTouchEnd() { + touchStartX = 0; +} diff --git a/style.css b/style.css index c6b18a9..c9de364 100644 --- a/style.css +++ b/style.css @@ -59,6 +59,7 @@ img { height: 53px; align-items: center; } + .navbar button:not(:last-child)::after { content: "•"; margin-left: 4vw; @@ -91,8 +92,35 @@ button { font-weight: 100; } +.barber-pole { + position: relative; + font-size: 2rem; + overflow: hidden; +} + +.barber-pole #order { + background: linear-gradient(45deg, white 10%, #d8c79a 10%, #d8c79a 20%, white 20%, white 30%, #d8c79a 30%, #d8c79a 40%, white 40%, white 50%, #d8c79a 50%, #d8c79a 60%, white 60%, white 70%, #d8c79a 70%, #d8c79a 80%, white 80%, white 90%, #d8c79a 90%); + background-size: 200% 100%; + animation: barber-pole-animation 15s linear infinite; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + margin: 0; +} + +@keyframes barber-pole-animation { + 0% { + background-position: 0 0; + } + 100% { + background-position: 500% 0; + } +} + + .header button { background: none; + font-size: 26px; } #oval { @@ -174,7 +202,9 @@ h1, h2, h3, h4, h5, h6 { display: flex; width: fit-content; overflow: hidden; - justify-content: space-between; + gap: 50vw; + position: relative; + left: 1%; } .sliderContainer { @@ -187,19 +217,18 @@ h1, h2, h3, h4, h5, h6 { .sliderWrapper { width: 99.5%; overflow: hidden; - background-color: #ffecb6; + background-color: white; border: 1px solid #E28C4A; } .sliderWrapper h1 { - font-size: 13.5vw; + font-size: 13vw; margin-bottom: 10px; - color: #9D000D; + color: black; } .item { flex: 0 0 300px; - margin: 0 11vw 0 11vw; display: flex; flex-direction: column; } @@ -224,6 +253,7 @@ h1, h2, h3, h4, h5, h6 { text-align: center; margin: 0 10px 0 10px; padding-bottom: 10px; + font-size: 18px; } .about button { @@ -364,13 +394,13 @@ h1, h2, h3, h4, h5, h6 { .wrapper { height: 44vh; width: 99.5%; - background-color: white; + background: radial-gradient(rgb(230, 230, 180), rgb(235, 235, 141)); margin-bottom: -5px; overflow: hidden; position: relative; border: 1px solid #bfb398; display: inline-block; - margin-bottom: -3vh; + margin-bottom: -2vh; } @@ -411,9 +441,10 @@ h1, h2, h3, h4, h5, h6 { } -@media (max-width: 490px) { -#butterPecan { - margin-left: 12.5vw; +@media (min-width: 401px) { + +.slider { + left: 2.3%; } .wrapper {