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

adjusted gallery to scale down on mobile devices

Browse Source
This commit is contained in:
denizk0461
2026-03-11 18:38:32 +01:00
parent 013c6e38c7
commit 72b9d15381
1 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/lists/gallery.svelte
View File

@@ -95,8 +95,6 @@
.gallery-title { .gallery-title {
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 700; font-weight: 700;
font-size: 1.4rem;
line-height: 2.0rem;
} }
.gallery-subtitle, .gallery-description { .gallery-subtitle, .gallery-description {
@@ -115,43 +113,43 @@
background-color: var(--color-background-highlight); background-color: var(--color-background-highlight);
backdrop-filter: blur(var(--blur-radius-background)); backdrop-filter: blur(var(--blur-radius-background));
} }
.gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
/* filter: grayscale(0%); */
/* margin-left: 8px; */
width: 260px;
}
.gallery-container:hover .gallery-text-container {
/* padding-right: 8px; */
grid-template-rows: 0fr 1fr 1fr;
}
.gallery-container:hover p { .gallery-container:hover p {
color: var(--color-highlight); color: var(--color-highlight);
} }
.gallery-container:hover .gallery-subtitle {
opacity: 0;
}
.gallery-container:hover .gallery-description {
opacity: 1;
}
@media screen and (max-width: 700px) { @media screen and (min-width: 800px) {
/* .gallery-title { .gallery-title {
font-size: 1.0rem; font-size: 1.4rem;
line-height: 1.1rem; line-height: 2.0rem;
} }
.gallery-subtitle {
font-size: 0.9rem;
line-height: 1.1rem;
} */
}
@media screen and (max-width: 500px) { .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
width: 260px;
}
.gallery-container:hover .gallery-text-container {
grid-template-rows: 0fr 1fr 1fr;
}
.gallery-container:hover .gallery-subtitle {
opacity: 0;
}
.gallery-container:hover .gallery-description {
opacity: 1;
}
}
@media screen and (max-width: 800px) {
.gallery-title { .gallery-title {
font-size: 1.0rem; font-size: 1.0rem;
line-height: 1.1rem; line-height: 1.1rem;
} }
.gallery-description {
display: none;
}
.gallery-subtitle { .gallery-subtitle {
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1rem; line-height: 1rem;
@@ -159,7 +157,7 @@
} }
.gallery-container { .gallery-container {
height: 64px; height: 72px;
} }
.gallery-text-container { .gallery-text-container {
@@ -167,8 +165,8 @@
} }
.gallery-img, .gallery-img-placeholder { .gallery-img, .gallery-img-placeholder {
width: 100px; width: 110px;
min-width: 100px; min-width: 110px;
} }
} }
</style> </style>