<span class="n-adjust-height">
@@ -1139,7 +1139,7 @@ Height compensation according to line height
Aspect ratio container
As the image is loading, the layout is already solid and the page doesn't jump after the download.
-
+
@@ -1749,9 +1749,9 @@
Inline
<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails">
@@ -1776,9 +1776,9 @@ Inline
<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails n-carousel--vertical">
@@ -1871,7 +1871,7 @@ 1.67:1
-
+
First photo from Rīga
@@ -1879,7 +1879,7 @@ 1.67:1
-
+
Second photo from Rīga
@@ -1887,7 +1887,7 @@ 1.67:1
-
+
Third photo from Rīga
@@ -1900,9 +1900,9 @@ 1.67:1
@@ -1917,13 +1917,13 @@
1.67:1
-
![]()
+
First photo from Rīga
-
![]()
+
Second photo from Rīga
-
![]()
+
Third photo from Rīga
@@ -1957,7 +1957,7 @@
1.67:1 vertical
-
+
First photo from Paris
@@ -1965,7 +1965,7 @@ 1.67:1 vertical
-
+
Square
@@ -1973,7 +1973,7 @@ 1.67:1 vertical
-
+
Second photo from Paris
@@ -1981,7 +1981,7 @@ 1.67:1 vertical
-
+
Third photo from Paris
@@ -1994,10 +1994,10 @@ 1.67:1 vertical
@@ -2007,22 +2007,22 @@
1.67:1 vertical
@@ -2052,7 +2052,7 @@
Detached nav
-
+
First photo from Corsica
@@ -2060,7 +2060,7 @@ Detached nav
-
+
Second photo from Corsica
@@ -2068,7 +2068,7 @@ Detached nav
-
+
Third photo from Corsica
@@ -2079,9 +2079,9 @@ Detached nav
@@ -2114,9 +2114,9 @@ Detached nav
@@ -2250,25 +2250,25 @@
Auto height
-
+
First image from Toronto
-
+
Second image from Toronto
-
+
Third image from Toronto
-
+
Fourth image from Toronto
@@ -2313,7 +2313,7 @@
Auto height – vertical
-
+
First New York photo
@@ -2321,7 +2321,7 @@ Auto height – vertical
-
+
Second New York photo
@@ -2329,7 +2329,7 @@ Auto height – vertical
-
+
Third New York photo
@@ -2337,7 +2337,7 @@ Auto height – vertical
-
+
Fourth New York photo
@@ -2350,10 +2350,10 @@ Auto height – vertical
@@ -3006,242 +3006,242 @@
Mast
Country of residence (rich select)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -3657,7 +3657,7 @@
Title
Card with image
-
![A photo of red taxi](images/DSC_4225.jpg)
+
Card content.
Link eleventh.
@@ -3703,7 +3703,7 @@
Options
-
![Lido beach](images/DSC00470.jpg)
+
Fixed background
@@ -3864,7 +3864,7 @@
Dynamic components
WordPress theme
- ![Rado.bg](images/rado.bg.jpg)
+ ![Rado.bg](images/rado.bg.jpg)
Demo site
Download
Note: Image gallery currently not supported in the Block Editor. Please use the Classic Editor for galleries.
@@ -3958,25 +3958,37 @@
Theme
})
});
document.querySelector(location.hash)?.scrollIntoView();
- // window.addEventListener('load', e => {
- document.querySelector('main').style.scrollBehavior = 'smooth';
- document.querySelector('main').click();
- // });
-
- const inView = target => {
- const interSecObs = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- let slide = entry.target;
- });
- }, {
- threshold: .75,
- root: target.parentElement
+ window.addEventListener('load', e => {
+ document.querySelector('html').style.scrollBehavior = 'smooth';
+ });
+ var set_active_timeout = 0;
+ const interSecObs = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ let slide = entry.target;
+ clearTimeout(set_active_timeout);
+ set_active_timeout = setTimeout(() => {
+ document.querySelectorAll('aside nav [aria-current]').forEach(el => el.removeAttribute('aria-current'));
+ let id = `#${slide.closest('section').id}`;
+ document.querySelector(`aside nav a[href="${id}"`).setAttribute('aria-current', 'true');
+ // history.replaceState(null, null, '#carousel');
+ console.log('intersection observing ', slide);
+ }, 300);
});
- interSecObs.observe(target);
- console.log('intersection observing ', target)
- };
+ }, {
+ threshold: .5,
+ rootMargin: "0px 0px -75% 0px"
+ });
+
+ // document.querySelectorAll('main > section .section-title').forEach(el => interSecObs.observe(el));
- document.querySelectorAll('main > section').forEach(inView);
+ window.onpopstate = (event) => {
+ console.log(
+ `location: ${document.location}, state: ${JSON.stringify(event.state)}`
+ );
+ clearTimeout(set_active_timeout);
+ document.querySelectorAll('aside nav [aria-current]').forEach(el => el.removeAttribute('aria-current'));
+ document.querySelector(`aside nav a[href="${location.hash}"`).setAttribute('aria-current', 'true');
+ };