From 9f8df698275ecd09f80eaf968c1cec6f95cbd961 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 3 Mar 2024 22:36:44 -0800
Subject: feat(girls): hoverable images

---
 src/routes/girls/+page.svelte            |  7 ++++++-
 src/routes/girls/[language]/+page.svelte |  7 ++++++-
 src/styles/girls.scss                    | 23 +++++++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/girls.scss

(limited to 'src')

diff --git a/src/routes/girls/+page.svelte b/src/routes/girls/+page.svelte
index 981d7078..6d3cbc62 100644
--- a/src/routes/girls/+page.svelte
+++ b/src/routes/girls/+page.svelte
@@ -4,6 +4,7 @@
 	import Message from '$lib/Loading/Message.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import root from '$lib/Utility/root';
+	import '$styles/girls.scss';
 </script>
 
 <HeadTitle route="Anime Girls Holding Programming Books" path="/girls" />
@@ -16,7 +17,11 @@
 
 				<Skeleton grid={true} count={1} width="49%" height="16.25em" />
 			{:then randomImage}
-				<img src={randomImage.image} alt="A random anime girl holding a programming book" />
+				<div class="preview">
+					<a href={randomImage.image} target="_blank">
+						<img src={randomImage.image} alt="A random anime girl holding a programming book" />
+					</a>
+				</div>
 			{/await}
 		</div>
 		<div>
diff --git a/src/routes/girls/[language]/+page.svelte b/src/routes/girls/[language]/+page.svelte
index 6cafe198..8b8764d0 100644
--- a/src/routes/girls/[language]/+page.svelte
+++ b/src/routes/girls/[language]/+page.svelte
@@ -2,6 +2,7 @@
 	import Senpy from '$lib/Data/senpy';
 	import Message from '$lib/Loading/Message.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import '$styles/girls.scss';
 
 	export let data;
 </script>
@@ -14,7 +15,11 @@
 	{:then images}
 		<div class="images">
 			{#each images as image}
-				<img src={image} alt="An anime girl holding a programming book" />
+				<a href={image} target="_blank">
+					<div class="preview">
+						<img src={image} alt="An anime girl holding a programming book" />
+					</div>
+				</a>
 			{/each}
 		</div>
 	{/await}
diff --git a/src/styles/girls.scss b/src/styles/girls.scss
new file mode 100644
index 00000000..c922bc2b
--- /dev/null
+++ b/src/styles/girls.scss
@@ -0,0 +1,23 @@
+.preview {
+	$transition: transform 0.3s ease;
+
+	margin: 0.15rem;
+
+	img {
+		border-radius: 8px;
+		transition: $transition;
+	}
+
+	&:hover {
+		img {
+			position: relative;
+			z-index: 2;
+			transition: $transition;
+			transform: scale(1.05);
+		}
+	}
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
-- 
cgit v1.2.3