From 0e5950f3702566a652505c9389632c39c4b51e42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20B=C3=A4rlocher?= Date: Tue, 10 Mar 2026 22:28:52 +0100 Subject: [PATCH 1/2] frontend: simplify CSS, improve accessibility and responsive design Consolidate color palette to single theme, add backdrop-filter fallbacks, improve responsive breakpoints (tablet/mobile/small mobile), add focus-visible styles for keyboard accessibility, add site footer navigation. Remove console.log statements from JS. Load Google Fonts as preload for performance. Add layout template with preconnect hints and OpenGraph meta tags. --- _static/custom.css | 294 +++++++++++++++++++++++++---------------- _static/custom.js | 10 -- _templates/layout.html | 29 ++++ conf.py | 9 +- 4 files changed, 217 insertions(+), 125 deletions(-) create mode 100644 _templates/layout.html diff --git a/_static/custom.css b/_static/custom.css index 06ff0ea..fd57bc8 100644 --- a/_static/custom.css +++ b/_static/custom.css @@ -4,65 +4,12 @@ Inspired by: Stripe, Vercel, Linear ============================================ */ -/* Google Fonts Import - Modern Stack */ -@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); - :root { /* ======================================== - OPTION 1: Minimal Monochrome (uncomment to use) - Professional, subtle, technical - Inspired by: GitHub, Tailwind CSS Docs - ======================================== */ - /* - --primary-color: #2563eb; - --primary-dark: #1e40af; - --primary-light: #60a5fa; - --primary-extra-light: #eff6ff; - - --secondary-color: #64748b; - --secondary-dark: #475569; - --secondary-light: #94a3b8; - --secondary-extra-light: #f1f5f9; - - --accent-success: #10b981; - --accent-warning: #f59e0b; - --accent-danger: #ef4444; - --accent-info: #06b6d4; - --accent-purple: #8b5cf6; - --accent-pink: #ec4899; - */ - - /* ======================================== - OPTION 2: Professional Blue-Gray (ACTIVE) - Balanced, trustworthy, calm - Inspired by: Stripe, Kubernetes Docs - ======================================== */ - --primary-color: #3b82f6; /* Moderate Blue */ - --primary-dark: #2563eb; /* Deep Blue */ - --primary-light: #60a5fa; /* Light Blue */ - --primary-extra-light: #dbeafe; /* Very Light Blue */ - - --secondary-color: #64748b; /* Professional Slate */ - --secondary-dark: #475569; /* Deep Slate */ - --secondary-light: #94a3b8; /* Light Slate */ - --secondary-extra-light: #f1f5f9; /* Very Light Slate */ - - /* ======================================== - Accent & Status Colors - Muted Palette - ======================================== */ - --accent-success: #10b981; /* Emerald Green */ - --accent-warning: #f59e0b; /* Amber */ - --accent-danger: #ef4444; /* Soft Red */ - --accent-info: #06b6d4; /* Cyan */ - --accent-purple: #6366f1; /* Muted Indigo */ - --accent-pink: #ec4899; /* Soft Pink */ - - /* ======================================== - OPTION 3: Subtle Tech (uncomment to use) + Color Palette - Subtle Tech Modern, clean, minimal color Inspired by: Linear, Vercel Docs ======================================== */ - --primary-color: #0070f3; --primary-dark: #0761d1; --primary-light: #3291ff; @@ -73,6 +20,7 @@ --secondary-light: #9499a1; --secondary-extra-light: #f5f5f6; + /* Accent & Status Colors */ --accent-success: #0ba95b; --accent-warning: #f5a623; --accent-danger: #e5484d; @@ -103,12 +51,6 @@ --bg-elevated: #ffffff; --bg-overlay: rgba(255, 255, 255, 0.95); - /* Dark Mode Backgrounds */ - --bg-dark-primary: #0d1117; - --bg-dark-secondary: #161b22; - --bg-dark-tertiary: #21262d; - --bg-dark-elevated: #1c2128; - /* ======================================== Text Colors ======================================== */ @@ -298,6 +240,12 @@ h6, line-height: var(--leading-tight); } +/* Remove excessive top margin on first heading after breadcrumbs */ +.wy-nav-content .section:first-child > h1:first-child, +.wy-nav-content .section:first-child > h2:first-child { + margin-top: var(--space-2); +} + @keyframes gradientShift { 0%, 100% { @@ -399,15 +347,21 @@ pre, Sidebar & Navigation - Glassmorphism Design ============================================ */ -/* Sidebar - Modern Glass Effect */ +/* Sidebar - Modern Glass Effect with solid fallback */ .wy-nav-side { - background: var(--glass-bg); - backdrop-filter: var(--glass-blur); - -webkit-backdrop-filter: var(--glass-blur); + background: var(--bg-primary); border-right: 1px solid var(--border-light); box-shadow: var(--shadow-lg); } +@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { + .wy-nav-side { + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + } +} + /* Search Box - Elevated Design */ .wy-side-nav-search { background: transparent; @@ -595,32 +549,6 @@ pre, font-size: 0.9rem; } -/* Contributing to arillso -.wy-menu-vertical li.toctree-l3 > a { - padding: var(--space-2) var(--space-3); - margin: 0 var(--space-2); - font-size: 0.85rem; - background: transparent; - border-radius: 0; -} - -.wy-menu-vertical li.toctree-l3 > a:hover { - background: transparent; - transform: none; -} - -.wy-menu-vertical li.toctree-l3.current > a { - background: transparent !important; - box-shadow: none; -} - -.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a { - background: transparent !important; -} - -.wy-menu-vertical li.toctree-l3.current > a::before { - display: none; -} /* Navigation Icons Enhancement */ .wy-menu-vertical a .icon { @@ -688,15 +616,20 @@ pre, ============================================ */ .ansibleNav { - background: var(--glass-bg) !important; background-color: rgba(255, 255, 255, 0.95) !important; - backdrop-filter: var(--glass-blur) !important; - -webkit-backdrop-filter: var(--glass-blur) !important; border-bottom: 1px solid var(--border-light) !important; box-shadow: var(--shadow-md) !important; padding: 0 !important; } +@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { + .ansibleNav { + background: var(--glass-bg) !important; + backdrop-filter: var(--glass-blur) !important; + -webkit-backdrop-filter: var(--glass-blur) !important; + } +} + .ansibleNav ul { display: flex !important; justify-content: flex-end !important; @@ -1235,6 +1168,16 @@ code.literal:hover { border-left: 3px solid !important; } +/* ============================================ + Focus Styles - Keyboard Accessibility + ============================================ */ + +*:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; + border-radius: var(--radius-sm); +} + /* ============================================ Links - Modern Styling ============================================ */ @@ -1364,7 +1307,7 @@ a.reference.external:hover::after { .wy-nav-content { background: var(--bg-primary); max-width: 1200px; - padding: var(--space-8) var(--space-10); + padding: var(--space-4) var(--space-10) var(--space-8); border-radius: var(--radius-2xl); margin: var(--space-6); box-shadow: var(--shadow-sm); @@ -1436,10 +1379,35 @@ a.btn.btn-neutral:hover { } footer { - color: var(--text-medium); + color: var(--text-tertiary); font-size: 0.9em; } +/* Site Footer Navigation */ +.site-footer { + margin-top: var(--space-8); + padding-top: var(--space-6); + border-top: 1px solid var(--border-light); +} + +.site-footer-nav { + display: flex; + flex-wrap: wrap; + gap: var(--space-4); + justify-content: center; +} + +.site-footer-nav a { + color: var(--text-tertiary); + font-size: var(--text-sm); + font-weight: var(--font-medium); + transition: color var(--transition-fast); +} + +.site-footer-nav a:hover { + color: var(--primary-color); +} + /* ============================================ Scrollbar Styling ============================================ */ @@ -1474,27 +1442,139 @@ footer { Mobile Responsiveness ============================================ */ +/* Tablet - max 1024px */ +@media screen and (max-width: 1024px) { + .wy-nav-content { + padding: var(--space-6) var(--space-6); + margin: var(--space-4); + } + + .feature-grid { + grid-template-columns: repeat(2, 1fr); + } + + .doc-hub-grid { + grid-template-columns: 1fr; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Mobile - max 768px */ @media screen and (max-width: 768px) { .wy-nav-content { - padding: 1em; + padding: var(--space-4); + margin: var(--space-2); + border-radius: var(--radius-lg); } .wy-nav-content h1 { - font-size: 2em; + font-size: var(--text-3xl); } .wy-nav-content h2 { - font-size: 1.6em; + font-size: var(--text-2xl); + padding-left: var(--space-3); + } + + .wy-nav-content h3 { + font-size: var(--text-xl); } .highlight pre { font-size: 0.8em; - padding: 1em; + padding: var(--space-4); } code.literal { font-size: 0.85em; } + + .feature-grid { + grid-template-columns: 1fr; + } + + .community-links { + grid-template-columns: 1fr; + } + + .landing-hero { + padding: var(--space-8) var(--space-4); + margin: var(--space-4) 0; + } + + .hero-tagline { + font-size: var(--text-2xl); + } + + .landing-footer { + padding: var(--space-6); + margin: var(--space-6) 0; + } + + .footer-cta h3 { + font-size: var(--text-2xl); + } + + .cta-buttons { + flex-direction: column; + } + + /* Responsive tables: horizontal scroll */ + .wy-table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + .wy-table-responsive table { + min-width: 500px; + } + + /* Reduce shadow intensity on mobile for performance */ + .feature-card, + .quality-card, + .community-card, + .doc-hub-section { + box-shadow: var(--shadow-sm); + } + + .stat-card h3 { + font-size: var(--text-3xl); + } +} + +/* Small mobile - max 480px */ +@media screen and (max-width: 480px) { + .wy-nav-content { + padding: var(--space-3); + margin: 0; + border-radius: 0; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-3); + } + + .hero-badges { + flex-direction: column; + align-items: center; + } + + .highlight::after { + display: none; + } + + .highlight::before { + height: 8px; + } + + .code-copy-button { + top: 12px; + padding: var(--space-1) var(--space-2); + } } /* ============================================ @@ -2457,20 +2537,7 @@ footer { letter-spacing: -0.02em !important; margin-top: -0.75rem !important; padding-bottom: 0.75rem !important; -} - -/* Mobile - Under 768px */ -@media screen and (max-width: 767px) { - .DocSiteNav-title { - color: var(--gray-900) !important; - } -} - -/* Desktop - 768px and up */ -@media screen and (min-width: 768px) { - .DocSiteNav-title { - color: var(--gray-900) !important; - } + color: var(--gray-900) !important; } /* ============================================================================ @@ -2611,7 +2678,6 @@ footer { } .support-issues:hover { - background: linear-gradient(135deg, #f56565 0%, #ed64a620 100%) !important; background: linear-gradient(135deg, #f5656520 0%, #ed64a620 100%) !important; } diff --git a/_static/custom.js b/_static/custom.js index 91252a2..38aa412 100644 --- a/_static/custom.js +++ b/_static/custom.js @@ -359,7 +359,6 @@ document.addEventListener("DOMContentLoaded", function () { function initMermaidLightTheme() { // Wait for mermaid to be available if (typeof mermaid !== "undefined") { - console.log("Initializing mermaid with light theme"); mermaid.initialize({ startOnLoad: true, @@ -417,9 +416,6 @@ document.addEventListener("DOMContentLoaded", function () { respectReducedMotion(); initMermaidLightTheme(); - console.log( - "πŸš€ Arillso Guide: All interactive features loaded successfully!", - ); }); // ============================================ @@ -442,24 +438,18 @@ document.addEventListener("DOMContentLoaded", function () { script.setAttribute("data-do-not-track", "true"); document.head.appendChild(script); - - console.log("πŸ“Š Umami Analytics: Tracking script loaded"); })(); // ============================================ // Umami Custom Event Tracking Helper // ============================================ function trackEvent(eventName, eventData) { - // Wait for umami to be available if (typeof umami !== "undefined" && umami.track) { umami.track(eventName, eventData); - console.log("πŸ“Š Umami Event:", eventName, eventData); } else { - // Retry after a short delay if umami isn't loaded yet setTimeout(function () { if (typeof umami !== "undefined" && umami.track) { umami.track(eventName, eventData); - console.log("πŸ“Š Umami Event:", eventName, eventData); } }, 1000); } diff --git a/_templates/layout.html b/_templates/layout.html new file mode 100644 index 0000000..72518fc --- /dev/null +++ b/_templates/layout.html @@ -0,0 +1,29 @@ +{% extends "!layout.html" %} + +{% block extrahead %} + + + + + + + + + + +{{ super() }} +{% endblock %} + +{% block footer %} +{{ super() }} + +{% endblock %} diff --git a/conf.py b/conf.py index 32e7227..0615b81 100644 --- a/conf.py +++ b/conf.py @@ -31,6 +31,7 @@ highlight_language = "YAML+Jinja" +templates_path = ["_templates"] html_theme = "sphinx_ansible_theme" html_show_sphinx = False @@ -43,7 +44,13 @@ # Static files (CSS, JavaScript, Images) html_static_path = ["_static"] -html_css_files = ["custom.css"] +html_css_files = [ + ( + "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap", + {"rel": "preload", "as": "style", "onload": "this.onload=null;this.rel='stylesheet'"}, + ), + "custom.css", +] html_js_files = ["custom.js"] # Logo and Favicon From 98731827636b844bdea9821750a6a7322d0c1c7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20B=C3=A4rlocher?= Date: Tue, 10 Mar 2026 22:33:22 +0100 Subject: [PATCH 2/2] fix: address review feedback on frontend changes - Use pageurl template variable for og:url instead of hardcoded root URL - Remove duplicate contentinfo ARIA landmark from site-footer div - Move Google Fonts loading to layout.html with noscript fallback for users with JavaScript disabled --- _templates/layout.html | 10 ++++++++-- conf.py | 8 +------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/_templates/layout.html b/_templates/layout.html index 72518fc..a0c848e 100644 --- a/_templates/layout.html +++ b/_templates/layout.html @@ -3,10 +3,16 @@ {% block extrahead %} + + - + @@ -16,7 +22,7 @@ {% block footer %} {{ super() }} -