mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 08:44:56 +02:00
e236b4bf65
- Add skip-to-main-content link and main content ID target - Add prefers-reduced-motion media queries for all animations - Enhance visible focus indicators (2px offset, high-contrast ring) - Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400 for 4.5:1+ contrast ratio compliance - Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets - Convert facepile containers from div to semantic ul/li with role="list" - Add aria-label to icon-only buttons (share, sort controls) - Add sr-only labels to form inputs (webmention, search) - Add aria-live="polite" to dynamically loaded webmentions - Add aria-label with relative+absolute date to time-difference component - Add keyboard handlers (Enter/Space) to custom interactive elements - Add aria-label to nav landmarks (table of contents) - Fix modal focus trap and dialog accessibility - Fix lightbox keyboard navigation and screen reader announcements Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
83 lines
3.8 KiB
CSS
83 lines
3.8 KiB
CSS
/* Critical CSS — inlined in <head> for first paint */
|
|
/* Covers: layout shell, header, dark mode toggle, font display, basic typography */
|
|
|
|
*,*::before,*::after{box-sizing:border-box}
|
|
body{margin:0;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
|
|
|
|
/* Dark mode base — warm stone palette */
|
|
body{background-color:#faf8f5;color:#1c1b19}
|
|
.dark body{background-color:#0f0e0d;color:#faf8f5}
|
|
|
|
/* Container */
|
|
.container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
|
|
|
|
/* Header — sticky, visible immediately */
|
|
.site-header{background-color:#faf8f5;border-bottom:1px solid #e8e5df;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50}
|
|
.dark .site-header{background-color:#1c1b19;border-bottom-color:#3f3b35}
|
|
.header-container{display:flex;align-items:center;justify-content:space-between}
|
|
.site-title{font-size:1.25rem;font-weight:700;color:#1c1b19;text-decoration:none}
|
|
.dark .site-title{color:#faf8f5}
|
|
|
|
/* Header actions — hidden on mobile */
|
|
.header-actions{display:none}
|
|
@media(min-width:768px){.header-actions{display:flex;align-items:center;gap:1rem}}
|
|
|
|
/* Mobile menu toggle */
|
|
.menu-toggle{display:block;padding:0.5rem;border-radius:0.5rem;background:none;border:none;color:#5c5750;cursor:pointer}
|
|
@media(min-width:768px){.menu-toggle{display:none}}
|
|
.dark .menu-toggle{color:#a09a90}
|
|
|
|
/* Hidden utility */
|
|
.hidden{display:none!important}
|
|
[x-cloak]{display:none!important}
|
|
|
|
/* Dark mode theme toggle icons */
|
|
.theme-toggle .sun-icon{display:none}
|
|
.theme-toggle .moon-icon{display:block}
|
|
.dark .theme-toggle .sun-icon{display:block}
|
|
.dark .theme-toggle .moon-icon{display:none}
|
|
|
|
/* Main content padding */
|
|
main.container{padding-top:1.5rem;padding-bottom:1.5rem}
|
|
@media(min-width:768px){main.container{padding-top:2rem;padding-bottom:2rem}}
|
|
|
|
/* Layout with sidebar */
|
|
.layout-with-sidebar{display:grid;grid-template-columns:1fr;gap:1.5rem}
|
|
@media(min-width:1024px){.layout-with-sidebar{grid-template-columns:2fr 1fr;gap:2rem}}
|
|
.main-content{min-width:0;overflow-x:hidden}
|
|
|
|
/* Basic typography — prevent FOUT */
|
|
h1,h2,h3,h4{margin:0;line-height:1.25}
|
|
a{color:#b45309}
|
|
.dark a{color:#fbbf24}
|
|
|
|
/* Prevent flash of unstyled content for nav */
|
|
.site-nav{display:flex;align-items:center;gap:1rem}
|
|
.site-nav>a,.site-nav .nav-dropdown-trigger{color:#5c5750;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem}
|
|
.dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a09a90}
|
|
|
|
/* Prevent FOUC — constrain images and SVG icons before Tailwind loads */
|
|
img{max-width:100%;height:auto}
|
|
svg:not(:root):not([width]){width:1.25rem;height:1.25rem}
|
|
|
|
/* Focus indicators — visible in critical CSS before Tailwind loads */
|
|
a:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:2px}
|
|
.dark a:focus-visible{outline-color:#fbbf24}
|
|
button:focus-visible,[type="button"]:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:4px}
|
|
.dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#fbbf24}
|
|
|
|
/* Skip link */
|
|
.skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#b45309;color:#fff;padding:0.5rem 1rem;font-weight:600;text-decoration:none}
|
|
.skip-link:focus{top:0;outline:none}
|
|
|
|
/* Skeleton loader — visible until Tailwind stylesheet loads */
|
|
html.loading main.container>.page-content{display:none}
|
|
html:not(.loading) .page-skeleton{display:none}
|
|
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.skel-bone{background:#e8e5df;border-radius:.5rem;animation:skel-pulse 1.5s ease-in-out infinite}
|
|
.dark .skel-bone{background:#3f3b35}
|
|
.skel-circle{border-radius:50%}
|
|
|
|
/* Reduced motion — disable animations for users who prefer it */
|
|
@media(prefers-reduced-motion:reduce){.skel-bone{animation:none}*{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}
|