diff --git a/scripts/projects.js b/scripts/projects.js index e13a7d1..5819273 100644 --- a/scripts/projects.js +++ b/scripts/projects.js @@ -119,6 +119,17 @@ document.querySelector(".carousel").addEventListener("click", (event) => { } }); +document.querySelector(".carousel").addEventListener("dblclick", (event) => { + console.log("hi") + if (event.target.parentElement.parentElement.classList.contains("active")) { + if ((Date.now() - lastChange) < 500) return; + nextSlide(); + resetCarouselLoop(); + lastChange = Date.now(); + } +}); + + function nextSlide() { activeIndex = (activeIndex + 1) % items.length; updateCarousel(); @@ -130,10 +141,10 @@ function lastSlide() { } updateCarousel(); -carouselLoop = setInterval(nextSlide, 2000); +carouselLoop = setInterval(nextSlide, 4000); function resetCarouselLoop() { lastChange = Date.now(); clearInterval(carouselLoop); - carouselLoop = setInterval(nextSlide, 2000); + carouselLoop = setInterval(nextSlide, 4000); } \ No newline at end of file diff --git a/styles/projects.css b/styles/projects.css index b9e7089..c8787bd 100644 --- a/styles/projects.css +++ b/styles/projects.css @@ -1,7 +1,7 @@ .carousel { height: 100vh; width: 100vw; - padding: 0 0; + padding: 0; overflow: hidden; } @@ -34,7 +34,7 @@ justify-content: center; align-items: center; text-align: center; - transition: 0.6s; + transition: 0.8s; opacity: 0.1; } @@ -128,6 +128,19 @@ } +@media only screen and (max-width: 750px) { + .carousel-inner { + height: 0; + } + .carousel-item-inner { + width: 100vw; + box-sizing: border-box; + } + + .carousel-item-inner img { + width: 100%; + } +} @media (prefers-color-scheme: dark) { .title { diff --git a/styles/styles.css b/styles/styles.css index a18f894..77483bd 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -127,6 +127,32 @@ a { margin: 1rem auto; } +@media only screen and (max-width: 700px) { + .menu { + left: 0; + bottom: 0; + right: 0; + top: auto; + width: auto; + height: 5rem; + } + .menu div { + margin: auto; + } + .menu:hover { + left: 0; + } + .menu .item { + display: inline-flex; + margin: auto .5rem; + transform: scale(1.3); + } + .menu .item:hover { + margin: auto 1rem; + transform: scale(1.5); + } +} + @media (prefers-color-scheme: dark) { .menu .item { background-color: #333;