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

fix(editorial): article H1, marginalia separator+contrast, home composition, SVG geometry guard

Browse Source 
- article template now renders <h1>{{ title }} once (was absent — title never showed)
- marginalia anchor label is block-level foreground ink (was inline muted run-on)
- landing lead top padding trimmed to close the dead band above the hero card
- 22 icon-sprite <use> SVGs carry explicit width/height (JIT balloon guard)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-06 16:07:14 +08:00
parent 936b48653d
commit 965ecf3228
18 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/marginalia.ninjatpl
View File

@ -1 +1 @@
<div class="editorial-marginalia" data-block="editorial:marginalia">{% if items %}{% for note in items %}<aside>{% if note.anchor %}<span class="editorial-byline-meta">{{ note.anchor }}</span>{% endif %}{% if note.note %}{{ note.note|safe }}{% endif %}</aside>{% endfor %}{% else %}<aside class="text-xs opacity-60"></aside>{% endif %}</div>
<div class="editorial-marginalia" data-block="editorial:marginalia">{% if items %}{% for note in items %}<aside>{% if note.anchor %}<span class="editorial-marginalia-label">{{ note.anchor }}</span>{% endif %}{% if note.note %}<span class="editorial-marginalia-note">{{ note.note|safe }}</span>{% endif %}</aside>{% endfor %}{% else %}<aside class="text-xs opacity-60"></aside>{% endif %}</div>

18
manifest.yaml
View File

@ -384,6 +384,24 @@ css:
opacity: 0;
animation: editorial-fade-in 600ms ease forwards;
}
/* Anchor label: block-level so it never runs into the note body, and
* foreground ink so it reads as a deliberate annotation heading. */
.editorial-marginalia-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
font-style: normal;
font-weight: 600;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: hsl(var(--foreground));
}
/* Note body: bump above muted-foreground for legibility in both modes. */
.editorial-marginalia-note {
display: block;
color: hsl(var(--foreground) / 0.82);
}
@keyframes editorial-fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.editorial-marginalia aside { animation: none; opacity: 1; }

3
templates/editorial/article.ninjatpl
View File

@ -5,7 +5,8 @@
<div class="editorial-progress" aria-hidden="true"></div>
{{ admin_banner_html|safe }}
{% if slots.header %}<header class="w-full">{{ slots.header|safe }}</header>{% endif %}
{% if slots.byline %}<div class="editorial-column w-full pt-6 pb-2">{{ slots.byline|safe }}</div>{% endif %}
{% if title %}<div class="editorial-column w-full pt-10 md:pt-14"><h1 class="editorial-hero-title">{{ title }}</h1></div>{% endif %}
{% if slots.byline %}<div class="editorial-column w-full pt-4 pb-2">{{ slots.byline|safe }}</div>{% endif %}
<div class="editorial-article-grid flex-grow py-8">
<main class="editorial-dropcap prose-editorial">{% if slots.main %}{{ slots.main|safe }}{% else %}<p style="color: hsl(var(--muted-foreground));">This essay has no content yet.</p>{% endif %}</main>
<aside class="editorial-marginalia">{{ slots.marginalia|safe }}</aside>

2
templates/editorial/landing.ninjatpl
View File

@ -5,7 +5,7 @@
{{ admin_banner_html|safe }}
{% if slots.masthead %}<header class="w-full">{{ slots.masthead|safe }}</header>{% endif %}
<main class="flex-grow w-full">
{% if slots.lead %}<section class="max-w-6xl mx-auto px-4 py-10 md:py-14">{{ slots.lead|safe }}</section>{% endif %}
{% if slots.lead %}<section class="max-w-6xl mx-auto px-4 pt-5 pb-8 md:pt-7 md:pb-10">{{ slots.lead|safe }}</section>{% endif %}
{% if slots.river %}<section class="pb-10 md:pb-16"><div class="max-w-3xl mx-auto px-4 space-y-8"><hr class="editorial-rule">{{ slots.river|safe }}</div></section>{% endif %}
</main>
{% if slots.footer %}<footer class="w-full mt-auto">{{ slots.footer|safe }}</footer>{% endif %}

8
templates/overrides/editorial/author-bio-hero.ninjatpl
View File

@ -12,10 +12,10 @@
{% if author.location %}<span>{{ author.location }}</span>{% endif %}
</div>
{% if showSocial %}<div class="mt-6 flex items-center justify-center gap-4">
{% if author.website_url %}<a href="{{ author.website_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Website"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/lucide.svg#globe"></use></svg></a>{% endif %}
{% if author.twitter_handle %}<a href="https://twitter.com/{{ author.twitter_handle|cut:"@" }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Twitter"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#x"></use></svg></a>{% endif %}
{% if author.linkedin_url %}<a href="{{ author.linkedin_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="LinkedIn"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#linkedin"></use></svg></a>{% endif %}
{% if author.github_url %}<a href="{{ author.github_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="GitHub"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#github"></use></svg></a>{% endif %}
{% if author.website_url %}<a href="{{ author.website_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Website"><svg class="h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/lucide.svg#globe"></use></svg></a>{% endif %}
{% if author.twitter_handle %}<a href="https://twitter.com/{{ author.twitter_handle|cut:"@" }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Twitter"><svg class="h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/simple-icons.svg#x"></use></svg></a>{% endif %}
{% if author.linkedin_url %}<a href="{{ author.linkedin_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="LinkedIn"><svg class="h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/simple-icons.svg#linkedin"></use></svg></a>{% endif %}
{% if author.github_url %}<a href="{{ author.github_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="GitHub"><svg class="h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/simple-icons.svg#github"></use></svg></a>{% endif %}
</div>{% endif %}
</div>
</section>

2
templates/overrides/editorial/contact-card.ninjatpl
View File

@ -5,7 +5,7 @@
<div class="mt-12 grid grid-cols-1 gap-6 text-left {% if columns == 3 %}sm:grid-cols-2 lg:grid-cols-3{% elif columns == 1 %}{% else %}sm:grid-cols-2{% endif %}">
{% for channel in channels %}
<div class="editorial-panel flex items-start gap-4 rounded-none bg-card p-6 text-card-foreground">
{% if channel.icon %}<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-[hsl(var(--border))] text-[hsl(var(--accent))]"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"></use></svg></span>{% endif %}
{% if channel.icon %}<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-[hsl(var(--border))] text-[hsl(var(--accent))]"><svg class="h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"></use></svg></span>{% endif %}
<div class="min-w-0">
{% if channel.label %}<div class="editorial-caps text-xs tracking-[0.16em] text-muted-foreground">{{ channel.label }}</div>{% endif %}
{% if channel.value %}<div class="mt-1 break-words text-lg text-foreground" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif)">{% if channel.link %}<a href="{{ channel.link }}" class="editorial-link transition-colors hover:text-[hsl(var(--accent))]">{{ channel.value }}</a>{% else %}{{ channel.value }}{% endif %}</div>{% endif %}

2
templates/overrides/editorial/countdown.ninjatpl
View File

@ -11,7 +11,7 @@
</div>
<div class="mt-8 hidden" data-countdown-expired>
<p class="editorial-heading text-xl" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif)">{{ expiredMessage|default:"This has started." }}</p>
{% if expiredUrl and expiredLabel %}<a href="{{ expiredUrl }}" class="editorial-button mt-4 inline-flex items-center gap-2">{{ expiredLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
{% if expiredUrl and expiredLabel %}<a href="{{ expiredUrl }}" class="editorial-button mt-4 inline-flex items-center gap-2">{{ expiredLabel }}<svg class="h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
</div>
</div>
<noscript><p class="mt-6 text-muted-foreground">Counting down to <time datetime="{{ target }}">{{ target }}</time>.</p></noscript>

2
templates/overrides/editorial/cta.ninjatpl
View File

@ -6,7 +6,7 @@
{% if text %}<p class="mt-3 text-lg {% if background == "band" %}text-muted-foreground{% else %}text-muted-foreground{% endif %}" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ text }}</p>{% endif %}
</div>
<div class="flex flex-wrap items-center justify-center gap-3 {% if background != "split" %}mt-8{% else %}shrink-0{% endif %}">
{% if primaryUrl and primaryLabel %}<a href="{{ primaryUrl }}" class="editorial-button inline-flex items-center gap-2">{{ primaryLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
{% if primaryUrl and primaryLabel %}<a href="{{ primaryUrl }}" class="editorial-button inline-flex items-center gap-2">{{ primaryLabel }}<svg class="h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
{% if secondaryUrl and secondaryLabel %}<a href="{{ secondaryUrl }}" class="editorial-link inline-flex items-center">{{ secondaryLabel }}</a>{% endif %}
</div>
</div>

2
templates/overrides/editorial/event-list.ninjatpl
View File

@ -13,7 +13,7 @@
<h3 class="text-xl text-foreground" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif)">{{ event.title }}</h3>
{% if event.venue %}<p class="editorial-caps text-xs tracking-[0.14em] text-muted-foreground">{{ event.venue }}</p>{% endif %}
{% if event.description %}<p class="text-sm text-muted-foreground" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ event.description }}</p>{% endif %}
{% if event.link %}<a href="{{ event.link }}" class="editorial-link mt-auto inline-flex items-center gap-2 pt-3 text-sm text-[hsl(var(--accent))]">{{ event.linkLabel|default:"Details" }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
{% if event.link %}<a href="{{ event.link }}" class="editorial-link mt-auto inline-flex items-center gap-2 pt-3 text-sm text-[hsl(var(--accent))]">{{ event.linkLabel|default:"Details" }}<svg class="h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
</div>
</article>
{% endif %}{% endfor %}

2
templates/overrides/editorial/faq.ninjatpl
View File

@ -7,7 +7,7 @@
<details class="group py-2"{% if variant == "open-list" %} open{% endif %}>
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-3 text-lg font-medium marker:content-none [&::-webkit-details-marker]:hidden" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif)">
<span>{{ item.question }}</span>
<svg class="h-5 w-5 shrink-0 text-[hsl(var(--accent))] transition-transform duration-200 group-open:rotate-180" aria-hidden="true"><use href="/icons/lucide.svg#chevron-down"></use></svg>
<svg class="h-5 w-5 shrink-0 text-[hsl(var(--accent))] transition-transform duration-200 group-open:rotate-180" width="20" height="20" aria-hidden="true"><use href="/icons/lucide.svg#chevron-down"></use></svg>
</summary>
<div class="pb-4 text-muted-foreground [&_a]:text-[hsl(var(--accent))] [&_a]:underline" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ item.answer|safe }}</div>
</details>

4
templates/overrides/editorial/feature-grid.ninjatpl
View File

@ -6,10 +6,10 @@
<div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
{% for item in items %}
<div class="{% if layout == "card" %}editorial-panel bg-card p-6 text-card-foreground hover:border-[hsl(var(--accent))] transition-shadow{% elif layout == "centered" %}text-center{% endif %}">
{% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center border border-[hsl(var(--border))] bg-muted text-[hsl(var(--accent))]{% if layout == "centered" %} mx-auto{% endif %}"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
{% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center border border-[hsl(var(--border))] bg-muted text-[hsl(var(--accent))]{% if layout == "centered" %} mx-auto{% endif %}"><svg class="h-6 w-6" width="24" height="24" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
<h3 class="editorial-heading text-lg text-foreground" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif)">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" class="transition-colors hover:text-[hsl(var(--accent))]">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>
{% if item.text %}<p class="mt-2 text-muted-foreground" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ item.text }}</p>{% endif %}
{% if item.linkUrl and item.linkLabel %}<a href="{{ item.linkUrl }}" class="editorial-link mt-3 inline-flex items-center gap-1 text-sm">{{ item.linkLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
{% if item.linkUrl and item.linkLabel %}<a href="{{ item.linkUrl }}" class="editorial-link mt-3 inline-flex items-center gap-1 text-sm">{{ item.linkLabel }}<svg class="h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
</div>
{% endfor %}
</div>

2
templates/overrides/editorial/pricing.ninjatpl
View File

@ -14,7 +14,7 @@
</p>
{% if tier.description %}<p class="mt-3 text-center text-sm text-muted-foreground" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ tier.description }}</p>{% endif %}
{% if tier.features %}<ul class="mt-6 flex-1 space-y-3 text-sm">
{% for feature in tier.features %}<li class="flex items-start gap-2"><svg class="mt-0.5 h-4 w-4 shrink-0 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg><span>{{ feature }}</span></li>{% endfor %}
{% for feature in tier.features %}<li class="flex items-start gap-2"><svg class="mt-0.5 h-4 w-4 shrink-0 text-[hsl(var(--accent))]" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg><span>{{ feature }}</span></li>{% endfor %}
</ul>{% endif %}
{% if tier.ctaUrl and tier.ctaLabel %}{% if tier.highlighted %}<a href="{{ tier.ctaUrl }}" class="editorial-button mt-8 inline-flex w-full items-center justify-center">{{ tier.ctaLabel }}</a>{% else %}<a href="{{ tier.ctaUrl }}" class="editorial-link mt-8 inline-flex w-full items-center justify-center">{{ tier.ctaLabel }}</a>{% endif %}{% endif %}
</div>

2
templates/overrides/editorial/rich-section.ninjatpl
View File

@ -4,7 +4,7 @@
{% if eyebrow %}<div class="mb-3 flex items-center gap-4"><span class="editorial-rule w-12"></span><p class="editorial-caps text-xs text-muted-foreground">{{ eyebrow }}</p></div>{% endif %}
{% if heading %}<h2 class="editorial-caps editorial-underline mt-2 text-3xl text-foreground md:text-4xl" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif)">{{ heading }}</h2>{% endif %}
{% if body %}<div class="mt-4 space-y-4 text-lg text-muted-foreground [&_a]:text-[hsl(var(--accent))] [&_a]:underline [&_strong]:text-foreground" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ body|safe }}</div>{% endif %}
{% if ctaUrl and ctaLabel %}<a href="{{ ctaUrl }}" class="editorial-button mt-6 inline-flex items-center gap-2">{{ ctaLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
{% if ctaUrl and ctaLabel %}<a href="{{ ctaUrl }}" class="editorial-button mt-6 inline-flex items-center gap-2">{{ ctaLabel }}<svg class="h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
</div>
<div class="{% if mediaPosition == "left" %}md:order-1{% else %}md:order-2{% endif %}">
{% if media %}<div class="overflow-hidden">{% img media alt=mediaAlt class="w-full h-auto object-cover" %}</div>{% endif %}

2
templates/overrides/editorial/sidebar-nav.ninjatpl
View File

@ -4,7 +4,7 @@
{% if title %}<h3 class="editorial-caps editorial-underline {% if compact %}px-2 mb-4 text-xs text-muted-foreground{% else %}px-3 mb-5 text-sm text-foreground{% endif %}" style="font-family:var(--font-heading, &quot;Playfair Display&quot;, Georgia, serif)">{{ title }}</h3>{% endif %}
<ul class="{% if compact %}space-y-0.5{% else %}space-y-1{% endif %}">
{% for item in menu.items %}
<li><a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}{% if item.title %} title="{{ item.title }}"{% endif %} data-bn-sidebar-link class="editorial-caps flex items-center rounded-none text-sm text-muted-foreground transition-colors hover:text-[hsl(var(--accent))] hover:bg-accent {% if compact %}px-2 py-1.5{% else %}px-3 py-2{% endif %} {{ item.css_class }}">{% if item.icon %}<svg class="mr-2 h-4 w-4 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg>{% endif %}{{ item.label }}</a></li>
<li><a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}{% if item.title %} title="{{ item.title }}"{% endif %} data-bn-sidebar-link class="editorial-caps flex items-center rounded-none text-sm text-muted-foreground transition-colors hover:text-[hsl(var(--accent))] hover:bg-accent {% if compact %}px-2 py-1.5{% else %}px-3 py-2{% endif %} {{ item.css_class }}">{% if item.icon %}<svg class="mr-2 h-4 w-4 text-[hsl(var(--accent))]" width="16" height="16" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg>{% endif %}{{ item.label }}</a></li>
{% endfor %}
</ul>
</nav>

2
templates/overrides/editorial/social-links.ninjatpl
View File

@ -4,7 +4,7 @@
{% for link in links %}{% if link.url %}
<li>
<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" aria-label="{{ link.label|default:link.network }}" class="inline-flex items-center gap-2 rounded-none border border-[hsl(var(--border))] text-foreground transition-colors hover:border-[hsl(var(--accent))] hover:text-[hsl(var(--accent))] {% if style == "stack" %}w-full px-4 py-2.5{% else %}p-2.5{% endif %}">
{% if link.network %}<svg class="h-5 w-5 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/{{ link.network|split:":"|first }}.svg#{{ link.network|split:":"|last }}"></use></svg>{% endif %}
{% if link.network %}<svg class="h-5 w-5 text-[hsl(var(--accent))]" width="20" height="20" aria-hidden="true"><use href="/icons/{{ link.network|split:":"|first }}.svg#{{ link.network|split:":"|last }}"></use></svg>{% endif %}
{% if style == "stack" and link.label %}<span class="editorial-caps text-xs tracking-[0.14em]">{{ link.label }}</span>{% endif %}
</a>
</li>

2
templates/overrides/editorial/team.ninjatpl
View File

@ -11,7 +11,7 @@
{% if member.role %}<p class="editorial-caps text-xs text-muted-foreground">{{ member.role }}</p>{% endif %}
{% if member.bio %}<p class="mt-2 text-sm text-muted-foreground" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{{ member.bio }}</p>{% endif %}
{% if member.socials %}<div class="mt-3 flex gap-3 {% if layout != "list" %}justify-center{% endif %}">
{% for social in member.socials %}{% if social.url %}<a href="{{ social.url }}" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" aria-label="Social link"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ social.icon|split:":"|first }}.svg#{{ social.icon|split:":"|last }}"></use></svg></a>{% endif %}{% endfor %}
{% for social in member.socials %}{% if social.url %}<a href="{{ social.url }}" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" aria-label="Social link"><svg class="h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/{{ social.icon|split:":"|first }}.svg#{{ social.icon|split:":"|last }}"></use></svg></a>{% endif %}{% endfor %}
</div>{% endif %}
</div>
</div>

10
templates/overrides/editorial/testimonial.ninjatpl
View File

@ -5,11 +5,11 @@
{% for q in quotes %}
<figure class="editorial-panel flex flex-col bg-card p-6 text-card-foreground{% if layout == "carousel" %} min-w-[18rem] max-w-sm shrink-0 snap-start{% endif %}">
{% if q.rating %}<div class="mb-3 flex justify-center gap-0.5" aria-label="Rated {{ q.rating }} out of 5">
<svg class="h-4 w-4 {% if q.rating >= 1 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 2 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 3 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 4 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 5 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 1 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 2 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 3 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 4 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
<svg class="h-4 w-4 {% if q.rating >= 5 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
</div>{% endif %}
<blockquote class="flex-1 text-center text-lg leading-relaxed" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif)">{% if q.quote %}&ldquo;{{ q.quote }}&rdquo;{% endif %}</blockquote>
<div class="mx-auto my-4 flex items-center justify-center"><span class="editorial-rule w-16"></span></div>

2
templates/overrides/editorial/timeline.ninjatpl
View File

@ -6,7 +6,7 @@
{% for step in steps %}
<li class="{% if orientation == "horizontal" %}text-center{% else %}relative pl-14{% endif %}">
<span class="editorial-caps flex h-8 w-8 items-center justify-center border border-[hsl(var(--accent))] bg-card text-sm text-[hsl(var(--accent))] {% if orientation == "horizontal" %}mx-auto{% else %}absolute left-0 top-0 ring-4 ring-background{% endif %}">
{% if marker == "numbered" %}{{ forloop.counter }}{% elif marker == "dot" %}<span class="h-2 w-2 bg-[hsl(var(--accent))]"></span>{% else %}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#flag"></use></svg>{% endif %}
{% if marker == "numbered" %}{{ forloop.counter }}{% elif marker == "dot" %}<span class="h-2 w-2 bg-[hsl(var(--accent))]"></span>{% else %}<svg class="h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#flag"></use></svg>{% endif %}
</span>
<div class="{% if orientation == "horizontal" %}mt-4{% else %}pt-1{% endif %}">
{% if step.label %}<p class="editorial-caps text-xs text-muted-foreground">{{ step.label }}</p>{% endif %}