feat: add arts section and move FA and Itaku to it

static/script.js

@@ -119,7 +119,7 @@ function setPhotoSectionImagesMargin() {
   for (i = 1; i < photoSectionImages.length; i++) {
     photoSectionImages[i].style.setProperty(
       "--transform-y",
-      `calc(376px*-${i})`
+      `calc(372px*-${i})`
     );
     photoSectionImages[i].style.setProperty("display", `none`);
   }
@@ -133,7 +133,7 @@ function changePhotoSectionImage() {
   photoSectionImages[1].style.setProperty("display", `block`);
 
   setTimeout(() => {
-    photoSectionImages[0].style.setProperty("--transform-y", `376px`);
+    photoSectionImages[0].style.setProperty("--transform-y", `372px`);
     photoSectionImages[1].style.setProperty("--transform-y", `0px`);
   }, IMAGE_TRANSITION_DELAY / 2);
 
@@ -159,7 +159,70 @@ function changePhotoSectionImage() {
       );
       element.style.setProperty(
         "--transform-y",
-        `calc(376px*-${Number(element.getAttribute("data-slide")) - 1})`
+        `calc(372px*-${Number(element.getAttribute("data-slide")) - 1})`
+      );
+      element.setAttribute(
+        "data-slide",
+        Number(element.getAttribute("data-slide")) - 1
+      );
+    }
+  }, IMAGE_ANIMATION_DELAY + (IMAGE_TRANSITION_DELAY + 500));
+}
+
+function setArtsSectionImagesMargin() {
+  const artSectionImages = document.querySelectorAll(
+    "[data-section-image='arts']"
+  );
+  for (i = 0; i < artSectionImages.length; i++) {
+    artSectionImages[i].style.setProperty(
+      "--transform-duration",
+      `${IMAGE_TRANSITION_DELAY}ms`
+    );
+  }
+  for (i = 1; i < artSectionImages.length; i++) {
+    artSectionImages[i].style.setProperty(
+      "--transform-y",
+      `calc(186px*-${i})`
+    );
+    artSectionImages[i].style.setProperty("display", `none`);
+  }
+}
+
+function changeArtsSectionImage() {
+  const artSectionImages = document.querySelectorAll(
+    "[data-section-image='arts']"
+  );
+  const artSectionContainer = document.getElementById("arts-image");
+  artSectionImages[1].style.setProperty("display", `block`);
+
+  setTimeout(() => {
+    artSectionImages[0].style.setProperty("--transform-y", `186px`);
+    artSectionImages[1].style.setProperty("--transform-y", `0px`);
+  }, IMAGE_TRANSITION_DELAY / 2);
+
+  setTimeout(() => {
+    artSectionImages[0].style.setProperty("display", `none`);
+    const backEl = document
+      .querySelector(`[data-section-image='arts'][data-slide='0']`)
+      .cloneNode(true);
+    artSectionContainer.removeChild(
+      document.querySelector(`[data-section-image='arts'][data-slide='0']`)
+    );
+    backEl.setAttribute("data-slide", artSectionImages.length - 1);
+    artSectionContainer.appendChild(backEl);
+  }, IMAGE_ANIMATION_DELAY + IMAGE_TRANSITION_DELAY);
+
+  setTimeout(() => {
+    const artSectionImagesRev = document.querySelectorAll(
+      "[data-section-image='arts']"
+    );
+    for (i = 1; i < artSectionImagesRev.length; i++) {
+      const element = document.querySelector(
+        `[data-section-image='arts'][data-slide='${i}']`
+      );
+      element.style.setProperty(
+        "--transform-y",
+        `calc(186px*-${Number(element.getAttribute("data-slide")) - 1})`
       );
       element.setAttribute(
         "data-slide",
@@ -174,4 +237,6 @@ window.onload = () => {
   setInterval(updatePlayingTrack, 180000);
   setPhotoSectionImagesMargin();
   setInterval(changePhotoSectionImage, IMAGE_CHANGE_DELAY);
+  setArtsSectionImagesMargin();
+  setInterval(changeArtsSectionImage, IMAGE_CHANGE_DELAY);
 };

static/tailwind.css

@@ -1081,6 +1081,11 @@ video {
   background-color: rgb(255 235 60 / var(--tw-bg-opacity));
 }
 
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1089,6 +1094,14 @@ video {
   --tw-bg-opacity: 0.5;
 }
 
+.bg-opacity-10 {
+  --tw-bg-opacity: 0.1;
+}
+
+.bg-opacity-20 {
+  --tw-bg-opacity: 0.2;
+}
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1153,6 +1166,10 @@ video {
   text-align: right;
 }
 
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1219,15 +1236,56 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
 
+.mix-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
+.mix-blend-exclusion {
+  mix-blend-mode: exclusion;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-black {
+  --tw-shadow-color: #000;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .brightness-50 {
   --tw-brightness: brightness(.5);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1238,6 +1296,12 @@ video {
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition-\[border-color\] {
   transition-property: border-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);