denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved interactivity of drawing gallery page

Browse Source
This commit is contained in:
denizk0461
2026-04-26 21:08:16 +02:00
parent 9ff26d3c0b
commit 5edd4c7a6d
1 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/routes/drawings/+page.svelte
View File

@@ -62,20 +62,32 @@
} }
.selected-img-link { .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 { .selected-img {
object-fit: contain; object-fit: contain;
width: 100%; width: 100%;
height: 400px; height: 100%;
max-height: initial; max-height: initial;
scale: 1.0;
transition: scale var(--duration-animation) var(--anim-curve);
} }
.selected-text-container { .selected-text-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
overflow: scroll;
padding-right: 12px;
max-height: var(--media-height);
} }
.selected-text-header p { .selected-text-header p {
@@ -106,21 +118,18 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius); border-radius: var(--border-radius);
filter: brightness(70%) saturate(60%); /* filter: brightness(70%) saturate(60%); */
outline: var(--border-style) var(--border-dash-size) transparent; outline: var(--border-style) var(--border-dash-size) transparent;
transition: filter var(--duration-animation) var(--anim-curve), transition: outline-color 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);
} }
.img-button img { .img-button img {
width: 100%; width: 100%;
height: 200px; height: 200px;
object-fit: cover; 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 { .img-button:hover img {
scale: 1.12; scale: 1.12;
@@ -128,4 +137,16 @@
.img-button:active img { .img-button:active img {
scale: 1.08; 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> </style>