Wrap the project page in one encompassing dark card with lighter inner panels

Browse Source 
The showcase reference nests the whole project inside a single dark
card while inner panels sit a step lighter - the previous layout had
it inverted (dark cards straight on the page ground). A .project-shell
container now wraps the hero, tab bar and columns with the bg-card
surface and clipped corners, and every inner panel (tab bar, sidebar
cards, devlog post cards, empty state, comments section) flips to the
lighter bg-secondary elevation inside it. The tab bar loses its sticky
positioning (impossible inside the shell's overflow clip) and the hero
sheds its own card chrome since the shell provides it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
blindxfish 2026-08-09 22:19:39 +02:00
parent 8a2e0e6e70
commit 530ae2b5bb
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
devplacepy/static/css/projects.css
View File

@ -228,7 +228,9 @@
margin: 0 auto;
}
.project-hero {
/* One encompassing dark card holds the whole project; panels inside it
sit on the lighter secondary surface (the reference's elev-1/elev-2 split). */
.project-shell {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
@ -236,6 +238,29 @@
box-shadow: var(--shadow-sm);
}
.project-shell-body,
.project-shell > .project-tabs,
.project-shell > .project-columns {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.project-shell > .project-columns {
margin-bottom: 1.5rem;
}
.project-shell .project-tabs,
.project-shell .project-sidebar-card,
.project-shell .post-card,
.project-shell .empty-state,
.project-shell .comments-section {
background: var(--bg-secondary);
}
.project-hero {
overflow: hidden;
}
.project-cover {
position: relative;
min-height: 320px;
@ -336,9 +361,6 @@
border-radius: var(--radius-lg);
padding: 0 0.5rem;
flex-wrap: wrap;
position: sticky;
top: calc(var(--nav-height) + 0.5rem);
z-index: 1;
}
.project-tab {

2
devplacepy/templates/project_detail.html
View File

@ -15,6 +15,7 @@
<div class="project-page">
<a href="/projects" class="back-link">&larr; Back to Projects</a>
<div class="project-shell">
<article class="project-hero">
<div class="project-cover{% if not cover_src %} project-cover-fallback{% endif %}">
{% if cover_src %}
@ -226,6 +227,7 @@
</div>
</aside>
</div>
</div>
{% if is_owner %}
{% call modal('create-post-modal', 'Post an update') %}