diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte index de6faa1..6d86a83 100644 --- a/src/components/ui/GalleryAnimation.svelte +++ b/src/components/ui/GalleryAnimation.svelte @@ -59,3 +59,65 @@ {/each} + + diff --git a/src/styles/gallery.css b/src/styles/gallery.css deleted file mode 100644 index cef463b..0000000 --- a/src/styles/gallery.css +++ /dev/null @@ -1,65 +0,0 @@ -/* Gallery animation */ -:root { - --gallery-gap: 8px; - --gallery-duration: 24s; -} - -.gallery-animation { - width: 100%; - height: 100%; - overflow: hidden; -} - -/* Vertical mode (Portfolio) */ -.gallery-animation--vertical { - display: flex; - flex-direction: row; - gap: var(--gallery-gap); -} - -.gallery-animation--vertical .gallery-animation__column { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.gallery-animation--vertical .gallery-animation__track { - display: flex; - flex-direction: column; - animation-timing-function: linear; - animation-iteration-count: infinite; -} - -.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track { - animation-name: galleryScrollDown; - animation-duration: var(--gallery-duration); -} - -.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track { - animation-name: galleryScrollUp; - animation-duration: var(--gallery-duration); -} - -.gallery-animation__image { - width: 100%; - height: auto; - display: block; - object-fit: contain; -} - -@keyframes galleryScrollDown { - from { transform: translateY(0); } - to { transform: translateY(-50%); } -} - -@keyframes galleryScrollUp { - from { transform: translateY(-50%); } - to { transform: translateY(0); } -} - -@media (prefers-reduced-motion: reduce) { - .gallery-animation__track { - animation: none; - } -} diff --git a/src/styles/index.css b/src/styles/index.css index c02597e..d437c36 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,4 +6,3 @@ @import './buttons.css'; @import './cursor.css'; @import './utils.css'; -@import './gallery.css';