From 530ae2b5bba8e532615cf56fbf040d011eb199fa Mon Sep 17 00:00:00 2001
From: blindxfish <blindxfish@gmail.com>
Date: Sun, 9 Aug 2026 22:19:39 +0200
Subject: [PATCH] Wrap the project page in one encompassing dark card with
 lighter inner panels

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>
---
 devplacepy/static/css/projects.css       | 30 ++++++++++++++++++++----
 devplacepy/templates/project_detail.html |  2 ++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/devplacepy/static/css/projects.css b/devplacepy/static/css/projects.css
index 9b3bb436..9d25cc25 100644
--- a/devplacepy/static/css/projects.css
+++ b/devplacepy/static/css/projects.css
@@ -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 {
diff --git a/devplacepy/templates/project_detail.html b/devplacepy/templates/project_detail.html
index ee8f0708..79bfe377 100644
--- a/devplacepy/templates/project_detail.html
+++ b/devplacepy/templates/project_detail.html
@@ -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') %}