From 133a26b48c13c2ca6ffa01624552d995b5ab8fab Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Mon, 20 Apr 2026 12:46:49 +0200 Subject: feat: redesign footer with fortune cookie, about terminal readout, and tech/feature badges MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New footer structure: 3 equal columns (Fortune Cookie | About Credentials | Stack & Features badges) + full-width copyright bar with emoji personality line. Fortune Cookie: - data/quotes.yaml with 13 curated quotes - fortune.js picks random quote on each page load - HTML fallback shows first quote with no-JS - aria-live="polite" announces quote to screen readers About Column: - Terminal readout style with key-value pairs - role, cert (green), os, focus fields - Semantic
structure for accessibility Badges Column: - "built with" section: Hugo, Tailwind, Alpine.js, HTML5, CSS3, JS (purple badges) - "features" section: WCAG 2.1 AA, Open Source, Privacy Friendly, Claude Code (green badges) - New badge-footer-accent/accent2 CSS classes Copyright Bar: - "Made with ❤️ lack of 😴 lots of ☕ by danix" with emoji wrapped in aria-hidden - danix link points to language-aware About page (/is/ or /it/is/) - Centered, full-width, below border-top i18n additions: - footer_built_with, footer_features keys in English and Italian Theming: - All colors use CSS custom properties (--accent, --accent2, --text, --text-dim) - Monospace fonts throughout (JetBrains Mono) - Responsive: grid-cols-1 mobile → md:grid-cols-3 tablet+ - WCAG 2.1 AA compliant: ≥4.5:1 contrast ratios, keyboard accessible, screen reader tested Co-Authored-By: Claude Haiku 4.5 --- themes/danix-xyz-hacker/assets/css/main.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'themes/danix-xyz-hacker/assets/css/main.css') diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css index 298c38b..163505f 100644 --- a/themes/danix-xyz-hacker/assets/css/main.css +++ b/themes/danix-xyz-hacker/assets/css/main.css @@ -596,6 +596,21 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] { .article-nav-placeholder { @apply text-text-dim opacity-40; } + + /* ---- Footer badge variants ---- */ + .badge-footer-accent { + @apply inline-flex items-center px-2.5 py-1 rounded text-xs font-mono font-semibold whitespace-nowrap; + border: 1px solid rgba(168, 85, 247, 0.35); + background: rgba(168, 85, 247, 0.1); + color: var(--accent); + } + + .badge-footer-accent2 { + @apply inline-flex items-center px-2.5 py-1 rounded text-xs font-mono font-semibold whitespace-nowrap; + border: 1px solid rgba(0, 255, 136, 0.35); + background: rgba(0, 255, 136, 0.1); + color: var(--accent2); + } } /* Prose overrides for light theme */ -- cgit v1.2.3