MokoConsulting/MokoOnyx
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Releases 2 Activity

fix: hero wrapper full-width, card centering via CSS variables

Browse Source 
.hero is the module wrapper — now a full-width flex container.
Card styling (max-width, bg, padding, radius) moves to .hero .card.
All dimensions driven by CSS variables with sensible defaults:
--hero-justify, --hero-align, --hero-min-height,
--hero-card-text-align, --hero-card-max-width, etc.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-23 22:53:17 +00:00
parent 2f000c330e
commit 12a98762cd
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/media/css/template.css
View File

@@ -13925,8 +13925,17 @@ meter {
} }
} }
/* ── HERO CARD BASE ── */ /* ── HERO WRAPPER (module wrapper, full-width centering container) ── */
.hero { .hero {
display: flex;
justify-content: var(--hero-justify, center);
align-items: var(--hero-align, center);
width: 100%;
min-height: var(--hero-min-height, 100%);
}
/* ── HERO CARD BASE (the .card inside the hero wrapper) ── */
.hero .card {
max-width: var(--hero-card-max-width, 600px); max-width: var(--hero-card-max-width, 600px);
padding: var(--hero-card-padding-y, 3rem) var(--hero-card-padding-x, 2rem); padding: var(--hero-card-padding-y, 3rem) var(--hero-card-padding-x, 2rem);
background-color: var(--hero-card-bg, var(--hero-primary-bg-color, #0d1e3a)); background-color: var(--hero-card-bg, var(--hero-primary-bg-color, #0d1e3a));
@@ -13935,17 +13944,21 @@ meter {
background-position: center; background-position: center;
color: var(--hero-card-color, var(--hero-primary-color, #f1f5f9)); color: var(--hero-card-color, var(--hero-primary-color, #f1f5f9));
border-radius: var(--hero-card-border-radius, .5rem); border-radius: var(--hero-card-border-radius, .5rem);
text-align: var(--hero-card-text-align, center);
margin-left: auto;
margin-right: auto;
border: none;
} }
/* ── PRIMARY VARIANT (uses default card vars) ── */ /* ── PRIMARY VARIANT ── */
.hero#primary { .hero#primary .card {
background-color: var(--hero-card-bg, #0d1e3a); background-color: var(--hero-card-bg, #0d1e3a);
background-image: var(--hero-card-overlay, none); background-image: var(--hero-card-overlay, none);
color: var(--hero-card-color, #f1f5f9); color: var(--hero-card-color, #f1f5f9);
} }
/* ── SECONDARY / ALTERNATIVE VARIANT ── */ /* ── SECONDARY / ALTERNATIVE VARIANT ── */
.hero#secondary { .hero#secondary .card {
max-width: var(--hero-alt-card-max-width, 600px); max-width: var(--hero-alt-card-max-width, 600px);
padding: var(--hero-alt-card-padding-y, 3rem) var(--hero-alt-card-padding-x, 2rem); padding: var(--hero-alt-card-padding-y, 3rem) var(--hero-alt-card-padding-x, 2rem);
background-color: var(--hero-alt-card-bg, #080f1e); background-color: var(--hero-alt-card-bg, #080f1e);
@@ -13967,14 +13980,14 @@ meter {
background-image: none; background-image: none;
} }
.hero { .hero {
max-width: 100%;
width: 100%;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh; min-height: 100dvh;
border-radius: 0;
display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; }
.hero .card {
max-width: 100%;
width: 100%;
border-radius: 0;
} }
} }