valknar
54a87dc4ed
Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*, masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with Tailwind v4 utility classes inline in HTML. Create card.html partial to avoid repeating verbose utility strings across grid templates. Rename lightbox CSS to flat lb-* and search popup to sp-*. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
37 lines
2.3 KiB
HTML
37 lines
2.3 KiB
HTML
<footer class="border-t border-[var(--rule)] px-[var(--pad)] pt-9 pb-14
|
|
grid gap-10 font-sans text-[12px] leading-[1.5] text-ink-soft
|
|
[grid-template-columns:2fr_1fr_1fr_1fr]
|
|
max-[820px]:[grid-template-columns:1fr_1fr]">
|
|
<div>
|
|
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Roux</h4>
|
|
<h2 class="font-display font-normal text-[clamp(60px,8vw,110px)] leading-[0.92] text-ink m-0 mb-[14px]">
|
|
R<em class="font-serif italic text-roux font-light">o</em>ux<sup class="font-mono text-[11px] tracking-[.14em] text-ink-soft align-top ml-2">№{{ .Site.Params.issueNumber }}</sup>
|
|
</h2>
|
|
<p>A slow-publishing fashion journal, gathered in Paris. One hundred photographs at a time, printed and unprinted.<br/>roux.pivoine.art</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Categories</h4>
|
|
<p><a class="hover:text-ink" href="/categories/gothic/">Gothic</a></p>
|
|
<p><a class="hover:text-ink" href="/categories/cyberpunk/">Cyberpunk</a></p>
|
|
<p><a class="hover:text-ink" href="/categories/dark-fantasy/">Dark Fantasy</a></p>
|
|
<p><a class="hover:text-ink" href="/categories/sci-fi/">Sci-Fi</a></p>
|
|
<p><a class="hover:text-ink" href="/categories/cultural/">Cultural</a></p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Index</h4>
|
|
<p><a class="hover:text-ink" href="/tags/cape/">Cape</a></p>
|
|
<p><a class="hover:text-ink" href="/tags/neon/">Neon</a></p>
|
|
<p><a class="hover:text-ink" href="/tags/rain/">Rain</a></p>
|
|
<p><a class="hover:text-ink" href="/tags/gothic/">Gothic</a></p>
|
|
<p><a class="hover:text-ink" href="/tags/warrior/">Warrior</a></p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Colophon</h4>
|
|
<p>Set in Italiana & Cormorant Garamond, with Outfit for typographic furniture. © Roux MMXXVI.</p>
|
|
<p class="mt-[14px] text-ink">Press
|
|
<span class="border border-[var(--rule)] px-[6px] py-[3px] rounded-[3px] font-mono text-[10px]">⌘K</span>
|
|
from anywhere to search.
|
|
</p>
|
|
</div>
|
|
</footer>
|