1 files changed, 42 insertions, 0 deletions
diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte
new file mode 100644
index 0000000..c3b6386
--- /dev/null
+++ b/frontend/src/lib/gallery/Gallery.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { PageFragment } from '$gql/graphql';
+	import GalleryPage from './GalleryPage.svelte';
+
+	export let pages: PageFragment[];
+</script>
+
+<div class="max-h-full gap-2 overflow-auto p-1 pr-3">
+	{#each pages as page, index}
+		<GalleryPage {page} {index} on:open on:cover />
+	{/each}
+</div>
+
+<style>
+	:root {
+		--gallery-image-size: 100px;
+	}
+
+	@media (min-width: 1280px) {
+		:root {
+			--gallery-image-size: 180px;
+		}
+	}
+
+	@media (min-width: 1600px) {
+		:root {
+			--gallery-image-size: 200px;
+		}
+	}
+
+	@media (min-width: 1920px) {
+		:root {
+			--gallery-image-size: 240px;
+		}
+	}
+
+	div {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(var(--gallery-image-size), 1fr));
+		grid-auto-rows: fit-content(400px);
+	}
+</style>