Stap 6 — Footer met jaartal & “naar boven”-link

We plaatsen onderaan de pagina een compacte footer. Het jaartal wordt automatisch ingevuld en we voorzien een toegankelijke “naar boven”-link.

6.1 Footer-markup (vlak vóór </body>)

Plaats deze footer onder je <main>. De knop linkt naar de navbar (of #top).

<footer class="site-footer bg-dark text-light mt-5" id="site-footer">
  <div class="container py-4">
    <div class="row g-3 align-items-center">
      <div class="col-md-6">
        <p class="m-0">© <span id="year"></span> Projectnaam — Alle rechten voorbehouden.</p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#site-navbar" class="btn btn-outline-light btn-sm to-top" aria-label="Naar boven">↑ Naar boven</a>
      </div>
    </div>
  </div>
</footer>

6.2 CSS in assets/css/custom.css

Basisthema op je tokens, nette knop, en soepele scroll.

/* ---- Footer theming (op tokens) ---- */
.site-footer{
  background: color-mix(in oklab, var(--brand-text), black 10%); /* donker, maar niet pikzwart */
  color: #f8f9fa;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* 'Naar boven' knop */
.site-footer .to-top{
  border-radius: 999px;
  text-decoration: none;
}

/* Soepele scroll voor ankers (modern browsers) */
html{ scroll-behavior: smooth; }

/* (Optioneel) Sticky footer met flexbox — alleen als je pagina's heel kort zijn
   Zet dit in je globale CSS, niet in componenten: */
/*
html, body{ height: 100%; }
body{ min-height: 100vh; display: flex; flex-direction: column; }
main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }
*/

6.3 JS aanvulling in assets/js/main.js

Vult het jaartal in. (Veilig: doet niets als het element niet bestaat.)

document.addEventListener('DOMContentLoaded', () => {
  // Jaartal
  const y = document.getElementById('year');
  if (y) y.textContent = new Date().getFullYear();
});

6.4 Snel testen

• Staat het jaartal correct in de footer?
• Werkt de “↑ Naar boven”-knop en land je onder de fixed-navbar (dankzij jouw scroll-padding-top)?
• Is het contrast van de footer-tekst oké (min. 4.5:1 voor normale tekst)?

Checklist

• Footer staat vóór </body> en gebruikt je tokens.
• year wordt gevuld door main.js.
• Smooth scroll werkt, ankers botsen niet tegen de navbar.