giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: add zachleat.com-inspired theme enhancements

Browse Source 
- Add time-difference web component for relative dates
- Add @zachleat/table-saw for responsive tables
- Add webmention facepile styling with bookmarks support
- Add OG image thumbnails to post navigation
- Add @11ty/is-land for lazy widget hydration
- Wrap sidebar widgets in is-land for deferred loading
- Lazy-load webmention avatars with is-land
- Add @zachleat/filter-container for blog archive filtering
- Add posting frequency sparkline to blog header
- Inline critical CSS and defer full stylesheet loading
This commit is contained in:
Ricardo
2026-02-18 11:16:33 +01:00
parent e5b0fd7dc6
commit c3eb04570c
16 changed files with 368 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
css/critical.css Normal file
View File

@@ -0,0 +1,57 @@
/* 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:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
/* Dark mode base */
body{background-color:#fff;color:#18181b}
.dark body{background-color:#09090b;color:#f4f4f5}
/* 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:#fff;border-bottom:1px solid #e4e4e7;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50}
.dark .site-header{background-color:#18181b;border-bottom-color:#3f3f46}
.header-container{display:flex;align-items:center;justify-content:space-between}
.site-title{font-size:1.25rem;font-weight:700;color:#18181b;text-decoration:none}
.dark .site-title{color:#fff}
/* 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:#52525b;cursor:pointer}
@media(min-width:768px){.menu-toggle{display:none}}
.dark .menu-toggle{color:#a1a1aa}
/* 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:#2563eb}
.dark a{color:#60a5fa}
/* 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:#52525b;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem}
.dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a1a1aa}

12
css/tailwind.css
View File

@@ -237,12 +237,16 @@
@apply inline-block px-2 py-0.5 text-xs bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded;
}
/* Webmention styles */
.webmention-likes .avatar-row {
@apply flex flex-wrap gap-1;
/* Webmention facepile - overlapping avatar display */
.facepile {
@apply flex flex-wrap items-center;
}
.webmention-likes img {
.facepile-avatar {
@apply inline-block -ml-2 first:ml-0 transition-transform hover:z-10 hover:scale-110;
}
.facepile-avatar img {
@apply w-8 h-8 rounded-full;
}