diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-21 15:11:11 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-21 15:11:11 +0200 |
| commit | 4e9a4a6483105d5eef1e3d769d6384c3af4ff4c9 (patch) | |
| tree | 0dde1821cc56f613574429019090a82215c33179 /themes/danix-xyz-hacker | |
| parent | cca10206d39148b5b760a12f50213dcf7f322518 (diff) | |
| download | danixxyz-4e9a4a6483105d5eef1e3d769d6384c3af4ff4c9.tar.gz danixxyz-4e9a4a6483105d5eef1e3d769d6384c3af4ff4c9.zip | |
chore: adding files for agentic content writing
Diffstat (limited to 'themes/danix-xyz-hacker')
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/main.css | 18 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/main.min.css | 13 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/article-lazy.js | 34 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/baseof.html | 6 |
4 files changed, 71 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css index 4516fad..f2182a6 100644 --- a/themes/danix-xyz-hacker/assets/css/main.css +++ b/themes/danix-xyz-hacker/assets/css/main.css @@ -766,6 +766,24 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] { box-shadow: 0 0 18px color-mix(in srgb, var(--type-photo) 10%, transparent); } + /* ---- Timeline lazy-reveal (scroll-triggered) ---- */ + .js-lazy-timeline > .timeline-item { + opacity: 0; + transform: translateX(-18px); + transition: opacity 320ms ease-out, transform 320ms ease-out; + } + + @screen md { + .js-lazy-timeline > .timeline-item--right { + transform: translateX(18px); + } + } + + .js-lazy-timeline > .timeline-item.is-visible { + opacity: 1; + transform: translateX(0); + } + /* Header navigation styling */ .header { @apply fixed top-0 left-0 right-0 z-40; diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css index 000ec85..362d7df 100644 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ b/themes/danix-xyz-hacker/assets/css/main.min.css @@ -1900,6 +1900,19 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg { /* Photo (pink) */ +/* ---- Timeline lazy-reveal (scroll-triggered) ---- */ + +.js-lazy-timeline > .timeline-item { + opacity: 0; + transform: translateX(-18px); + transition: opacity 320ms ease-out, transform 320ms ease-out; +} + +.js-lazy-timeline > .timeline-item.is-visible { + opacity: 1; + transform: translateX(0); +} + /* Header navigation styling */ .header { diff --git a/themes/danix-xyz-hacker/assets/js/article-lazy.js b/themes/danix-xyz-hacker/assets/js/article-lazy.js new file mode 100644 index 0000000..64ca862 --- /dev/null +++ b/themes/danix-xyz-hacker/assets/js/article-lazy.js @@ -0,0 +1,34 @@ +document.addEventListener('DOMContentLoaded', function () { + var timeline = document.querySelector('ol.timeline'); + if (!timeline) return; + + // Progressive enhancement: activates CSS hidden state + timeline.classList.add('js-lazy-timeline'); + + var items = Array.prototype.slice.call( + timeline.querySelectorAll('.timeline-item') + ); + + function reveal(item) { + item.classList.add('is-visible'); + } + + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + reveal(entry.target); + observer.unobserve(entry.target); + } + }); + }, + { + rootMargin: '-80px 0px 0px 0px', + threshold: 0.12, + } + ); + + items.forEach(function (item) { + observer.observe(item); + }); +}); diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html index c22e990..fe41f09 100644 --- a/themes/danix-xyz-hacker/layouts/_default/baseof.html +++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html @@ -116,5 +116,11 @@ <!-- Search functionality script --> {{ $searchScript := resources.Get "js/search.js" | minify }} <script src="{{ $searchScript.RelPermalink }}"></script> + + <!-- Timeline lazy-reveal (scroll-triggered reveal animation) --> + {{ if eq .Kind "section" }} + {{ $lazyScript := resources.Get "js/article-lazy.js" | minify }} + <script src="{{ $lazyScript.RelPermalink }}"></script> + {{ end }} </body> </html> |
