patx/afterdarklabs
improve performance, replace portfolio card text sizing js with css
Commit 0a21862 · patx · 2026-09-07T15:27:06-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index c711007..07d766d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -669,13 +669,22 @@
width: 100%;
margin: 0;
color: #fff;
- font-size: clamp(1.2rem, 3vw, 3.5rem);
+ font-size: var(--portfolio-copy-size, clamp(1.2rem, 3vw, 3.5rem));
font-weight: 500;
line-height: 0.98;
letter-spacing: -0.04em;
text-wrap: balance;
}
+ #work-scroller > article:nth-child(1) { --portfolio-copy-size: clamp(12px, calc(8.165vw - 5.73px), 88px); }
+ #work-scroller > article:nth-child(2) { --portfolio-copy-size: clamp(12px, calc(7.715vw - 6.08px), 88px); }
+ #work-scroller > article:nth-child(3) { --portfolio-copy-size: clamp(12px, calc(6.816vw - 4.68px), 88px); }
+ #work-scroller > article:nth-child(4) { --portfolio-copy-size: clamp(12px, calc(7.715vw - 6.08px), 88px); }
+ #work-scroller > article:nth-child(5) { --portfolio-copy-size: clamp(12px, calc(8.015vw - 5.58px), 88px); }
+ #work-scroller > article:nth-child(6) { --portfolio-copy-size: clamp(12px, calc(6.779vw - 5.50px), 88px); }
+ #work-scroller > article:nth-child(7) { --portfolio-copy-size: clamp(12px, calc(6.816vw - 4.68px), 88px); }
+ #work-scroller > article:nth-child(8) { --portfolio-copy-size: clamp(12px, calc(6.779vw - 5.50px), 88px); }
+
.portfolio-description {
display: block;
color: #fff;
@@ -751,6 +760,14 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
}
+ #work-scroller > article:nth-child(1) { --portfolio-copy-size: clamp(12px, calc(3.576vw - 0.87px), 88px); }
+ #work-scroller > article:nth-child(2) { --portfolio-copy-size: clamp(12px, calc(3.238vw - 0.77px), 88px); }
+ #work-scroller > article:nth-child(3) { --portfolio-copy-size: clamp(12px, calc(2.995vw - 0.70px), 88px); }
+ #work-scroller > article:nth-child(4) { --portfolio-copy-size: clamp(12px, calc(3.229vw - 0.80px), 88px); }
+ #work-scroller > article:nth-child(5) { --portfolio-copy-size: clamp(12px, calc(3.507vw - 0.73px), 88px); }
+ #work-scroller > article:nth-child(6) { --portfolio-copy-size: clamp(12px, calc(2.769vw - 0.57px), 88px); }
+ #work-scroller > article:nth-child(7) { --portfolio-copy-size: clamp(12px, calc(3.003vw - 0.76px), 88px); }
+ #work-scroller > article:nth-child(8) { --portfolio-copy-size: clamp(12px, calc(2.856vw - 0.63px), 88px); }
}
@media (min-width: 768px) and (hover: hover) {
@@ -1214,7 +1231,9 @@
window.addEventListener('scroll', scheduleHeroLetterUpdate, { passive: true });
window.addEventListener('resize', scheduleHeroLetterMeasure);
window.visualViewport?.addEventListener('resize', scheduleHeroLetterMeasure);
- window.addEventListener('pageshow', scheduleHeroLetterMeasure);
+ window.addEventListener('pageshow', event => {
+ if (event.persisted) scheduleHeroLetterMeasure();
+ });
reduceMotion.addEventListener('change', scheduleHeroLetterMeasure);
document.fonts?.ready.then(scheduleHeroLetterMeasure);
document.documentElement.classList.add('nav-brand-ready');
@@ -1311,7 +1330,9 @@
window.addEventListener('scroll', scheduleWorkIntroUpdate, { passive: true });
window.addEventListener('resize', scheduleWorkIntroMeasure);
- window.addEventListener('pageshow', scheduleWorkIntroMeasure);
+ window.addEventListener('pageshow', event => {
+ if (event.persisted) scheduleWorkIntroMeasure();
+ });
reduceMotion.addEventListener('change', scheduleWorkIntroMeasure);
document.fonts?.ready.then(scheduleWorkIntroMeasure);
measureWorkIntro();
@@ -1348,35 +1369,6 @@
return top;
}
- function fitDescriptions() {
- cards.forEach(card => {
- const panel = card.querySelector(':scope > .portfolio-details');
- const copy = panel?.querySelector('p');
- if (!panel || !copy) return;
-
- const panelStyle = window.getComputedStyle(panel);
- const horizontalPadding = parseFloat(panelStyle.paddingLeft) + parseFloat(panelStyle.paddingRight);
- const verticalPadding = parseFloat(panelStyle.paddingTop) + parseFloat(panelStyle.paddingBottom);
- const availableWidth = Math.max(1, panel.clientWidth - horizontalPadding);
- const availableHeight = Math.max(1, panel.clientHeight - verticalPadding);
- let minimum = 12;
- let maximum = Math.min(88, Math.max(34, card.clientWidth / 7.2));
-
- for (let iteration = 0; iteration < 10; iteration += 1) {
- const size = (minimum + maximum) / 2;
- copy.style.fontSize = `${size}px`;
-
- if (copy.scrollHeight <= availableHeight + 1 && copy.scrollWidth <= availableWidth + 1) {
- minimum = size;
- } else {
- maximum = size;
- }
- }
-
- copy.style.fontSize = `${Math.floor(minimum * 10) / 10}px`;
- });
- }
-
function updateCards() {
updateFrame = 0;
if (reduceMotion.matches) {
@@ -1441,7 +1433,6 @@
cardTops = cards.map(getDocumentTop);
cardStates = cards.map(() => -1);
lastScrollY = -1;
- fitDescriptions();
updateCards();
}
@@ -1486,9 +1477,10 @@
window.addEventListener('scroll', scheduleCardUpdate, { passive: true });
window.addEventListener('resize', scheduleCardMeasure);
window.visualViewport?.addEventListener('resize', scheduleCardMeasure);
- window.addEventListener('pageshow', scheduleCardRemeasure);
+ window.addEventListener('pageshow', event => {
+ if (event.persisted) scheduleCardRemeasure();
+ });
reduceMotion.addEventListener('change', scheduleCardRemeasure);
- document.fonts?.ready.then(scheduleCardRemeasure);
measureCards();
})();
@@ -1559,7 +1551,9 @@
window.addEventListener('scroll', scheduleClosingIntroUpdate, { passive: true });
window.addEventListener('resize', scheduleClosingIntroMeasure);
window.visualViewport?.addEventListener('resize', scheduleClosingIntroMeasure);
- window.addEventListener('pageshow', scheduleClosingIntroMeasure);
+ window.addEventListener('pageshow', event => {
+ if (event.persisted) scheduleClosingIntroMeasure();
+ });
reduceMotion.addEventListener('change', scheduleClosingIntroMeasure);
document.fonts?.ready.then(scheduleClosingIntroMeasure);
measureClosingIntro();