Skip to content

Commit e4124c2

Browse files
PrashantUnityPrashantUnity
committed
Scrolling Fixed
1 parent 4e26714 commit e4124c2

10 files changed

Lines changed: 61 additions & 84 deletions

File tree

‎assets/css/tailwind-input.css‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,7 @@
2323
filter: invert(1) brightness(1.1);
2424
}
2525

26-
/* Hero-only snap: gentle align when scrolling back to the top panel */
27-
@media (prefers-reduced-motion: no-preference) {
28-
html:has(body.home-page) {
29-
scroll-behavior: smooth;
30-
scroll-snap-type: y proximity;
31-
}
32-
}
33-
34-
.home-sections > section#hero {
35-
scroll-snap-align: start;
36-
scroll-snap-stop: normal;
37-
scroll-margin-top: var(--home-nav-height, 73px);
38-
}
39-
26+
.home-sections > section#hero,
4027
.home-sections > section:not(#hero) {
4128
scroll-margin-top: var(--home-nav-height, 73px);
4229
}
@@ -180,7 +167,8 @@
180167
@apply hidden;
181168
}
182169

183-
body.search-palette-open {
170+
body.search-palette-open,
171+
body.mobile-menu-open {
184172
@apply overflow-hidden;
185173
}
186174

@@ -342,7 +330,15 @@
342330
.nav-dropdown--mega:hover,
343331
.nav-dropdown--mega:focus-within,
344332
.nav-dropdown--mega.is-open {
345-
@apply opacity-100 visible pointer-events-auto;
333+
@apply opacity-100 visible pointer-events-none;
334+
}
335+
336+
.nav-shell:has(.nav-item-browse:hover) .nav-dropdown--mega .nav-mega__panel,
337+
.nav-shell:has(.nav-item-browse:focus-within) .nav-dropdown--mega .nav-mega__panel,
338+
.nav-dropdown--mega:hover .nav-mega__panel,
339+
.nav-dropdown--mega:focus-within .nav-mega__panel,
340+
.nav-dropdown--mega.is-open .nav-mega__panel {
341+
@apply pointer-events-auto;
346342
}
347343

348344
.nav-shell:has(.nav-item-about:hover) .nav-dropdown--about,

‎layouts/partials/home/faq.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<span class="inline-block px-4 py-1.5 mb-4 text-sm font-medium text-slate-700 bg-white rounded-full border border-gray-200 shadow-sm">FAQ</span>
66
<h2 id="faq-heading" class="text-3xl md:text-4xl font-bold text-[#0B162C] tracking-tight m-0">Frequently asked questions</h2>
77
</div>
8-
<div class="home-faq-scroll flex-1 min-h-0 overflow-y-auto overscroll-contain pr-1 -mr-1 flex flex-col gap-3 pb-4">
8+
<div class="home-faq-scroll flex-1 min-h-0 overflow-y-auto pr-1 -mr-1 flex flex-col gap-3 pb-4">
99
{{- range hugo.Data.faq.faqs -}}
1010
<details class="bg-white rounded-2xl border border-gray-100 shadow-sm px-6 py-4 group shrink-0">
1111
<summary class="text-[15px] font-semibold text-slate-900 cursor-pointer list-none flex justify-between items-center gap-4">

‎layouts/partials/home/hero.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{- $slides := $hero.slides -}}
77
{{- $firstSlide := index $slides 0 -}}
88

9-
<section id="hero" data-section-label="Home" class="home-hero snap-start relative text-center flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-[#edf2f8]">
9+
<section id="hero" data-section-label="Home" class="home-hero relative text-center flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-[#edf2f8]">
1010
<div class="home-hero__bg" aria-hidden="true">
1111
<div id="bg-layer-1" class="home-hero__bg-layer opacity-100" style="background-image: url('{{ $firstSlide.image }}');"></div>
1212
<div id="bg-layer-2" class="home-hero__bg-layer opacity-0"></div>

‎layouts/partials/home/testimonials.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<h2 id="testimonials-heading" class="text-4xl md:text-[44px] font-bold text-[#0B162C] tracking-tight m-0">What our users say</h2>
88
</div>
99

10-
<div class="home-testimonials__scroller relative h-[600px] max-h-[60vh] overflow-hidden group">
10+
<div class="home-testimonials__scroller relative h-[600px] max-h-[60vh] overflow-hidden group pointer-events-none">
1111
<div class="home-testimonials__fade home-testimonials__fade--top absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-gray-50/50 to-transparent z-10 pointer-events-none" aria-hidden="true"></div>
1212
<div class="home-testimonials__fade home-testimonials__fade--bottom absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-gray-50/50 to-transparent z-10 pointer-events-none" aria-hidden="true"></div>
1313

@@ -21,7 +21,7 @@ <h2 id="testimonials-heading" class="text-4xl md:text-[44px] font-bold text-[#0B
2121
{{- $colItems = $colItems | append $t -}}
2222
{{- end -}}
2323
{{- end -}}
24-
<div class="h-full overflow-hidden {{ index $colClasses $colIndex }}">
24+
<div class="h-full overflow-hidden pointer-events-none {{ index $colClasses $colIndex }}">
2525
<div class="flex flex-col gap-6 animate-{{ index $animations $colIndex }} group-hover:[animation-play-state:paused]">
2626
{{- range $colItems -}}
2727
{{ partial "home/testimonial-card.html" . }}

‎static/css/home-tailwind.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/css/modern-dark-theme.css‎

Lines changed: 8 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -271,59 +271,19 @@
271271
background-color: rgb(15 23 42) !important;
272272
}
273273

274-
[data-theme="dark"] body.home-page .home-hero__bg-layer {
275-
filter: saturate(1.05) contrast(1.05) brightness(0.85) !important;
276-
}
277-
278274
[data-theme="dark"] body.home-page .home-hero__overlay {
279-
background:
280-
linear-gradient(
281-
180deg,
282-
rgb(15 23 42 / 0.45) 0%,
283-
rgb(15 23 42 / 0.72) 40%,
284-
rgb(15 23 42 / 0.85) 65%,
285-
rgb(15 23 42 / 0.55) 100%
286-
),
287-
radial-gradient(ellipse 90% 70% at 50% 42%, rgb(15 23 42 / 0.5) 0%, transparent 70%) !important;
288-
}
289-
290-
[data-theme="dark"] body.home-page .home-hero__badge {
291-
background: rgb(30 41 59) !important;
292-
border-color: rgb(51 65 85) !important;
293-
color: rgb(226 232 240) !important;
294-
}
295-
296-
[data-theme="dark"] body.home-page .home-hero__title {
297-
color: rgb(248 250 252) !important;
298-
}
299-
300-
[data-theme="dark"] body.home-page .home-hero__desc {
301-
color: rgb(203 213 225) !important;
302-
}
303-
304-
[data-theme="dark"] body.home-page .home-hero__search.search-trigger {
305-
background: rgb(30 41 59) !important;
306-
border-color: rgb(51 65 85) !important;
307-
box-shadow: 0 4px 20px rgb(0 0 0 / 0.25) !important;
308-
}
309-
310-
[data-theme="dark"] body.home-page .home-hero__search .search-trigger__label {
311-
color: rgb(203 213 225) !important;
312-
}
313-
314-
[data-theme="dark"] body.home-page .home-hero__search .search-trigger__icon {
315-
color: rgb(148 163 184) !important;
316-
}
317-
318-
[data-theme="dark"] body.home-page .home-hero__scroll-hint {
319-
color: rgb(148 163 184) !important;
275+
background: linear-gradient(
276+
to bottom,
277+
rgb(15 23 42 / 0.55),
278+
rgb(15 23 42 / 0.68),
279+
rgb(15 23 42 / 0.82)
280+
) !important;
320281
}
321282

322283
[data-theme="dark"] body.home-page .home-hero__nav-btn {
323-
background-color: rgb(30 41 59 / 0.95) !important;
324-
border-color: rgb(71 85 105 / 0.9) !important;
284+
background-color: rgb(30 41 59 / 0.9) !important;
285+
border-color: rgb(51 65 85 / 0.9) !important;
325286
color: rgb(226 232 240) !important;
326-
box-shadow: 0 4px 16px rgb(0 0 0 / 0.35) !important;
327287
}
328288

329289
[data-theme="dark"] body.home-page .home-hero__nav-btn:hover {

‎static/js/home-nav.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
isOpen = open;
1212
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
1313
menu.setAttribute('aria-hidden', open ? 'false' : 'true');
14+
document.body.classList.toggle('mobile-menu-open', open);
1415

1516
if (open) {
1617
menu.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
@@ -40,6 +41,13 @@
4041
setOpen(false);
4142
});
4243
});
44+
45+
window.cfdMobileMenu = {
46+
setOpen: setOpen,
47+
close: function () {
48+
setOpen(false);
49+
},
50+
};
4351
}
4452

4553
/** Keep desktop dropdowns open while moving pointer from trigger to panel */

‎static/js/home-scroll.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,8 @@
102102
if (!target || !container.contains(target)) return;
103103
e.preventDefault();
104104
scrollToHash(href, 'smooth', 'push');
105-
const mobileMenu = document.getElementById('mobile-menu');
106-
const menuBtn = document.getElementById('mobile-menu-btn');
107-
if (mobileMenu && !mobileMenu.classList.contains('translate-x-full')) {
108-
mobileMenu.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
109-
mobileMenu.setAttribute('aria-hidden', 'true');
110-
if (menuBtn) menuBtn.setAttribute('aria-expanded', 'false');
105+
if (window.cfdMobileMenu && typeof window.cfdMobileMenu.close === 'function') {
106+
window.cfdMobileMenu.close();
111107
}
112108
});
113109
});

‎static/js/search-palette.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -246,11 +246,14 @@
246246
}
247247
}
248248

249+
function setBodyScrollLocked(locked) {
250+
if (isEmbedded) return;
251+
document.body.classList.toggle('search-palette-open', locked);
252+
}
253+
249254
function closeMobileMenu() {
250-
var menuBtn = document.getElementById('mobile-menu-btn');
251-
var menu = document.getElementById('mobile-menu');
252-
if (menuBtn && menu && menuBtn.getAttribute('aria-expanded') === 'true') {
253-
menuBtn.click();
255+
if (window.cfdMobileMenu && typeof window.cfdMobileMenu.close === 'function') {
256+
window.cfdMobileMenu.close();
254257
}
255258
}
256259

@@ -286,6 +289,7 @@
286289
}
287290
if (isOpen && !isPaletteVisible()) {
288291
isOpen = false;
292+
setBodyScrollLocked(false);
289293
}
290294

291295
closeMobileMenu();
@@ -294,7 +298,7 @@
294298
palette.removeAttribute('hidden');
295299
palette.hidden = false;
296300
palette.setAttribute('aria-hidden', 'false');
297-
document.body.classList.add('search-palette-open');
301+
setBodyScrollLocked(true);
298302
palette.classList.add('is-visible');
299303
if (input) {
300304
input.value = query || '';
@@ -304,14 +308,15 @@
304308
}
305309

306310
function close(opts) {
307-
if (!palette || !isOpen || isEmbedded) return;
311+
if (isEmbedded) return;
312+
setBodyScrollLocked(false);
313+
if (!palette || !isOpen) return;
308314
if (!(opts && opts.force) && Date.now() - openedAt < OPEN_GUARD_MS) return;
309315
isOpen = false;
310316
activeCategory = null;
311317
activeCategorySlug = null;
312318
palette.classList.remove('is-visible');
313319
palette.setAttribute('aria-hidden', 'true');
314-
document.body.classList.remove('search-palette-open');
315320
setTimeout(function () {
316321
palette.hidden = true;
317322
palette.setAttribute('hidden', '');
@@ -320,6 +325,10 @@
320325
}, 200);
321326
}
322327

328+
function unlockBodyOnExit() {
329+
setBodyScrollLocked(false);
330+
}
331+
323332
function openSelected() {
324333
var nodes = getInteractives();
325334
if (activeIndex >= 0 && nodes[activeIndex]) {
@@ -354,7 +363,7 @@
354363
}
355364
if (e.target.closest('[data-search-close]')) {
356365
e.preventDefault();
357-
close();
366+
close({ force: true });
358367
}
359368
},
360369
true
@@ -365,7 +374,14 @@
365374
if (!palette) return;
366375

367376
document.querySelectorAll('[data-search-close]').forEach(function (el) {
368-
el.addEventListener('click', close);
377+
el.addEventListener('click', function () {
378+
close({ force: true });
379+
});
380+
});
381+
382+
window.addEventListener('pagehide', unlockBodyOnExit);
383+
document.addEventListener('visibilitychange', function () {
384+
if (document.visibilityState === 'hidden') unlockBodyOnExit();
369385
});
370386

371387
if (input) {

‎tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ module.exports = {
7575
'group-hover/cat:bg-brand/10',
7676
'line-clamp-1',
7777
'search-palette-open',
78+
'mobile-menu-open',
7879
'search-palette-page',
7980
'search-palette--embedded',
8081
'is-visible',

0 commit comments

Comments
 (0)