generated from nhcarrigan/template
feat: integrate art assets across all game panels (#43)
## Summary - Adds `apps/web/src/utils/cdn.ts` with a `cdnImage(folder, id)` helper that builds URLs from `https://cdn.nhcarrigan.com/elysium/` - Wires CDN art into all 13 game panels (bosses, quests, adventurers, companions, equipment, upgrades, prestige, transcendence, achievements, explorations, crafting, story, codex) - Zone selector tabs now display 16:9 zone art thumbnails in place of emoji icons - Adds a fixed background image at 15% opacity via `body::before` - Documents the art generation and CDN upload process in `CLAUDE.md` for future expansions Resolves #15 ✨ This PR was created with help from Hikari~ 🌸 Reviewed-on: #43 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #43.
This commit is contained in:
+44
-2
@@ -33,6 +33,20 @@ body {
|
||||
color: var(--colour-text);
|
||||
font-family: var(--font);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
background-attachment: fixed;
|
||||
background-image: url("https://cdn.nhcarrigan.com/elysium/background.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
content: "";
|
||||
inset: 0;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ===================== RESOURCE BAR ===================== */
|
||||
@@ -2056,8 +2070,11 @@ body {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.zone-emoji {
|
||||
font-size: 1.4rem;
|
||||
.zone-tab-image {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 0.35rem;
|
||||
object-fit: cover;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.zone-name {
|
||||
@@ -4465,3 +4482,28 @@ body {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===================== CDN ASSET IMAGES ===================== */
|
||||
.card-thumbnail {
|
||||
border-radius: var(--radius);
|
||||
flex-shrink: 0;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.story-chapter-banner {
|
||||
border-radius: var(--radius);
|
||||
height: 220px;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.codex-entry-image {
|
||||
border-radius: var(--radius);
|
||||
height: 80px;
|
||||
margin-bottom: 0.5rem;
|
||||
object-fit: cover;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user