diff options
| author | Fuwn <[email protected]> | 2024-03-03 22:36:44 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-03-03 22:36:44 -0800 |
| commit | 9f8df698275ecd09f80eaf968c1cec6f95cbd961 (patch) | |
| tree | 3d8d5bb4dbb869a9cd7734f8549148bcb5142ea7 /src | |
| parent | feat(girls): make languages card a details (diff) | |
| download | due.moe-9f8df698275ecd09f80eaf968c1cec6f95cbd961.tar.xz due.moe-9f8df698275ecd09f80eaf968c1cec6f95cbd961.zip | |
feat(girls): hoverable images
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/girls/+page.svelte | 7 | ||||
| -rw-r--r-- | src/routes/girls/[language]/+page.svelte | 7 | ||||
| -rw-r--r-- | src/styles/girls.scss | 23 |
3 files changed, 35 insertions, 2 deletions
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; +} |