From 5edd4c7a6d11396e8128ca261796a36266401bc9 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Sun, 26 Apr 2026 21:08:16 +0200
Subject: [PATCH] improved interactivity of drawing gallery page

---
 src/routes/drawings/+page.svelte | 41 ++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/routes/drawings/+page.svelte b/src/routes/drawings/+page.svelte
index 3084b28..b2dc1fc 100644
--- a/src/routes/drawings/+page.svelte
+++ b/src/routes/drawings/+page.svelte
@@ -62,20 +62,32 @@
     }
 
     .selected-img-link {
-        margin: 0;
+        width: fit-content;
+        height: 400px;
+        margin: 0 auto;
+        overflow: hidden;
+    }
+
+    .selected-img-link:hover .selected-img {
+        scale: 1.06;
     }
 
     .selected-img {
         object-fit: contain;
         width: 100%;
-        height: 400px;
+        height: 100%;
         max-height: initial;
+        scale: 1.0;
+        transition: scale var(--duration-animation) var(--anim-curve);
     }
 
     .selected-text-container {
         display: flex;
         flex-direction: column;
         gap: 8px;
+        overflow: scroll;
+        padding-right: 12px;
+        max-height: var(--media-height);
     }
 
     .selected-text-header p {
@@ -106,21 +118,18 @@
         width: 100%;
         overflow: hidden;
         border-radius: var(--border-radius);
-        filter: brightness(70%) saturate(60%);
+        /* filter: brightness(70%) saturate(60%); */
         outline: var(--border-style) var(--border-dash-size) transparent;
-        transition: filter var(--duration-animation) var(--anim-curve),
-                    outline-color var(--duration-animation) var(--anim-curve);
-    }
-    .img-button:hover {
-        filter: brightness(100%) saturate(100%);
-        outline-color: var(--color-highlight);
+        transition: outline-color var(--duration-animation) var(--anim-curve);
     }
 
     .img-button img {
         width: 100%;
         height: 200px;
         object-fit: cover;
-        transition: scale var(--duration-animation) var(--anim-curve);
+        filter: brightness(100%) saturate(80%);
+        transition: scale var(--duration-animation) var(--anim-curve),
+                    filter var(--duration-animation) var(--anim-curve);
     }
     .img-button:hover img {
         scale: 1.12;
@@ -128,4 +137,16 @@
     .img-button:active img {
         scale: 1.08;
     }
+
+    .img-button-container:hover img {
+        filter: brightness(70%) saturate(60%);
+    }
+    
+    .img-button:hover {
+        outline-color: var(--color-highlight);
+    }
+
+    .img-button:hover img {
+        filter: brightness(100%) saturate(100%);
+    }
 </style>
\ No newline at end of file