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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-05 17:54:30 +08:00
parent b05ecf145d
commit 43a2e3dce4
2 changed files with 2 additions and 28 deletions

View File

@ -3,7 +3,7 @@
<div class="mx-auto max-w-6xl px-4">
{% if heading %}<h2 class="y2k-display glitch text-2xl font-semibold tracking-tight md:text-3xl" data-text="{{ heading }}">{{ heading }}</h2>{% endif %}
{% if releases %}
<div class="mt-8 y2k-grid-records">
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{% for release in releases %}
<article class="y2k-bevel y2k-card y2k-glow group overflow-hidden bg-card text-card-foreground">
{% if release.cover %}
@ -11,7 +11,7 @@
{% if release.link %}<a href="{{ release.link }}" class="block h-full w-full">{% img release.cover alt=release.title class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" %}</a>{% else %}{% img release.cover alt=release.title class="h-full w-full object-cover" %}{% endif %}
</div>
{% else %}
<div class="y2k-media-empty y2k-chrome-bg text-muted-foreground">
<div class="flex h-44 items-center justify-center y2k-chrome-bg text-muted-foreground">
{% if release.link %}<a href="{{ release.link }}" class="flex h-full w-full items-center justify-center" aria-label="{{ release.title }}"><svg class="h-12 w-12" aria-hidden="true"><use href="/icons/lucide.svg#disc"></use></svg></a>{% else %}<svg class="h-12 w-12" aria-hidden="true"><use href="/icons/lucide.svg#disc"></use></svg>{% endif %}
</div>
{% endif %}

View File

@ -358,32 +358,6 @@ css:
0 4px 14px hsl(var(--bevel-dark) / 0.22);
}
/* --- Responsive persona grids ----------------------------- */
/* Explicit media queries so column counts do NOT depend on the host
Tailwind build having scanned these theme templates (persona blocks
use responsive class combos no builtin emits, so the JIT drops them
and the grid collapses to its base count). 1 col on phones. */
.y2k-grid-records {
display: grid;
gap: 1.5rem;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
.y2k-grid-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.y2k-grid-records { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Compact chrome tile for absent album/track art — a fixed, modest
height so an empty media field never balloons into a blank box. */
.y2k-media-empty {
display: flex;
align-items: center;
justify-content: center;
height: 11rem;
}
/* --- Marquee ---------------------------------------------- */
.y2k-marquee {
overflow: hidden;