diff --git a/css/main.css b/css/main.css index dd8f69a..7c71a26 100644 --- a/css/main.css +++ b/css/main.css @@ -63,9 +63,34 @@ main section img { -ms-overflow-style: none; scrollbar-width: none; } +.gallery:hover { + cursor: grab; +} .gallery::-webkit-scrollbar { display: none; } + +/* +#gallery::before,#gallery::after { + content: ""; + + width: 5rem; height: 10rem; + display: block; + + position: absolute; bottom: 1rem; +} +#gallery::before { + left: 1rem; + + background: linear-gradient(to right, var(--bg) 0%, transparent 100%); +} +#gallery::after { + right: 1rem; + + background: linear-gradient(to left, var(--bg) 0%, transparent 100%); +} +*/ + .gallery img { margin: 0 0.5rem; @@ -75,13 +100,14 @@ main section img { user-select: none; - transition: transform 0.1s ease-out; + transition: transform 0.2s cubic-bezier(.58,.01,.07,1); } .gallery img:hover { margin: -0.25rem 0.25rem; border: 0.25rem var(--green) solid; transform: scale(0.9); } + .gallery img:first-child { margin-left: 0; } diff --git a/gallery/animal_smile.webp b/gallery/animal_smile.webp new file mode 100644 index 0000000..43ab1fb Binary files /dev/null and b/gallery/animal_smile.webp differ diff --git a/gallery/photo_corruption.webp b/gallery/photo_corruption.webp deleted file mode 100644 index ada47b3..0000000 Binary files a/gallery/photo_corruption.webp and /dev/null differ diff --git a/gallery/photo_land.webp b/gallery/photo_land.webp new file mode 100644 index 0000000..6ee1cb1 Binary files /dev/null and b/gallery/photo_land.webp differ diff --git a/gallery/photo_nice.webp b/gallery/photo_nice.webp new file mode 100644 index 0000000..3356276 Binary files /dev/null and b/gallery/photo_nice.webp differ diff --git a/gallery/photo_spook.webp b/gallery/photo_spook.webp new file mode 100644 index 0000000..bbfd8bf Binary files /dev/null and b/gallery/photo_spook.webp differ diff --git a/gallery/photo_train.webp b/gallery/photo_train.webp new file mode 100644 index 0000000..b96e1eb Binary files /dev/null and b/gallery/photo_train.webp differ diff --git a/scripts/gallery.js b/scripts/gallery.js index 68b684f..eaf05bc 100644 --- a/scripts/gallery.js +++ b/scripts/gallery.js @@ -13,12 +13,18 @@ slider.addEventListener("mousedown", (e) => { isDown = true; startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; + + document.querySelector(".gallery").style.cursor= "grabbing"; }); slider.addEventListener("mouseleave", () => { isDown = false; + + document.querySelector(".gallery").style.cursor= "grab"; }); slider.addEventListener("mouseup", () => { isDown = false; + + document.querySelector(".gallery").style.cursor= "grab"; }); slider.addEventListener("mousemove", (e) => { if (!isDown) return;