Put navbar on bottom for mobile, carousel takes full width on mobile, double click for next carousel slide, slow project carousel

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);
 }

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 {

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;