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

Add hero/banner-overlay CSS variables and wire template.css

Browse Source 
- Add HERO / BANNER OVERLAY section to light.standard.css and dark.standard.css:
  --hero-height, --hero-color, --hero-bg-repeat, --hero-bg-attachment,
  --hero-bg-position, --hero-bg-size, --hero-border-bottom,
  --hero-overlay-bg (light: 0.1 alpha / dark: 0.3 alpha),
  --hero-overlay-padding, --hero-overlay-text-align, --hero-overlay-text-color
- Replace all hardcoded values in .container-banner .banner-overlay and
  .overlay with var() references (with fallbacks)
- Fix background-position: comma syntax → correct space-separated single-bg value
- Add css_vars_hero note field to CSS Variables tab in templateDetails.xml
- Add TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL/DESC to en-US and en-GB
- Regenerate .min files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-03-17 20:51:09 -05:00
parent f0e7ccac6d
commit 57b4c3240e
9 changed files with 48 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14085,14 +14085,13 @@ meter {
}
.container-banner .banner-overlay {
height: 70vh;
color: var(--body-color);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top, center;
background-size: cover;
border-bottom: solid var(--accent-color-secondary);
height: var(--hero-height, 70vh);
color: var(--hero-color, var(--body-color));
background-repeat: var(--hero-bg-repeat, no-repeat);
background-attachment: var(--hero-bg-attachment, fixed);
background-position: var(--hero-bg-position, top center);
background-size: var(--hero-bg-size, cover);
border-bottom: var(--hero-border-bottom, solid var(--accent-color-secondary));
}
.container-banner .banner-overlay .overlay {
@@ -14110,9 +14109,10 @@ meter {
-ms-flex-pack: center;
justify-content: center;
height: 100%;
padding: 1em;
text-align: center;
background-color: hsla(0, 0%, 0%, 0.5);
padding: var(--hero-overlay-padding, 1em);
text-align: var(--hero-overlay-text-align, center);
color: var(--hero-overlay-text-color, var(--body-color));
background-color: var(--hero-overlay-bg, hsla(0, 0%, 0%, 0.5));
}
.container-banner .banner-overlay .overlay .text-thin {
@@ -14782,8 +14782,6 @@ iframe {
);
}
.container-topbar {
color: var(--body-color);
background-color: var(--color-primary);
@@ -14796,7 +14794,7 @@ iframe {
.container-banner {
display: block;
margin: 0 0 2rem;
margin: 0;
}
.container-top-a,