Skip to content

Commit 8b289ad

Browse files
ModelizedModelized
authored
Website Update
1 parent 4a0aa20 commit 8b289ad

3 files changed

Lines changed: 103 additions & 52 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@
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(56px, 13vw, 68px);
57+
--mobile-row-inline: clamp(44px, 10vw, 52px);
58+
--mobile-menu-inline: clamp(30px, 7vw, 38px);
5859
}
5960

6061
* {
@@ -671,6 +672,10 @@ a {
671672

672673
/* Mobile portrait nav */
673674
@media (max-width:900px) and (orientation:portrait) {
675+
.nav {
676+
top: calc(env(safe-area-inset-top, 0px) + 8px);
677+
}
678+
674679
.nav-backdrop {
675680
top: 0;
676681
left: 0;
@@ -688,40 +693,47 @@ a {
688693
.nav-menu-blur {
689694
display: block;
690695
position: fixed;
691-
top: calc(var(--mobile-vv-top, 0px) + 1px);
696+
inset: 0;
692697
left: 0;
693698
right: 0;
694-
bottom: auto;
695-
height: max(0px, calc(var(--mobile-vv-height, 100svh) - 2px));
696699
z-index: 1;
697700
pointer-events: none;
698701
opacity: 0;
699702
visibility: hidden;
700703
background:
701-
radial-gradient(72% 56% at 18% 24%, rgba(255, 157, 77, 0.16), rgba(255, 157, 77, 0) 72%),
702-
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.08) 0%, rgba(6, 8, 12, 0.06) 50%, rgba(6, 8, 12, 0.08) 100%);
704-
backdrop-filter: saturate(100%) blur(0px);
705-
-webkit-backdrop-filter: saturate(100%) blur(0px);
706-
transform: translate3d(0, 0, 0) scale(1.01);
704+
radial-gradient(72% 56% at 18% 24%, rgba(255, 157, 77, 0.14), rgba(255, 157, 77, 0) 72%),
705+
radial-gradient(68% 56% at 80% 36%, rgba(82, 104, 255, 0.13), rgba(82, 104, 255, 0) 74%),
706+
linear-gradient(180deg, rgba(6, 8, 12, 0.035) 0%, rgba(6, 8, 12, 0.02) 45%, rgba(6, 8, 12, 0.035) 100%);
707+
transform: translate3d(0, 0, 0) scale(1.005);
707708
transform-origin: 50% 0%;
708-
overflow: hidden;
709709
transition:
710-
opacity .3s cubic-bezier(.22,1,.36,1),
711-
transform .46s cubic-bezier(.22,1,.36,1),
712-
backdrop-filter .38s cubic-bezier(.22,1,.36,1),
713-
-webkit-backdrop-filter .38s cubic-bezier(.22,1,.36,1),
714-
visibility 0s linear .3s;
710+
opacity .26s cubic-bezier(.22,1,.36,1),
711+
transform .38s cubic-bezier(.22,1,.36,1),
712+
visibility 0s linear .26s;
715713
will-change: opacity, transform;
716714
}
717715

718716
body.nav-menu-open .nav-menu-blur {
719717
opacity: 1;
720718
visibility: visible;
721719
transform: translate3d(0, 0, 0) scale(1);
722-
backdrop-filter: saturate(154%) blur(18px);
723-
-webkit-backdrop-filter: saturate(154%) blur(18px);
724-
transition-delay: 0s, 0s, 0s, 0s, 0s;
720+
transition-delay: 0s, 0s, 0s;
721+
}
722+
723+
.page-wrap,
724+
.site-footer {
725+
transition:
726+
filter .42s cubic-bezier(.22,1,.36,1),
727+
transform .56s cubic-bezier(.22,1,.36,1),
728+
opacity .28s ease;
729+
will-change: filter, transform;
730+
}
731+
732+
body.nav-menu-open .page-wrap,
733+
body.nav-menu-open .site-footer {
734+
filter: blur(18px) saturate(112%);
735+
transform: scale(1.012);
736+
transform-origin: 50% calc(env(safe-area-inset-top, 0px) + 72px);
725737
}
726738

727739
.desktop {
@@ -795,7 +807,7 @@ a {
795807
height: var(--nav-pill-height-mobile);
796808
display: flex;
797809
align-items: center;
798-
padding: 0 var(--mobile-nav-inline);
810+
padding: 0 var(--mobile-row-inline);
799811
gap: 10px;
800812
overflow: visible;
801813
}
@@ -816,8 +828,8 @@ a {
816828
}
817829

818830
.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);
831+
.nav--opening .brand {
832+
transform: translate3d(var(--mobile-brand-shift-x, 0px), var(--mobile-brand-shift-y, 0px), 0) scale(1.18);
821833
}
822834

823835
.nav-search,
@@ -852,7 +864,7 @@ a {
852864
.nav .sheet-content {
853865
position: relative;
854866
min-height: 0;
855-
padding: 0 var(--mobile-nav-inline);
867+
padding: 0 var(--mobile-menu-inline);
856868
overflow: visible;
857869
border: 0 !important;
858870
border-radius: 0 !important;
@@ -882,7 +894,7 @@ a {
882894

883895
.mobile-menu-wordmark {
884896
position: fixed;
885-
right: var(--mobile-wordmark-right, -12px);
897+
right: var(--mobile-wordmark-right, 12px);
886898
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-wordmark-bottom, 96px));
887899
z-index: 1;
888900
display: block;
@@ -912,7 +924,7 @@ a {
912924
margin: 0;
913925
display: grid;
914926
gap: 0.34rem;
915-
padding: var(--mobile-menu-top, 228px) 0 34px;
927+
padding: var(--mobile-menu-top, 244px) 0 34px;
916928
background: transparent !important;
917929
}
918930

@@ -1483,6 +1495,10 @@ a {
14831495

14841496
/* Mobile portrait nav */
14851497
@media (max-width: 980px) and (orientation: portrait) {
1498+
.nav {
1499+
top: calc(env(safe-area-inset-top, 0px) + 8px);
1500+
}
1501+
14861502
.brand-logo {
14871503
height: 37px;
14881504
}
@@ -1492,7 +1508,7 @@ a {
14921508
}
14931509

14941510
.page-wrap {
1495-
padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-mobile) + 22px);
1511+
padding-top: calc(env(safe-area-inset-top, 0px) + 8px + var(--nav-pill-height-mobile) + 18px);
14961512
}
14971513
}
14981514

‎docs/assets/js/shell.js‎

Lines changed: 59 additions & 24 deletions
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 = '20260320b';
6+
const assetVersion = '20260320d';
77
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
88

99
const projects = [
@@ -112,6 +112,8 @@
112112
const root = document.documentElement;
113113
root.style.removeProperty('--mobile-vv-top');
114114
root.style.removeProperty('--mobile-vv-height');
115+
root.style.removeProperty('--mobile-row-inline');
116+
root.style.removeProperty('--mobile-menu-inline');
115117
root.style.removeProperty('--mobile-menu-top');
116118
root.style.removeProperty('--mobile-brand-shift-x');
117119
root.style.removeProperty('--mobile-brand-shift-y');
@@ -131,41 +133,74 @@
131133
const viewportTop = Math.round(vv?.offsetTop ?? 0);
132134
const viewportHeight = Math.round(vv?.height ?? window.innerHeight);
133135
const viewportWidth = Math.round(vv?.width ?? window.innerWidth);
136+
const viewportBottom = viewportTop + viewportHeight;
134137

135138
root.style.setProperty('--mobile-vv-top', `${viewportTop}px`);
136139
root.style.setProperty('--mobile-vv-height', `${Math.max(0, viewportHeight)}px`);
137140

138-
const menuTop = Math.round(Math.min(Math.max(viewportHeight * 0.3, 228), 286));
139-
root.style.setProperty('--mobile-menu-top', `${menuTop}px`);
141+
const rowInline = Math.round(Math.min(Math.max(viewportWidth * 0.1, 44), 52));
142+
const menuInline = Math.round(Math.min(Math.max(viewportWidth * 0.07, 30), 38));
143+
root.style.setProperty('--mobile-row-inline', `${rowInline}px`);
144+
root.style.setProperty('--mobile-menu-inline', `${menuInline}px`);
140145

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`);
146+
const row = nav.querySelector('.row');
147+
const sheetContent = nav.querySelector('.sheet-content');
148+
if (row && sheetContent){
149+
const rowRect = row.getBoundingClientRect();
150+
const sheetContentRect = sheetContent.getBoundingClientRect();
151+
const menuGap = Math.round(Math.min(Math.max(viewportHeight * 0.145, 98), 132));
152+
const menuTop = Math.round(Math.max(72, rowRect.bottom + menuGap - sheetContentRect.top));
153+
root.style.setProperty('--mobile-menu-top', `${menuTop}px`);
154+
}
148155

149156
const shouldAlignBrand =
150157
nav.classList.contains('nav--open') ||
151-
nav.classList.contains('nav--opening') ||
152-
body.classList.contains('nav-menu-closing');
158+
nav.classList.contains('nav--opening');
159+
160+
if (shouldAlignBrand){
161+
const brand = nav.querySelector('.brand');
162+
const logo = nav.querySelector('.brand-logo');
163+
const firstLink = nav.querySelector('.mobile-menu a');
164+
if (brand && firstLink){
165+
const anchorRect = brand.getBoundingClientRect();
166+
const logoRect = (logo || brand).getBoundingClientRect();
167+
const firstLinkRect = firstLink.getBoundingClientRect();
168+
const gapAbove = Math.round(Math.min(Math.max(viewportHeight * 0.028, 18), 26));
169+
const targetTop = firstLinkRect.top - logoRect.height - gapAbove;
170+
const shiftX = Math.round(firstLinkRect.left - logoRect.left);
171+
const shiftY = Math.round(targetTop - logoRect.top);
172+
173+
root.style.setProperty('--mobile-brand-shift-x', `${shiftX}px`);
174+
root.style.setProperty('--mobile-brand-shift-y', `${shiftY}px`);
175+
}
176+
}
177+
178+
const wordmark = document.querySelector('.mobile-menu-wordmark');
179+
if (!wordmark) return;
153180

154-
if (!shouldAlignBrand) return;
181+
const baseRight = Math.round(Math.min(Math.max(viewportWidth * 0.018, 10), 18));
182+
const baseBottom = Math.round(Math.min(Math.max(viewportHeight * 0.085, 48), 74));
183+
let fontSize = Math.round(Math.min(Math.max(viewportHeight * 0.115, 92), 132));
155184

156-
const brand = nav.querySelector('.brand');
157-
const firstLink = nav.querySelector('.mobile-menu a');
158-
if (!brand || !firstLink) return;
185+
root.style.setProperty('--mobile-wordmark-right', `${baseRight}px`);
186+
root.style.setProperty('--mobile-wordmark-bottom', `${baseBottom}px`);
187+
root.style.setProperty('--mobile-wordmark-font-size', `${fontSize}px`);
159188

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);
189+
let wordmarkRect = wordmark.getBoundingClientRect();
190+
if (wordmarkRect.height > 0){
191+
const desiredHeight = viewportHeight * 0.72;
192+
fontSize = Math.round(Math.min(Math.max(fontSize * (desiredHeight / wordmarkRect.height), 92), 144));
193+
root.style.setProperty('--mobile-wordmark-font-size', `${fontSize}px`);
166194

167-
root.style.setProperty('--mobile-brand-shift-x', `${shiftX}px`);
168-
root.style.setProperty('--mobile-brand-shift-y', `${shiftY}px`);
195+
wordmarkRect = wordmark.getBoundingClientRect();
196+
const overflowBottom = Math.max(0, wordmarkRect.bottom - (viewportBottom - 18));
197+
const overflowRight = Math.max(0, wordmarkRect.right - (viewportWidth - 12));
198+
const correctedBottom = baseBottom + Math.ceil(overflowBottom) + 4;
199+
const correctedRight = baseRight + Math.ceil(overflowRight);
200+
201+
root.style.setProperty('--mobile-wordmark-bottom', `${correctedBottom}px`);
202+
root.style.setProperty('--mobile-wordmark-right', `${correctedRight}px`);
203+
}
169204
}
170205

171206
function clearTransientMobileMenuState(nav){

‎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=20260320b">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260320d">
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=20260320b" defer></script>
136+
<script src="assets/js/shell.js?v=20260320d" defer></script>
137137
</body>
138138
</html>

0 commit comments

Comments
 (0)