keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): add single-projects detail template

Browse Source
This commit is contained in:
Keith Solomon
2026-08-16 12:54:38 -05:00
parent 5ab42f02ab
commit 353030d2dc
6 changed files with 282 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/components/project-card.css
+86
View File
@@ -213,3 +213,89 @@
font-weight: 600;
}
.archive-projects__back-link:hover { text-decoration: underline; }
.single-project__hero {
background: var(--color-surface-container-low, #1a1b21);
border: 1px solid var(--color-outline-variant, #444651);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
}
.single-project__meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.5rem;
color: var(--color-on-surface-variant, #c5c5d3);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.single-project__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 2.25rem;
line-height: 1.2;
color: var(--color-on-surface, #e3e1e9);
margin: 0 0 0.75rem;
}
.single-project__version { color: var(--color-on-surface-variant, #c5c5d3); font-weight: 400; font-size: 1.5rem; margin-left: 0.5rem; }
.single-project__excerpt {
color: var(--color-on-surface-variant, #c5c5d3);
font-size: 1rem;
line-height: 1.6;
max-width: 70ch;
margin: 0 0 1.5rem;
}
.single-project__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.single-project__layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 1024px) {
.single-project__layout {
grid-template-columns: 2fr 1fr;
gap: 4rem;
}
}
.single-project__body h2,
.single-project__sidebar h3 { color: var(--color-on-surface, #e3e1e9); font-family: var(--font-sans); font-weight: 700; }
.single-project__maintainer,
.single-project__details,
.single-project__stats {
background: var(--color-surface-container, #1e1f25);
border: 1px solid var(--color-outline-variant, #444651);
border-radius: 1rem;
padding: 1.25rem;
margin-bottom: 1rem;
}
.single-project__owner { display: flex; align-items: center; gap: 0.75rem; }
.single-project__owner-avatar {
width: 40px;
height: 40px;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
border-radius: 0.5rem;
background-color: var(--color-surface-container-high, #292a2f);
}
.single-project__owner-link { color: var(--color-on-surface, #e3e1e9); font-weight: 600; text-decoration: none; }
.single-project__owner-link:hover { color: var(--color-primary, #b6c4ff); }
.single-project__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}