block/themes-gotham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(gotham): move on-image hero ink to reel-onimg-* theme utilities (check-safety: no hardcoded hsl in ninjatpl)

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-06 19:41:25 +08:00
parent 22b62b0ffc
commit 3c42d1348f
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
manifest.yaml
View File

@ -222,6 +222,13 @@ css:
font-size: 3.2em; line-height: 0.9; float: left; padding: 0.02em 0.14em 0 0; color: hsl(var(--primary));
}
/* reel-onimg-* — fixed light ink for text set OVER hero imagery + its
* black scrims (mode-independent, like the scrim itself): light-mode
* tokens are near-black and vanish on the photo. */
.reel-onimg-strong { color: hsl(40 30% 97%); }
.reel-onimg-soft { color: hsl(40 22% 88% / 0.92); }
.reel-onimg-dim { color: hsl(40 20% 85% / 0.9); }
/* letterbox-scrim — black cinematic bars over hero imagery (image overlay). */
.letterbox-scrim {
background-image: linear-gradient(to bottom,

6
templates/overrides/gotham/hero.ninjatpl
View File

@ -13,9 +13,9 @@
{% set showOverlay = hasImage and overlayColor != "none" and overlayColor != "" %}
{% macro herocontent(align, onImage) %}
{% if eyebrowText %}<div class="mb-5 flex items-center gap-4 {% if align == "center" %}justify-center{% endif %}"><span class="reel-rule w-10"></span><span class="reel-caps text-xs text-primary">{{ eyebrowText }}</span><span class="reel-rule w-10"></span></div>{% endif %}
{% if headlineText %}<h1 class="reel-caps text-4xl sm:text-5xl lg:text-6xl leading-tight" style="font-family:var(--font-heading, 'Antonio', 'Oswald', 'Bebas Neue', sans-serif);color:{% if onImage == "on" %}hsl(40 30% 97%){% else %}hsl(var(--foreground)){% endif %};">{{ headlineText }}</h1>{% endif %}
{% if subText %}<h2 class="mt-5 text-xl sm:text-2xl italic max-w-2xl{% if align == "center" %} mx-auto{% endif %}" style="color:{% if onImage == "on" %}hsl(40 22% 88% / 0.92){% else %}hsl(var(--muted-foreground)){% endif %};font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ subText }}</h2>{% endif %}
{% if descText %}<p class="mt-4 max-w-xl leading-relaxed{% if align == "center" %} mx-auto{% endif %}" style="color:{% if onImage == "on" %}hsl(40 20% 85% / 0.9){% else %}hsl(var(--muted-foreground)){% endif %};">{{ descText }}</p>{% endif %}
{% if headlineText %}<h1 class="reel-caps text-4xl sm:text-5xl lg:text-6xl leading-tight {% if onImage == "on" %}reel-onimg-strong{% else %}text-foreground{% endif %}" style="font-family:var(--font-heading, 'Antonio', 'Oswald', 'Bebas Neue', sans-serif);">{{ headlineText }}</h1>{% endif %}
{% if subText %}<h2 class="mt-5 text-xl sm:text-2xl italic max-w-2xl{% if align == "center" %} mx-auto{% endif %} {% if onImage == "on" %}reel-onimg-soft{% else %}text-muted-foreground{% endif %}" style="font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ subText }}</h2>{% endif %}
{% if descText %}<p class="mt-4 max-w-xl leading-relaxed{% if align == "center" %} mx-auto{% endif %} {% if onImage == "on" %}reel-onimg-dim{% else %}text-muted-foreground{% endif %}">{{ descText }}</p>{% endif %}
{% if pText or sText %}<div class="mt-8 flex flex-col sm:flex-row gap-4{% if align == "center" %} justify-center{% endif %}">
{% if pText and pUrl %}<a href="{{ pUrl }}" class="reel-btn inline-flex items-center justify-center gap-2">{{ pText }}</a>{% endif %}
{% if sText and sUrl %}<a href="{{ sUrl }}" class="reel-link inline-flex items-center justify-center">{{ sText }}</a>{% endif %}