Footer component provides a simple, clean footer for the Chapinismos site with attribution to the author.
Import
Usage
The Footer component is typically used in the Base layout and doesn’t require any props:src/layouts/Base.astro
Props
The Footer component does not accept any props.Structure
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:External Link Best Practices
The author link follows security best practices:target="_blank"- Opens in new tabrel="noopener noreferrer"- Prevents security vulnerabilities
View Transitions
The footer uses Astro’s View Transitions API withtransition:persist to maintain state during page navigation:
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: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-themeclass - Text color via
text-textclass - 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
Related Components
- Header - Site header
- Base Layout - Main layout wrapper