thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Art full-screen: light gallery wall, No-frame goes big, recessed-mat depth

Browse Source 
- No frame in full-screen now fills the screen (img max 96vw / 88vh instead of the
  framed cap).
- Full-screen backdrop is a soft top-lit gallery wall (light, not dark) so the Black
  frame — and every frame — reads like a piece hung on a real wall; caption text darkened
  to match.
- Mat now sits recessed below the moulding: a rabbet groove line at the lip, frame shadow
  on the mat's top/left, catch-light on bottom/right — a small chiseled step in place of
  the flat frame→mat transition.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-21 17:44:14 -04:00
parent c2c5b25ab1
commit 006c1b2792
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/art/+page.svelte
+16 -4
View File
@@ -266,7 +266,15 @@
.mat {
display: block; position: relative; z-index: 1; background: #fbf8f1; border-radius: 1px;
padding: var(--mat);
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
/* The mat sits recessed below the moulding: a crisp rabbet groove at the lip, the
frame casting shadow onto the top/left of the mat, the bottom/right catching light
— a small chiseled step instead of a flat transition. */
box-shadow:
inset 0 0 0 1px rgba(40, 28, 16, 0.18),
inset 0 6px 9px -3px rgba(0, 0, 0, 0.34),
inset 6px 0 9px -4px rgba(0, 0, 0, 0.24),
inset 0 -3px 6px -2px rgba(255, 255, 255, 0.55),
inset -3px 0 6px -2px rgba(255, 255, 255, 0.40);
}
.frame img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 1px; }
@@ -336,7 +344,10 @@
.lightbox {
position: fixed; inset: 0; z-index: 50; border: none; cursor: zoom-out;
background: rgba(18, 22, 28, 0.94); display: flex; flex-direction: column;
/* A soft, top-lit gallery wall — lighter than the page so every frame (Black
included) reads, like a piece hung on a real wall. */
background: linear-gradient(180deg, #efe9dd, #e2dbcc);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px; padding: 2.5vmin;
}
/* The full-screen view wears the same frame. Rail + mat are only a touch larger than the
@@ -349,6 +360,7 @@
}
.lb-frame.frame--none { --rail: 0px; --mat: 0px; } /* bare art fills the screen */
.lb-frame img { max-width: 86vw; max-height: 66vh; width: auto; height: auto; object-fit: contain; }
.lb-cap { color: #e9e2d6; font-size: 0.9rem; }
.lb-cap .sep { color: #9aa0a6; }
.lb-frame.frame--none img { max-width: 96vw; max-height: 88vh; } /* no frame → go big */
.lb-cap { color: #5b636e; font-size: 0.9rem; }
.lb-cap .sep { color: #a6acb4; }
</style>