Skip to content

Commit 0abb67e

Browse files
ModelizedModelized
authored
Website Update
1 parent 61b5cae commit 0abb67e

3 files changed

Lines changed: 96 additions & 78 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -584,15 +584,14 @@ a {
584584
pointer-events: none;
585585
opacity: 0;
586586
visibility: hidden;
587-
background: transparent;
587+
background: rgba(7, 9, 14, 0.08);
588588
transition:
589589
opacity .36s cubic-bezier(.22,1,.36,1),
590590
visibility 0s linear .36s;
591591
will-change: opacity;
592592
}
593593

594-
body.nav-menu-open .nav-menu-blur,
595-
body.nav-menu-closing .nav-menu-blur {
594+
body.nav-menu-open .nav-menu-blur {
596595
opacity: 1;
597596
visibility: visible;
598597
transition-delay: 0s, 0s;
@@ -606,9 +605,7 @@ a {
606605
}
607606

608607
body.nav-menu-open .page-wrap,
609-
body.nav-menu-open .site-footer,
610-
body.nav-menu-closing .page-wrap,
611-
body.nav-menu-closing .site-footer {
608+
body.nav-menu-open .site-footer {
612609
opacity: 1;
613610
filter: blur(16px) saturate(138%);
614611
}
@@ -618,7 +615,7 @@ a {
618615
will-change: auto;
619616
}
620617

621-
body.nav-menu-open .hero-text {
618+
body.nav-menu-open .hero-text--outline {
622619
text-shadow:
623620
1px 0 0 var(--hero-outline-color),
624621
-1px 0 0 var(--hero-outline-color),
@@ -630,7 +627,8 @@ a {
630627
-1px 1px 0 var(--hero-outline-color);
631628
}
632629

633-
body.nav-menu-open .hero-text::after {
630+
body.nav-menu-open .hero-text--fill,
631+
body.nav-menu-open .hero-text--glow {
634632
filter: none;
635633
}
636634

@@ -756,7 +754,7 @@ a {
756754
min-height: 0;
757755
padding: 0 var(--mobile-menu-inline);
758756
opacity: 0;
759-
transform: translate3d(0, -10px, 0);
757+
transform: translate3d(0, -8px, 0);
760758
overflow: visible;
761759
border: 0 !important;
762760
border-radius: 0 !important;
@@ -766,8 +764,8 @@ a {
766764
box-shadow: none !important;
767765
outline: 0 !important;
768766
transition:
769-
transform .46s cubic-bezier(.22,1,.36,1),
770-
opacity .28s cubic-bezier(.22,1,.36,1);
767+
transform .52s cubic-bezier(.22,1,.36,1),
768+
opacity .34s cubic-bezier(.22,1,.36,1);
771769
will-change: transform, opacity;
772770
}
773771

@@ -798,7 +796,7 @@ a {
798796
text-transform: uppercase;
799797
white-space: nowrap;
800798
color: transparent;
801-
-webkit-text-stroke: 1.15px rgba(243, 242, 238, 0.22);
799+
-webkit-text-stroke: 1.3px rgba(243, 242, 238, 0.24);
802800
opacity: 0;
803801
transform: translate3d(0.85rem, 0, 0) rotate(-90deg);
804802
transform-origin: right bottom;
@@ -815,7 +813,7 @@ a {
815813
z-index: 3;
816814
margin: 0;
817815
display: grid;
818-
gap: 0.48rem;
816+
gap: 0.42rem;
819817
padding-top: var(--mobile-menu-top, 272px);
820818
padding-right: 0;
821819
padding-bottom: 34px;
@@ -835,12 +833,12 @@ a {
835833

836834
.mobile-menu li {
837835
opacity: 0;
838-
transform: translate3d(0, -22px, 0);
839-
filter: blur(6px);
836+
transform: translate3d(0, -16px, 0);
837+
filter: blur(4px);
840838
transition:
841-
opacity .34s cubic-bezier(.16,1,.3,1),
842-
transform .78s cubic-bezier(.22,1,.36,1),
843-
filter .44s cubic-bezier(.22,1,.36,1);
839+
opacity .42s cubic-bezier(.16,1,.3,1),
840+
transform .62s cubic-bezier(.22,1,.36,1),
841+
filter .52s cubic-bezier(.22,1,.36,1);
844842
will-change: opacity, transform, filter;
845843
}
846844

@@ -891,16 +889,16 @@ a {
891889
}
892890

893891
body.nav-menu-open .mobile-menu-wordmark {
894-
opacity: 0.23;
892+
opacity: 0.24;
895893
transform: translate3d(0, 0, 0) rotate(-90deg);
896894
filter: blur(0);
897895
transition-delay: .08s;
898896
}
899897

900898
body.nav-menu-closing .mobile-menu li {
901899
opacity: 0;
902-
transform: translate3d(0, -14px, 0);
903-
filter: blur(5px);
900+
transform: translate3d(0, -12px, 0);
901+
filter: blur(4px);
904902
transition-delay: 0s, 0s, 0s;
905903
}
906904
}
@@ -1007,6 +1005,10 @@ a {
10071005
will-change: transform, filter;
10081006
}
10091007

1008+
.js .hero-title.hero-title--pending {
1009+
visibility: hidden;
1010+
}
1011+
10101012
.js .hero-title.hero-title--pending .hero-title-text {
10111013
display: none;
10121014
}
@@ -1024,7 +1026,6 @@ a {
10241026

10251027
.hero-line {
10261028
display: block;
1027-
overflow: hidden;
10281029
}
10291030

10301031
.hero-title--measure {
@@ -1041,71 +1042,72 @@ a {
10411042
display: inline;
10421043
}
10431044

1044-
.hero-text {
1045+
.hero-stack {
10451046
position: relative;
10461047
display: inline-block;
10471048
white-space: nowrap;
1049+
}
1050+
1051+
.hero-text {
1052+
display: inline-block;
1053+
white-space: nowrap;
1054+
}
1055+
1056+
.hero-text--outline {
1057+
position: relative;
10481058
color: transparent;
10491059
-webkit-text-fill-color: transparent;
10501060
-webkit-text-stroke: 1.3px var(--hero-outline-color);
10511061
text-shadow:
10521062
0 0 1px var(--hero-outline-color),
1053-
0 0 14px rgba(255, 157, 77, 0.06),
1054-
0 0 12px rgba(89, 109, 255, 0.06);
1055-
opacity: 1;
1056-
transform: none;
1057-
filter: none;
1063+
0 0 12px rgba(255, 157, 77, 0.04),
1064+
0 0 10px rgba(89, 109, 255, 0.04);
10581065
}
10591066

1060-
.hero-text::before,
1061-
.hero-text::after {
1062-
content: attr(data-text);
1067+
.hero-text--fill,
1068+
.hero-text--glow {
10631069
position: absolute;
1064-
inset: 0;
1070+
inset: 0 auto auto 0;
1071+
width: 0;
1072+
overflow: hidden;
10651073
pointer-events: none;
10661074
}
10671075

1068-
.hero-text::before {
1069-
color: rgba(255, 255, 255, 0.9);
1070-
clip-path: inset(0 100% 0 0);
1071-
opacity: 0.78;
1072-
text-shadow:
1073-
0 0 22px rgba(255, 157, 77, 0.44),
1074-
0 0 18px rgba(89, 109, 255, 0.32);
1075-
filter: blur(12px);
1076-
transition:
1077-
clip-path 1120ms cubic-bezier(0.16, 1, 0.3, 1),
1078-
opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
1079-
filter 880ms cubic-bezier(0.16, 1, 0.3, 1);
1080-
}
1081-
1082-
.hero-text::after {
1076+
.hero-text--fill {
10831077
color: var(--hero-fill-color);
1084-
clip-path: inset(0 100% 0 0);
1085-
opacity: 1;
10861078
filter: blur(8px);
10871079
transition:
1088-
clip-path 1120ms cubic-bezier(0.16, 1, 0.3, 1),
1080+
width 1120ms cubic-bezier(0.16, 1, 0.3, 1),
10891081
filter 820ms cubic-bezier(0.16, 1, 0.3, 1);
10901082
}
10911083

1092-
.js body.hero-ready .hero-text {
1093-
opacity: 1;
1094-
transform: none;
1095-
filter: none;
1084+
.hero-text--glow {
1085+
color: rgba(255, 255, 255, 0.92);
1086+
opacity: 0.88;
1087+
filter: blur(10px);
1088+
text-shadow:
1089+
0 0 20px rgba(255, 157, 77, 0.42),
1090+
0 0 16px rgba(89, 109, 255, 0.28);
1091+
transition:
1092+
width 1120ms cubic-bezier(0.16, 1, 0.3, 1),
1093+
opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
1094+
filter 880ms cubic-bezier(0.16, 1, 0.3, 1);
10961095
}
10971096

1098-
.js body.hero-ready .hero-text::before {
1099-
clip-path: inset(0 0 0 0);
1100-
opacity: 0;
1097+
.js body.hero-ready .hero-text--fill {
1098+
width: 100%;
11011099
filter: blur(0);
1102-
transition-delay: calc(var(--line-index, 0) * 150ms + 110ms);
1100+
transition-delay: calc(var(--line-index, 0) * 150ms + 90ms);
11031101
}
11041102

1105-
.js body.hero-ready .hero-text::after {
1106-
clip-path: inset(0 0 0 0);
1103+
.js body.hero-ready .hero-text--glow {
1104+
width: 100%;
1105+
opacity: 0;
11071106
filter: blur(0);
1108-
transition-delay: calc(var(--line-index, 0) * 150ms + 90ms);
1107+
transition-delay:
1108+
calc(var(--line-index, 0) * 150ms + 90ms),
1109+
calc(var(--line-index, 0) * 150ms + 320ms),
1110+
calc(var(--line-index, 0) * 150ms + 90ms);
11091111
}
11101112

11111113
.hero-bottom {
@@ -1479,14 +1481,14 @@ a {
14791481
display: none;
14801482
}
14811483

1482-
.hero-text::after {
1483-
clip-path: inset(0 0 0 0) !important;
1484+
.hero-text--fill {
1485+
width: 100% !important;
14841486
filter: none !important;
14851487
transition: none !important;
14861488
}
14871489

1488-
.hero-text::before {
1489-
clip-path: inset(0 0 0 0) !important;
1490+
.hero-text--glow {
1491+
width: 100% !important;
14901492
opacity: 0 !important;
14911493
filter: none !important;
14921494
transition: none !important;

‎docs/assets/js/shell.js‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
const sheetContent = nav.querySelector('.sheet-content');
201201
if (rowRect && sheetContent){
202202
const sheetContentRect = sheetContent.getBoundingClientRect();
203-
const menuGap = Math.round(Math.min(Math.max(viewportHeight * 0.192, 122), 158));
203+
const menuGap = Math.round(Math.min(Math.max(viewportHeight * 0.182, 114), 148));
204204
const menuTop = Math.round(Math.max(72, rowRect.bottom + menuGap - sheetContentRect.top) - compositionLift);
205205
root.style.setProperty('--mobile-menu-top', `${menuTop}px`);
206206
}
@@ -214,9 +214,9 @@
214214
if (brand && firstLink && rowRect){
215215
const logoRect = (logo || brand).getBoundingClientRect();
216216
const firstLinkRect = firstLink.getBoundingClientRect();
217-
const gapAbove = Math.round(Math.min(Math.max(viewportHeight * 0.024, 16), 20));
217+
const gapAbove = Math.round(Math.min(Math.max(viewportHeight * 0.02, 12), 16));
218218
const alignedTop = firstLinkRect.top - logoRect.height - gapAbove;
219-
const minLogoTop = Math.round(rowRect.top + 12);
219+
const minLogoTop = Math.round(rowRect.top + 10);
220220
const targetTop = Math.max(alignedTop, minLogoTop) - compositionLift;
221221
const visualLeftInset = logoRect.width * (115 / 512);
222222
const shiftX = Math.round(firstLinkRect.left - (logoRect.left + visualLeftInset));
@@ -307,7 +307,7 @@
307307
if (!open) {
308308
clearTransientMobileMenuState(nav);
309309
}
310-
}, open ? 0 : 380);
310+
}, open ? 0 : 360);
311311
}
312312

313313
function closeMobileNav(){
@@ -337,12 +337,12 @@
337337
const items = Array.from(document.querySelectorAll('.mobile-menu li'));
338338
if (!items.length) return;
339339

340-
const fallbackDelays = [0.02, 0.06, 0.10, 0.14, 0.19, 0.25, 0.32, 0.40];
340+
const fallbackDelays = [0.00, 0.03, 0.06, 0.09, 0.13, 0.17, 0.22, 0.28];
341341

342342
items.forEach((item, index) => {
343343
const existing = item.style.getPropertyValue('--menu-delay').trim();
344344
if (existing) return;
345-
const delay = fallbackDelays[index] ?? (0.40 + (index - fallbackDelays.length + 1) * 0.08);
345+
const delay = fallbackDelays[index] ?? (0.28 + (index - fallbackDelays.length + 1) * 0.06);
346346
item.style.setProperty('--menu-delay', `${delay}s`);
347347
});
348348
}
@@ -959,12 +959,25 @@
959959
row.className = "hero-line";
960960
row.style.setProperty("--line-index", String(index));
961961

962-
const text = document.createElement("span");
963-
text.className = "hero-text";
964-
text.textContent = line;
965-
text.setAttribute("data-text", line);
962+
const stack = document.createElement("span");
963+
stack.className = "hero-stack";
966964

967-
row.append(text);
965+
const outline = document.createElement("span");
966+
outline.className = "hero-text hero-text--outline";
967+
outline.textContent = line;
968+
969+
const fill = document.createElement("span");
970+
fill.className = "hero-text hero-text--fill";
971+
fill.textContent = line;
972+
fill.setAttribute("aria-hidden", "true");
973+
974+
const glow = document.createElement("span");
975+
glow.className = "hero-text hero-text--glow";
976+
glow.textContent = line;
977+
glow.setAttribute("aria-hidden", "true");
978+
979+
stack.append(outline, fill, glow);
980+
row.append(stack);
968981
title.appendChild(row);
969982
});
970983
};

‎docs/index.html‎

Lines changed: 5 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=20260408b">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260408c">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -27,6 +27,9 @@
2727
<meta property="og:url" content="https://modelized.github.io/">
2828

2929
<script>document.documentElement.classList.add('js');</script>
30+
<style>
31+
.js .hero-title.hero-title--pending { visibility: hidden; }
32+
</style>
3033
</head>
3134
<body class="page-home" data-base=".">
3235
<div class="nav-menu-blur" aria-hidden="true"></div>
@@ -133,6 +136,6 @@ <h2>Live Modules</h2>
133136

134137
<div id="footer-slot"></div>
135138

136-
<script src="assets/js/shell.js?v=20260408b" defer></script>
139+
<script src="assets/js/shell.js?v=20260408c" defer></script>
137140
</body>
138141
</html>

0 commit comments

Comments
 (0)