Page structure

Footer

Contact and the © line. Nothing else.

01

Examples

FooterOpen “Footer” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

02

When to use it

The end of the home, so the end of every page.

Live: Home and every page’s ending.

03

Anatomy

Contact
h2 “Contact”, email (wrapped in <!--sse-->), LinkedIn.
Meta
.foot-meta: © line, carbon-negative, no cookies, no third-party trackers, readable by agents (llms.txt).
04

Behaviour

Phone, tablet, desktop
Stacked on phone; two columns under a 1px rule from 768.
Motion
None.
05

Accessibility

Email shown as text and link.

06

Words

As live. No “open to roles”, no lists of links.

07

Code

Classes: .foot .foot-rule .foot-grid .foot-meta. Styles in site/assets/css/site.css.

<footer class="foot wrap">
<div class="foot-rule"></div>
<div class="foot-grid">
<div>
<h2>Contact</h2>
<!--sse-->
<p><a href="mailto:niklaus@niklausgerber.com">niklaus@niklausgerber.com</a></p>
<!--/sse-->
<p><a href="https://www.linkedin.com/in/niklausgerber" rel="noopener noreferrer" target="_blank">LinkedIn</a></p>
</div>
<p class="foot-meta"><strong>© 2026 Niklaus Gerber</strong>This website is <a href="https://www.wren.co/profile/niklausgerber" rel="noopener noreferrer" target="_blank">carbon-negative</a>, sets no cookies, has <a href="https://themarkup.org/blacklight?url=niklausgerber.com" rel="noopener noreferrer" target="_blank">no third-party trackers</a>, and is <a href="/llms.txt">readable by agents</a>.</p>
</div>
</footer>