Refine footer: mark-only logo, dynamic top categories and tags
Replace oversized Roux wordmark with the 42px SVG flower mark (no title). Categories and Tags columns now use .ByCount so the 5 most-assigned terms are shown rather than hardcoded names. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,29 +2,73 @@
|
|||||||
grid gap-10 font-sans text-[12px] leading-[1.5] text-ink-soft
|
grid gap-10 font-sans text-[12px] leading-[1.5] text-ink-soft
|
||||||
[grid-template-columns:2fr_1fr_1fr_1fr]
|
[grid-template-columns:2fr_1fr_1fr_1fr]
|
||||||
max-[820px]:[grid-template-columns:1fr_1fr]">
|
max-[820px]:[grid-template-columns:1fr_1fr]">
|
||||||
|
|
||||||
|
{{/* ── Brand column ── */}}
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Roux</h4>
|
<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>
|
{{/* Mark only — no wordmark */}}
|
||||||
</h2>
|
<svg class="block w-[42px] h-[42px] mb-[14px]" viewBox="0 0 64 64" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="fBloom" cx="50%" cy="46%" r="58%">
|
||||||
|
<stop offset="0" stop-color="#b34a30"/>
|
||||||
|
<stop offset=".6" stop-color="#8a3322"/>
|
||||||
|
<stop offset="1" stop-color="#5a1d15"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<g fill="#6e2519" transform="translate(32 32)">
|
||||||
|
<ellipse cx="0" cy="-16" rx="10.5" ry="14"/>
|
||||||
|
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(60)"/>
|
||||||
|
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(120)"/>
|
||||||
|
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(180)"/>
|
||||||
|
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(240)"/>
|
||||||
|
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(300)"/>
|
||||||
|
</g>
|
||||||
|
<g fill="url(#fBloom)" transform="translate(32 32) rotate(30)">
|
||||||
|
<ellipse cx="0" cy="-11" rx="8" ry="11"/>
|
||||||
|
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(60)"/>
|
||||||
|
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(120)"/>
|
||||||
|
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(180)"/>
|
||||||
|
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(240)"/>
|
||||||
|
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(300)"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#9a3a26" transform="translate(32 32)">
|
||||||
|
<ellipse cx="0" cy="-6" rx="5" ry="7.5"/>
|
||||||
|
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(72)"/>
|
||||||
|
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(144)"/>
|
||||||
|
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(216)"/>
|
||||||
|
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(288)"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="32" cy="32" r="3.2" fill="#3a120c"/>
|
||||||
|
<circle cx="32" cy="31.4" r="1.2" fill="#c0573c" opacity=".7"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<p>A slow-publishing fashion journal, gathered in Paris. One hundred photographs at a time, printed and unprinted.<br/>roux.pivoine.art</p>
|
<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>
|
||||||
|
|
||||||
|
{{/* ── Categories (top 5 by count) ── */}}
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Categories</h4>
|
<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>
|
{{- range first 5 $.Site.Taxonomies.categories.ByCount }}
|
||||||
<p><a class="hover:text-ink" href="/categories/cyberpunk/">Cyberpunk</a></p>
|
{{- $tp := $.Site.GetPage (printf "/categories/%s" .Name) }}
|
||||||
<p><a class="hover:text-ink" href="/categories/dark-fantasy/">Dark Fantasy</a></p>
|
{{- if $tp }}
|
||||||
<p><a class="hover:text-ink" href="/categories/sci-fi/">Sci-Fi</a></p>
|
<p><a class="hover:text-ink" href="{{ $tp.RelPermalink }}">{{ $tp.Title }}</a></p>
|
||||||
<p><a class="hover:text-ink" href="/categories/cultural/">Cultural</a></p>
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{/* ── Tags (top 5 by count) ── */}}
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Index</h4>
|
<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>
|
{{- range first 5 $.Site.Taxonomies.tags.ByCount }}
|
||||||
<p><a class="hover:text-ink" href="/tags/neon/">Neon</a></p>
|
{{- $tp := $.Site.GetPage (printf "/tags/%s" .Name) }}
|
||||||
<p><a class="hover:text-ink" href="/tags/rain/">Rain</a></p>
|
{{- if $tp }}
|
||||||
<p><a class="hover:text-ink" href="/tags/gothic/">Gothic</a></p>
|
<p><a class="hover:text-ink" href="{{ $tp.RelPermalink }}">{{ $tp.Title }}</a></p>
|
||||||
<p><a class="hover:text-ink" href="/tags/warrior/">Warrior</a></p>
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{/* ── Colophon ── */}}
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Colophon</h4>
|
<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>Set in Italiana & Cormorant Garamond, with Outfit for typographic furniture. © Roux MMXXVI.</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user