diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-15 23:39:11 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-15 23:39:11 +0200 |
| commit | 455b5bf0a8cfba658446cc6f3fd2c5964b45d507 (patch) | |
| tree | 54e0b3319e540ed2a693fdfebf8f583fae345203 /themes/danix-xyz-hacker/layouts/_default/baseof.html | |
| parent | abf79d7123469dd27b59e3fb154aba41523688e7 (diff) | |
| download | danixxyz-455b5bf0a8cfba658446cc6f3fd2c5964b45d507.tar.gz danixxyz-455b5bf0a8cfba658446cc6f3fd2c5964b45d507.zip | |
Implement article type colors, reading progress bar, and optimize layout
- Add colored type pills to article list items (overlay on thumbnails, top-right)
- Add type accent corner (L-shaped) to single article headers with colored pill badge in metadata
- Implement smooth reading progress bar at viewport top (violet→green gradient)
- Progress bar only appears on single pages/articles, not on lists or homepage
- Constrain article width to max-w-7xl for comfortable reading with side gutters
- Use CSS variables for all colors to support dark/light theme switching
- Add reading-progress.js with requestAnimationFrame throttling for performance
- Update HANDOFF.md with current progress
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/_default/baseof.html')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/baseof.html | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html index 2849562..7e8338a 100644 --- a/themes/danix-xyz-hacker/layouts/_default/baseof.html +++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html @@ -28,6 +28,14 @@ <link rel="stylesheet" href="{{ $chroma.RelPermalink }}"> </head> <body class="bg-bg text-text antialiased"> + <!-- Reading progress bar (only on single pages/articles) --> + {{ if eq .Kind "page" }} + <div + id="reading-progress" + class="fixed top-0 left-0 h-1 transition-all duration-100" + style="width: 0%; background: linear-gradient(to right, var(--accent), var(--accent2)); z-index: 9999;" + ></div> + {{ end }} <!-- Skip to main content link --> <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded"> {{ i18n "skipToContent" }} @@ -79,5 +87,11 @@ <!-- Contact form script --> {{ $contactScript := resources.Get "js/contact-form.js" | minify }} <script src="{{ $contactScript.RelPermalink }}"></script> + + <!-- Reading progress bar script (on single pages/articles) --> + {{ if eq .Kind "page" }} + {{ $progressScript := resources.Get "js/reading-progress.js" | minify }} + <script src="{{ $progressScript.RelPermalink }}"></script> + {{ end }} </body> </html> |