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 ++++ themes/danix-xyz-hacker/assets/css/main.min.css | 81 ++++++++++++++++++++ themes/danix-xyz-hacker/assets/js/fortune.js | 9 +++ .../danix-xyz-hacker/layouts/partials/footer.html | 87 ++++++++++++++++------ 4 files changed, 170 insertions(+), 22 deletions(-) create mode 100644 themes/danix-xyz-hacker/assets/js/fortune.js (limited to 'themes') 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 */ diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css index 942d401..4e6e482 100644 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ b/themes/danix-xyz-hacker/assets/css/main.min.css @@ -1284,6 +1284,10 @@ button, color: var(--accent); } +.text-accent2 { + color: var(--accent2); +} + .text-text { color: var(--text); } @@ -1682,6 +1686,44 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { opacity: 0.4; } +/* ---- Footer badge variants ---- */ + +.badge-footer-accent { + display: inline-flex; + align-items: center; + white-space: nowrap; + border-radius: 0.25rem; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-family: JetBrains Mono, monospace; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 600; + border: 1px solid rgba(168, 85, 247, 0.35); + background: rgba(168, 85, 247, 0.1); + color: var(--accent); +} + +.badge-footer-accent2 { + display: inline-flex; + align-items: center; + white-space: nowrap; + border-radius: 0.25rem; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-family: JetBrains Mono, monospace; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 600; + border: 1px solid rgba(0, 255, 136, 0.35); + background: rgba(0, 255, 136, 0.1); + color: var(--accent2); +} + .sr-only { position: absolute; width: 1px; @@ -1807,6 +1849,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { margin-bottom: 2rem; } +.mb-1 { + margin-bottom: 0.25rem; +} + .mb-12 { margin-bottom: 3rem; } @@ -1957,6 +2003,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { width: 0.25rem; } +.w-20 { + width: 5rem; +} + .w-32 { width: 8rem; } @@ -2013,6 +2063,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { flex-shrink: 0; } +.shrink-0 { + flex-shrink: 0; +} + .translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -2067,6 +2121,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { gap: 0.25rem; } +.gap-1\.5 { + gap: 0.375rem; +} + .gap-2 { gap: 0.5rem; } @@ -2087,6 +2145,12 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { gap: 2rem; } +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -2229,6 +2293,11 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { padding: 2rem; } +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -2401,6 +2470,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { color: var(--accent); } +.text-accent2 { + color: var(--accent2); +} + .text-bg { color: var(--bg); } @@ -3650,6 +3723,10 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { color: var(--accent); } +.hover\:text-accent2:hover { + color: var(--accent2); +} + .hover\:text-text:hover { color: var(--text); } @@ -3698,6 +3775,10 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { color: var(--accent); } +.hover\:text-accent2:hover { + color: var(--accent2); +} + .hover\:text-text:hover { color: var(--text); } diff --git a/themes/danix-xyz-hacker/assets/js/fortune.js b/themes/danix-xyz-hacker/assets/js/fortune.js new file mode 100644 index 0000000..d4f981b --- /dev/null +++ b/themes/danix-xyz-hacker/assets/js/fortune.js @@ -0,0 +1,9 @@ +(function() { + const el = document.getElementById('fortune-quote'); + if (!el) return; + const quotes = JSON.parse(el.dataset.quotes); + if (!quotes || quotes.length === 0) return; + const q = quotes[Math.floor(Math.random() * quotes.length)]; + el.querySelector('.fortune-text').textContent = '"' + q.text + '"'; + el.querySelector('.fortune-author').textContent = '— ' + q.author; +})(); diff --git a/themes/danix-xyz-hacker/layouts/partials/footer.html b/themes/danix-xyz-hacker/layouts/partials/footer.html index c649e84..006714b 100644 --- a/themes/danix-xyz-hacker/layouts/partials/footer.html +++ b/themes/danix-xyz-hacker/layouts/partials/footer.html @@ -1,38 +1,81 @@ +{{- $quotes := .Site.Data.quotes.quotes -}} + -- cgit v1.2.3