Skip to main content
The Footer component provides a simple, clean footer for the Chapinismos site with attribution to the author.

Import

import Footer from "../components/Footer.astro";

Usage

The Footer component is typically used in the Base layout and doesn’t require any props:
src/layouts/Base.astro
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<!doctype html>
<html lang={lang} data-theme="dark">
  <head>
    <!-- ... -->
  </head>
  <body>
    <Header />
    <main id="main-content" role="main">
      <slot />
    </main>
    <Footer />
  </body>
</html>

Props

The Footer component does not accept any props.

Structure

<footer
  class="border-theme text-text mx-auto mt-10 max-w-[1100px] border-t px-6 py-10"
  style="background: var(--bg)"
  transition:persist
>
  Hecho con <span class="text-text">❤️</span> por
  <a
    class="text-text hover:text-primary-dark focus-visible:text-primary-dark font-bold underline"
    href="https://www.abisai.dev/en/"
    target="_blank"
    rel="noopener noreferrer"
    data-umami-event="Footer Author Link"
    data-umami-event-destination="abisai.dev"
  >
    Abisai Herrera
  </a>.
</footer>

Features

Attribution

The footer displays “Hecho con ❤️ por Abisai Herrera” (Made with ❤️ by Abisai Herrera) with a link to the author’s website.

Analytics

The author link includes Umami analytics tracking:
data-umami-event="Footer Author Link"
data-umami-event-destination="abisai.dev"
The author link follows security best practices:
  • target="_blank" - Opens in new tab
  • rel="noopener noreferrer" - Prevents security vulnerabilities

View Transitions

The footer uses Astro’s View Transitions API with transition:persist to maintain state during page navigation:
<footer transition:persist>
  <!-- ... -->
</footer>

Styling

The footer includes:
  • Container: Max width of 1100px, centered with auto margins
  • Spacing: Top margin (mt-10), padding (px-6 py-10)
  • Border: Top border using theme color
  • Background: Uses CSS variable var(--bg) for theme support
  • Text: Theme-aware text colors with hover states

Customization

To customize the footer appearance:
/* In your global CSS */
:root {
  --bg: #ffffff;
}

[data-theme="dark"] {
  --bg: #0f172a;
}

Layout

The footer uses a centered layout with:
  • Maximum width: 1100px
  • Responsive padding: 6 units horizontal, 10 units vertical
  • Top border for visual separation
  • Top margin for spacing from main content

Theme Support

The footer automatically adapts to the current theme:
  • Background color via var(--bg)
  • Border color via border-theme class
  • Text color via text-text class
  • Hover states via hover:text-primary-dark

Accessibility

The footer includes:
  • Semantic <footer> element
  • Visible focus states via focus-visible:text-primary-dark
  • Proper link text and ARIA attributes

Build docs developers (and LLMs) love