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

adjusted bottom margin of footer; images on projects page now shrink on mobile

Browse Source
This commit is contained in:
denizk0461
2026-01-23 14:19:20 +01:00
parent 6c28a4c5f3
commit ae5e284032
19 changed files with 67 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,11 +28,11 @@
<img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
<div class="gallery-text-container">
{#if reverseTextOrder}
<p class="gallery-date">{@html entry.subtitle}</p>
<p class="gallery-subtitle">{@html entry.subtitle}</p>
<p class="gallery-title">{entry.title}</p>
{:else}
<p class="gallery-title">{entry.title}</p>
<p class="gallery-date">{@html entry.subtitle}</p>
<p class="gallery-subtitle">{@html entry.subtitle}</p>
{/if}
</div>
</a>
@@ -62,6 +62,7 @@
.gallery-img {
width: 145px;
min-width: 145px;
height: 100%;
margin: 0;
object-fit: cover;
@@ -83,20 +84,20 @@
transition: border-color 0.1s ease-out;
}
.gallery-date, .gallery-title {
.gallery-title, .gallery-subtitle {
margin: 0;
transition: color 0.1s ease-out;
}
.gallery-date {
font-size: 1.0rem;
}
.gallery-title {
font-family: var(--font-mono);
font-weight: 700;
}
.gallery-subtitle {
font-size: 1.0rem;
}
.gallery-container:hover .gallery-text-container {
border-color: var(--color-highlight);
}
@@ -106,4 +107,21 @@
.gallery-container:hover p {
color: var(--color-highlight);
}
@media screen and (max-width: 700px) {
.gallery-title {
font-size: 1.0rem;
line-height: 1.1rem;
}
.gallery-subtitle {
font-size: 0.9rem;
line-height: 1.1rem;
}
}
@media screen and (max-width: 500px) {
.gallery-subtitle {
display: none;
}
}
</style>