Skip to content

Commit 4a0aa20

Browse files
ModelizedModelized
authored
Website Update
1 parent 0933a5a commit 4a0aa20

3 files changed

Lines changed: 90 additions & 16 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
--banner-top-gap: 14px;
5555
--heading-font: "Unbounded", "Arial", sans-serif;
5656
--body-font: "Space Grotesk", "Segoe UI", sans-serif;
57-
--mobile-nav-inline: clamp(46px, 10vw, 56px);
57+
--mobile-nav-inline: clamp(56px, 13vw, 68px);
5858
}
5959

6060
* {
@@ -688,26 +688,24 @@ a {
688688
.nav-menu-blur {
689689
display: block;
690690
position: fixed;
691-
top: 0;
691+
top: calc(var(--mobile-vv-top, 0px) + 1px);
692692
left: 0;
693693
right: 0;
694-
bottom: 0;
695-
height: auto;
694+
bottom: auto;
695+
height: max(0px, calc(var(--mobile-vv-height, 100svh) - 2px));
696696
z-index: 1;
697697
pointer-events: none;
698698
opacity: 0;
699699
visibility: hidden;
700700
background:
701701
radial-gradient(72% 56% at 18% 24%, rgba(255, 157, 77, 0.16), rgba(255, 157, 77, 0) 72%),
702702
radial-gradient(68% 56% at 80% 36%, rgba(82, 104, 255, 0.15), rgba(82, 104, 255, 0) 74%),
703-
linear-gradient(180deg, rgba(6, 8, 12, 0.16) 0%, rgba(6, 8, 12, 0.13) 48%, rgba(6, 8, 12, 0.1) 100%);
703+
linear-gradient(180deg, rgba(6, 8, 12, 0.08) 0%, rgba(6, 8, 12, 0.06) 50%, rgba(6, 8, 12, 0.08) 100%);
704704
backdrop-filter: saturate(100%) blur(0px);
705705
-webkit-backdrop-filter: saturate(100%) blur(0px);
706706
transform: translate3d(0, 0, 0) scale(1.01);
707707
transform-origin: 50% 0%;
708708
overflow: hidden;
709-
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 8px), rgba(0,0,0,0) 100%);
710-
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 8px), rgba(0,0,0,0) 100%);
711709
transition:
712710
opacity .3s cubic-bezier(.22,1,.36,1),
713711
transform .46s cubic-bezier(.22,1,.36,1),
@@ -817,8 +815,9 @@ a {
817815
height: 36px;
818816
}
819817

820-
.nav--open .brand {
821-
transform: translate3d(6px, 56px, 0) scale(1.18);
818+
.nav--open .brand,
819+
body.nav-menu-closing .brand {
820+
transform: translate3d(var(--mobile-brand-shift-x, 10px), var(--mobile-brand-shift-y, 54px), 0) scale(1.18);
822821
}
823822

824823
.nav-search,
@@ -883,12 +882,12 @@ a {
883882

884883
.mobile-menu-wordmark {
885884
position: fixed;
886-
right: -1rem;
887-
bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(4.8rem, 13vh, 6.4rem));
885+
right: var(--mobile-wordmark-right, -12px);
886+
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-wordmark-bottom, 96px));
888887
z-index: 1;
889888
display: block;
890889
font-family: var(--heading-font);
891-
font-size: clamp(9.4rem, 27vw, 12.6rem);
890+
font-size: var(--mobile-wordmark-font-size, 104px);
892891
font-weight: 800;
893892
line-height: 1;
894893
letter-spacing: 0.015em;
@@ -913,7 +912,7 @@ a {
913912
margin: 0;
914913
display: grid;
915914
gap: 0.34rem;
916-
padding: 194px 0 34px;
915+
padding: var(--mobile-menu-top, 228px) 0 34px;
917916
background: transparent !important;
918917
}
919918

‎docs/assets/js/shell.js‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
const body = document.body;
55
const base = (body?.getAttribute('data-base') || '.').trim();
6-
const assetVersion = '20260320a';
6+
const assetVersion = '20260320b';
77
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
88

99
const projects = [
@@ -108,12 +108,73 @@
108108
return window.matchMedia('(max-width:900px) and (orientation:portrait)').matches;
109109
}
110110

111+
function clearPortraitMenuLayoutVars(){
112+
const root = document.documentElement;
113+
root.style.removeProperty('--mobile-vv-top');
114+
root.style.removeProperty('--mobile-vv-height');
115+
root.style.removeProperty('--mobile-menu-top');
116+
root.style.removeProperty('--mobile-brand-shift-x');
117+
root.style.removeProperty('--mobile-brand-shift-y');
118+
root.style.removeProperty('--mobile-wordmark-font-size');
119+
root.style.removeProperty('--mobile-wordmark-right');
120+
root.style.removeProperty('--mobile-wordmark-bottom');
121+
}
122+
123+
function syncPortraitMobileMenuLayout(nav){
124+
const root = document.documentElement;
125+
if (!nav || !isPortraitMobile()){
126+
clearPortraitMenuLayoutVars();
127+
return;
128+
}
129+
130+
const vv = window.visualViewport;
131+
const viewportTop = Math.round(vv?.offsetTop ?? 0);
132+
const viewportHeight = Math.round(vv?.height ?? window.innerHeight);
133+
const viewportWidth = Math.round(vv?.width ?? window.innerWidth);
134+
135+
root.style.setProperty('--mobile-vv-top', `${viewportTop}px`);
136+
root.style.setProperty('--mobile-vv-height', `${Math.max(0, viewportHeight)}px`);
137+
138+
const menuTop = Math.round(Math.min(Math.max(viewportHeight * 0.3, 228), 286));
139+
root.style.setProperty('--mobile-menu-top', `${menuTop}px`);
140+
141+
const wordmarkFontSize = Math.round(Math.min(Math.max(viewportHeight * 0.112, 94), 122));
142+
const wordmarkRight = Math.round(Math.max(-18, Math.min(-8, viewportWidth * -0.018)));
143+
const wordmarkBottom = Math.round(Math.min(Math.max(viewportHeight * 0.165, 84), 122));
144+
145+
root.style.setProperty('--mobile-wordmark-font-size', `${wordmarkFontSize}px`);
146+
root.style.setProperty('--mobile-wordmark-right', `${wordmarkRight}px`);
147+
root.style.setProperty('--mobile-wordmark-bottom', `${wordmarkBottom}px`);
148+
149+
const shouldAlignBrand =
150+
nav.classList.contains('nav--open') ||
151+
nav.classList.contains('nav--opening') ||
152+
body.classList.contains('nav-menu-closing');
153+
154+
if (!shouldAlignBrand) return;
155+
156+
const brand = nav.querySelector('.brand');
157+
const firstLink = nav.querySelector('.mobile-menu a');
158+
if (!brand || !firstLink) return;
159+
160+
const brandRect = brand.getBoundingClientRect();
161+
const firstLinkRect = firstLink.getBoundingClientRect();
162+
const gapAbove = Math.round(Math.min(Math.max(viewportHeight * 0.024, 18), 24));
163+
const targetTop = firstLinkRect.top - brandRect.height - gapAbove;
164+
const shiftX = Math.round(firstLinkRect.left - brandRect.left);
165+
const shiftY = Math.round(targetTop - brandRect.top);
166+
167+
root.style.setProperty('--mobile-brand-shift-x', `${shiftX}px`);
168+
root.style.setProperty('--mobile-brand-shift-y', `${shiftY}px`);
169+
}
170+
111171
function clearTransientMobileMenuState(nav){
112172
if (nav?.classList.contains('nav--open')) return;
113173
nav?.classList.remove('nav--opening');
114174
body.classList.remove('nav-menu-open');
115175
body.classList.remove('nav-menu-closing');
116176
body.classList.remove('no-scroll');
177+
syncPortraitMobileMenuLayout(nav || document.querySelector('.nav'));
117178
}
118179

119180

@@ -131,12 +192,18 @@
131192
body.classList.add('nav-menu-open');
132193
body.classList.remove('nav-menu-closing');
133194
body.classList.add('no-scroll');
195+
syncPortraitMobileMenuLayout(nav);
196+
requestAnimationFrame(() => {
197+
syncPortraitMobileMenuLayout(nav);
198+
requestAnimationFrame(() => syncPortraitMobileMenuLayout(nav));
199+
});
134200
}else{
135201
nav.classList.remove('nav--open');
136202
nav.classList.remove('nav--opening');
137203
body.classList.remove('nav-menu-open');
138204
body.classList.add('nav-menu-closing');
139205
body.classList.remove('no-scroll');
206+
syncPortraitMobileMenuLayout(nav);
140207
}
141208

142209
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
@@ -172,7 +239,10 @@
172239

173240
if (!nav.classList.contains('nav--open')){
174241
clearTransientMobileMenuState(nav);
242+
return;
175243
}
244+
245+
syncPortraitMobileMenuLayout(nav);
176246
}
177247

178248
function initMobileMenuDelays(){
@@ -464,6 +534,10 @@
464534
window.addEventListener('resize', syncMobileNavState);
465535
window.addEventListener('orientationchange', syncMobileNavState);
466536
window.addEventListener('pageshow', syncMobileNavState);
537+
if (window.visualViewport){
538+
window.visualViewport.addEventListener('resize', () => syncPortraitMobileMenuLayout(nav));
539+
window.visualViewport.addEventListener('scroll', () => syncPortraitMobileMenuLayout(nav));
540+
}
467541
}
468542

469543
const brand = document.querySelector('.brand');
@@ -486,6 +560,7 @@
486560
initMenuThumb();
487561
initMobileMenuDelays();
488562
initNavBackdrop();
563+
syncPortraitMobileMenuLayout(nav);
489564
}
490565

491566
function initSectionSpy() {

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/css/style.css?v=20260320a">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260320b">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -133,6 +133,6 @@ <h2>Live Modules</h2>
133133

134134
<div id="footer-slot"></div>
135135

136-
<script src="assets/js/shell.js?v=20260320a" defer></script>
136+
<script src="assets/js/shell.js?v=20260320b" defer></script>
137137
</body>
138138
</html>

0 commit comments

Comments
 (0)