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

Split up

Browse source
This commit is contained in:
Andras Schmelczer 2026-06-25 23:40:45 +02:00
parent c65114888c
commit 11796a8869
17 changed files with 2217 additions and 2181 deletions
Download patch file Download diff file Expand all files Collapse all files

155
src/styles/components/project-card.css Normal file
View file

@ -0,0 +1,155 @@
/* Project card: thumbnail, summary, stretched-link Open control, links. */
@layer components {
.project-card {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
'thumb'
'summary';
min-width: 0;
overflow: hidden;
border: 1px solid var(--color-rule);
border-radius: var(--radius-lg);
background: var(--color-bg);
transition: border-color 150ms ease;
}
.project-card:hover,
.project-card:focus-within,
.project-card:target {
border-color: var(--color-rule-strong);
}
.project-card .project-thumbnail {
grid-area: thumb;
width: 100%;
height: auto;
border: 0;
border-bottom: 1px solid var(--color-rule);
border-radius: 0;
aspect-ratio: 4 / 3;
}
.project-card__summary {
grid-area: summary;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-3);
min-width: 0;
padding: var(--space-3) var(--space-4);
}
.project-card p {
margin: 0;
}
.project-card .project-description {
color: var(--color-fg);
font-size: var(--fs-base);
line-height: var(--leading-snug);
}
.project-card__head {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.project-card__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
margin-top: var(--space-3);
}
/* Stretched link: the Open control's overlay covers the whole card so any
click opens the project website. The Article link sits above the overlay
via a higher z-index and stays independently clickable. */
.project-card__open::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
/* Cover the whole card, not the Open button's pill radius. The card's own
overflow:hidden + border-radius clips this to the rounded card shape. */
border-radius: 0;
}
.project-card__open {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.3em;
min-height: 36px;
padding: 0.25em 0.85em;
border: 1px solid var(--color-rule-strong);
border-radius: var(--radius-pill);
background: var(--color-bg);
color: var(--color-link);
font-size: var(--fs-caption);
font-weight: var(--weight-semibold);
text-decoration: none;
transition:
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease;
}
.project-card:hover .project-card__open,
.project-card:focus-within .project-card__open {
border-color: var(--color-link);
background: var(--color-callout-bg);
color: var(--color-link-hover);
}
.project-article-link {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.3em;
min-height: 36px;
color: var(--color-link);
font-size: var(--fs-caption);
font-weight: var(--weight-medium);
text-decoration: none;
}
.project-article-link:hover,
.project-article-link:focus-visible {
color: var(--color-link-hover);
text-decoration: underline;
}
.project-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.project-links a {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
color: var(--color-link);
}
.project-links a:hover,
.project-links a:focus-visible {
color: var(--color-link-hover);
}
.project-links a .download-indicator {
margin-left: 0.25em;
color: var(--color-muted);
font-size: 0.85em;
}
}