roux/layouts/partials/footer.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 &amp; 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>