Footer Component Guidelines

Overview

This document outlines the implementation standards for the footer component used across rolodexter Labs. The footer follows a consistent two-row layout with standardized formatting and styling.

Structure

<footer class="task-footer">
    <div class="footer-links">
        <div class="footer-links-row">
            <a href="../docs/CHANGELOG.html">Changelog</a><span class="separator">,</span>
            <a href="../docs/VERSION.html">Version</a><span class="separator">,</span>
            <a href="https://github.com/rolodexter3">GitHub</a>
        </div>
        <div class="footer-links-row">
            <a href="../legal/privacy.html">Privacy Policy</a><span class="separator">,</span>
            <a href="../legal/terms.html">Terms of Use</a><span class="separator">,</span>
            <a href="../legal/cookies.html">Cookie Policy</a><span class="separator">,</span>
            <a href="../legal/ai-ethics.html">AI Ethics</a>
        </div>
    </div>
</footer>

Formatting Rules

Link and Separator Formatting

Links must be properly spaced and aligned
Separators (commas) must be wrapped in <span class="separator">
No spaces between links and separators
Last item in each row should not have a separator

Row Organization

First row: Resource links
- Changelog
- Version
- GitHub
Second row: Legal links
- Privacy Policy
- Terms of Use
- Cookie Policy
- AI Ethics

CSS Requirements

.footer-links {
    margin-top: 2rem;
    font-size: 0.85rem;
}

.footer-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.footer-links-row:last-child {
    margin-bottom: 0;
}

.footer-links-row a {
    color: var(--text-primary);
    text-decoration: none;
}

.footer-links-row a:hover {
    text-decoration: underline;
}

.footer-links-row .separator {
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
}

Accessibility Requirements

All links must be keyboard navigable
Links must have sufficient color contrast
- Light theme: minimum 4.5:1 contrast ratio
- Dark theme: minimum 4.5:1 contrast ratio
Text size must be at least 0.85rem
Links must have clear hover states
Proper spacing for touch targets on mobile

Responsive Design

Footer must be fully responsive
Links should wrap naturally on smaller screens
Maintain readability at all viewport sizes
Proper touch target sizes on mobile (minimum 44x44px)

Implementation Checklist

✅ Use semantic HTML5 <footer> element
✅ Include all required links in correct order
✅ Apply proper CSS classes and styling
✅ Test responsive behavior
✅ Verify accessibility requirements
✅ Check dark/light mode compatibility