andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Fix photos

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-10 19:12:05 +01:00
parent 0d183c8335
commit a86940da30
2 changed files with 29 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/ProjectList.astro
View file

@ -42,8 +42,8 @@ type ProjectLink = CollectionEntry<'projects'>['data']['links'][number];
<Image
src={project.data.thumbnail.src}
alt={project.data.thumbnail.alt}
widths={[160, 240, 320, 480, 640]}
sizes="(max-width: 700px) 5.5rem, 7rem"
widths={[240, 320, 480, 640, 800]}
sizes="(max-width: 700px) calc(100vw - 2rem), 19rem"
loading="lazy"
/>
</a>
@ -52,8 +52,8 @@ type ProjectLink = CollectionEntry<'projects'>['data']['links'][number];
<Image
src={project.data.thumbnail.src}
alt={project.data.thumbnail.alt}
widths={[160, 240, 320, 480, 640]}
sizes="(max-width: 700px) 5.5rem, 7rem"
widths={[240, 320, 480, 640, 800]}
sizes="(max-width: 700px) calc(100vw - 2rem), 19rem"
loading="lazy"
/>
</div>
@ -70,8 +70,6 @@ type ProjectLink = CollectionEntry<'projects'>['data']['links'][number];
<p class="project-meta">
{project.data.period} · {project.data.technologies.join(', ')}
</p>
</div>
<div class="project-card__details">
<ProjectLinks links={links} />
</div>
</li>

47
src/styles/global.css
View file

@ -457,7 +457,7 @@ a:hover {
.project-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
gap: var(--space-3);
align-items: stretch;
}
@ -473,12 +473,12 @@ a:hover {
}
.project-card {
--project-thumb-size: clamp(7rem, 18vw, 9.5rem);
display: grid;
grid-template-columns: clamp(5.5rem, 28%, 7rem) minmax(0, 1fr);
grid-template-areas:
'thumb summary'
'details details';
align-items: start;
grid-template-columns: var(--project-thumb-size) minmax(0, 1fr);
grid-template-areas: 'thumb summary';
height: var(--project-thumb-size);
min-width: 0;
overflow: hidden;
border: 1px solid var(--rule);
@ -509,17 +509,13 @@ a:hover {
grid-area: summary;
display: flex;
flex-direction: column;
gap: var(--space-2);
gap: var(--space-1);
height: 100%;
min-width: 0;
overflow: hidden;
padding: var(--space-3);
}
.project-card__details {
grid-area: details;
min-width: 0;
padding: 0 var(--space-3) var(--space-3);
}
.entry-thumbnail {
display: block;
overflow: hidden;
@ -552,12 +548,11 @@ a.entry-thumbnail:focus-visible {
.project-card .project-thumbnail {
grid-area: thumb;
width: 100%;
height: auto;
min-height: 0;
height: 100%;
border: 0;
border-right: 1px solid var(--rule);
border-radius: 0;
aspect-ratio: 1;
aspect-ratio: 1 / 1;
}
.project-card a.project-thumbnail:hover,
@ -588,14 +583,20 @@ a.entry-thumbnail:focus-visible {
}
.project-card .project-description {
margin-bottom: var(--space-2);
color: var(--text);
font-size: 0.95rem;
line-height: 1.4;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.project-card .project-meta {
overflow: hidden;
font-size: 0.82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.tag-list {
@ -809,7 +810,9 @@ a.entry-thumbnail:focus-visible {
.project-card .project-links {
gap: 0 var(--space-3);
margin-top: 0;
max-height: 2rem;
margin-top: auto;
overflow: hidden;
}
.project-card .project-links a {
@ -883,12 +886,12 @@ a.entry-thumbnail:focus-visible {
aspect-ratio: 1;
}
.project-card__summary {
padding: var(--space-2) var(--space-3);
.project-card {
--project-thumb-size: 7rem;
}
.project-card__details {
padding: 0 var(--space-3) var(--space-3);
.project-card__summary {
padding: var(--space-2) var(--space-3);
}
.project-card .project-links a {