diff --git a/index.html b/index.html index 3bac881..a80337c 100644 --- a/index.html +++ b/index.html @@ -268,7 +268,7 @@ -

PHOTOS

+

PHOTOS

+
+
+
+ + + + + + + + +

+ ARTS

+
+
+ +
+ +
+

Furaffinity

+

radiquum

+
+
+ + +
+ +
+

Itaku

+

radiquum

+
+
+ +
@@ -355,17 +410,6 @@
- -
- -
-

Furaffinity

-

radiquum

-
-
-
@@ -375,16 +419,6 @@
- -
- -
-

Itaku

-

radiquum

-
-
- diff --git a/static/assets/arts/art_blep.jpg b/static/assets/arts/art_blep.jpg new file mode 100644 index 0000000..604dae9 Binary files /dev/null and b/static/assets/arts/art_blep.jpg differ diff --git a/static/assets/arts/art_cheeseoncheese.jpg b/static/assets/arts/art_cheeseoncheese.jpg new file mode 100644 index 0000000..17f3abb Binary files /dev/null and b/static/assets/arts/art_cheeseoncheese.jpg differ diff --git a/static/assets/arts/art_hugs.jpg b/static/assets/arts/art_hugs.jpg new file mode 100644 index 0000000..294a7e7 Binary files /dev/null and b/static/assets/arts/art_hugs.jpg differ diff --git a/static/assets/arts/art_kiguboys.jpg b/static/assets/arts/art_kiguboys.jpg new file mode 100644 index 0000000..49cb4b8 Binary files /dev/null and b/static/assets/arts/art_kiguboys.jpg differ diff --git a/static/assets/arts/art_park.jpg b/static/assets/arts/art_park.jpg new file mode 100644 index 0000000..2ea326d Binary files /dev/null and b/static/assets/arts/art_park.jpg differ diff --git a/static/assets/arts/art_sad.jpg b/static/assets/arts/art_sad.jpg new file mode 100644 index 0000000..cb4ba00 Binary files /dev/null and b/static/assets/arts/art_sad.jpg differ diff --git a/static/assets/arts/art_sleepwithplush.jpg b/static/assets/arts/art_sleepwithplush.jpg new file mode 100644 index 0000000..675871c Binary files /dev/null and b/static/assets/arts/art_sleepwithplush.jpg differ diff --git a/static/assets/arts/art_standing.jpg b/static/assets/arts/art_standing.jpg new file mode 100644 index 0000000..5fe0801 Binary files /dev/null and b/static/assets/arts/art_standing.jpg differ diff --git a/static/script.js b/static/script.js index d1f80dd..e93c89d 100644 --- a/static/script.js +++ b/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); }; diff --git a/static/tailwind.css b/static/tailwind.css index 2cf0780..02f0d07 100644 --- a/static/tailwind.css +++ b/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);