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

refactor: replace hand-rolled utility CSS with Tailwind classes (host build now scans theme templates)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-05 17:53:45 +08:00
parent 51a2ab8b52
commit f63d2e931f
2 changed files with 2 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/lookbook.ninjatpl
View File

@ -4,7 +4,7 @@
{% if heading %}<h2 class="mb-heading text-3xl md:text-5xl text-foreground">{{ heading }}</h2>{% endif %} {% if heading %}<h2 class="mb-heading text-3xl md:text-5xl text-foreground">{{ heading }}</h2>{% endif %}
{% if intro %}<p class="mt-4 max-w-2xl text-deck text-muted-foreground">{{ intro }}</p>{% endif %} {% if intro %}<p class="mt-4 max-w-2xl text-deck text-muted-foreground">{{ intro }}</p>{% endif %}
{% if looks %} {% if looks %}
<div class="mt-10 mb-grid-resp mb-cols-3"> <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{% for look in looks %} {% for look in looks %}
<figure class="mb-reveal flex flex-col"> <figure class="mb-reveal flex flex-col">
{% if look.image %}<div class="mb-duotone aspect-[3/4] w-full overflow-hidden">{% img look.image alt=look.caption|default:"" class="h-full w-full object-cover" %}</div>{% endif %} {% if look.image %}<div class="mb-duotone aspect-[3/4] w-full overflow-hidden">{% img look.image alt=look.caption|default:"" class="h-full w-full object-cover" %}</div>{% endif %}

15
manifest.yaml
View File

@ -392,25 +392,12 @@ css:
.mb-frame-half, .mb-frame-full, .mb-frame-tall { grid-column: 1 / -1; grid-row: auto; } .mb-frame-half, .mb-frame-full, .mb-frame-tall { grid-column: 1 / -1; grid-row: auto; }
} }
/* --- Guaranteed responsive helpers — host Tailwind JIT does NOT reliably scan /* --- River container (centred max-width column for the story river slot) --- */
* theme .ninjatpl files, so any layout-critical responsive rule lives here as
* literal CSS (always emitted) instead of interpolated/utility classes that
* could be dropped (grids that then never collapse on mobile). --- */
.mb-river { .mb-river {
max-width: 64rem; max-width: 64rem;
margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto;
padding-left: 1rem; padding-right: 1rem; padding-left: 1rem; padding-right: 1rem;
} }
.mb-grid-resp { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) {
.mb-grid-resp.mb-cols-2, .mb-grid-resp.mb-cols-3, .mb-grid-resp.mb-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.mb-grid-resp.mb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mb-grid-resp.mb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* --- Color-block accent panel --- */ /* --- Color-block accent panel --- */
.colorblock-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .colorblock-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }