Skip to content

Commit 4da6669

Browse files
AshirBorahAshirBorah
committed
Refine hero styling and animation
1 parent a696eee commit 4da6669

3 files changed

Lines changed: 133 additions & 55 deletions

File tree

‎css/styles.css‎

Lines changed: 73 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -124,23 +124,34 @@ nav.visible {
124124
padding: 4px 0;
125125
}
126126

127-
.nav-links a::after {
127+
.nav-links a:hover {
128+
color: var(--black);
129+
}
130+
131+
/* Shared link underline treatment */
132+
.link-underline {
133+
position: relative;
134+
display: inline-block;
135+
padding-bottom: 2px;
136+
}
137+
138+
.link-underline::after {
128139
content: '';
129140
position: absolute;
130-
bottom: 0;
131141
left: 0;
132-
width: 0;
142+
bottom: 0;
143+
width: 100%;
133144
height: 1px;
134-
background: var(--black);
135-
transition: width 0.3s var(--ease-out-expo);
145+
background: currentColor;
146+
transform: scaleX(0);
147+
transform-origin: left;
148+
opacity: 0.5;
149+
transition: transform 0.3s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo);
136150
}
137151

138-
.nav-links a:hover {
139-
color: var(--black);
140-
}
141-
142-
.nav-links a:hover::after {
143-
width: 100%;
152+
.link-underline:hover::after {
153+
transform: scaleX(1);
154+
opacity: 1;
144155
}
145156

146157
/* Hero Section - Clean, minimal */
@@ -152,7 +163,10 @@ nav.visible {
152163
align-items: center;
153164
position: relative;
154165
overflow: hidden;
155-
background: var(--white);
166+
background:
167+
radial-gradient(1200px 600px at 15% -10%, rgba(22, 163, 74, 0.08), transparent 60%),
168+
radial-gradient(900px 500px at 90% 5%, rgba(16, 185, 129, 0.07), transparent 55%),
169+
var(--white);
156170
}
157171

158172
.hero-bg {
@@ -161,6 +175,31 @@ nav.visible {
161175
overflow: hidden;
162176
}
163177

178+
.hero-bg::before {
179+
content: '';
180+
position: absolute;
181+
inset: -20%;
182+
background: radial-gradient(600px 400px at 50% 20%, rgba(15, 118, 110, 0.08), transparent 60%);
183+
opacity: 0.7;
184+
pointer-events: none;
185+
}
186+
187+
.hero-bg::after {
188+
content: '';
189+
position: absolute;
190+
inset: 0;
191+
background-image: radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.04) 1px, transparent 0);
192+
background-size: 3px 3px;
193+
opacity: 0.12;
194+
pointer-events: none;
195+
}
196+
197+
.hero-bg canvas {
198+
position: relative;
199+
z-index: 1;
200+
display: block;
201+
}
202+
164203
.hero-bg svg {
165204
width: 100%;
166205
height: 100%;
@@ -192,9 +231,10 @@ nav.visible {
192231

193232
.hero-sub {
194233
font-family: var(--font-mono);
195-
font-size: clamp(0.9rem, 2vw, 1.1rem);
234+
font-size: clamp(1rem, 2.2vw, 1.25rem);
235+
font-weight: 500;
196236
color: var(--gray-500);
197-
letter-spacing: 0.15em;
237+
letter-spacing: 0.08em;
198238
text-transform: uppercase;
199239
margin-bottom: 48px;
200240
}
@@ -213,13 +253,11 @@ nav.visible {
213253
letter-spacing: 0.1em;
214254
text-transform: uppercase;
215255
padding: 12px 0;
216-
border-bottom: 1px solid transparent;
217-
transition: all 0.3s;
256+
transition: color 0.3s var(--ease-out-expo);
218257
}
219258

220259
.hero-affiliations a:hover {
221260
color: var(--black);
222-
border-color: var(--accent-green);
223261
}
224262

225263
.scroll-hint {
@@ -336,7 +374,7 @@ section {
336374
display: grid;
337375
grid-template-columns: 240px 1fr;
338376
gap: calc(var(--space-unit) * 6);
339-
padding: calc(var(--space-unit) * 5);
377+
padding: calc(var(--space-unit) * 6);
340378
background: var(--white);
341379
border: 1px solid var(--gray-200);
342380
border-radius: 8px;
@@ -347,7 +385,8 @@ section {
347385
width: 240px;
348386
height: 300px;
349387
object-fit: cover;
350-
border-radius: 4px;
388+
border-radius: 12px;
389+
border: 1px solid var(--gray-200);
351390
filter: grayscale(20%);
352391
transition: filter 0.4s ease;
353392
}
@@ -423,14 +462,15 @@ section {
423462
}
424463

425464
.member-photo {
426-
width: 100px;
427-
height: 100px;
428-
border-radius: 50%;
465+
width: 120px;
466+
height: 150px;
467+
aspect-ratio: 4 / 5;
468+
border-radius: 12px;
429469
object-fit: cover;
430470
margin: 0 auto calc(var(--space-unit) * 1.5);
431471
filter: grayscale(30%);
432472
transition: all 0.3s ease;
433-
border: 2px solid var(--gray-200);
473+
border: 1px solid var(--gray-200);
434474
}
435475

436476
.member:hover .member-photo {
@@ -442,7 +482,7 @@ section {
442482
.member-name {
443483
font-size: 0.9rem;
444484
font-weight: 500;
445-
margin-bottom: 2px;
485+
margin-bottom: 4px;
446486
}
447487

448488
.member-role {
@@ -466,14 +506,11 @@ section {
466506
font-family: var(--font-mono);
467507
font-size: 0.8rem;
468508
color: var(--gray-500);
469-
padding-bottom: 2px;
470-
border-bottom: 1px solid var(--gray-300);
471509
transition: all 0.2s ease;
472510
}
473511

474512
.pub-header a:hover {
475513
color: var(--black);
476-
border-color: var(--black);
477514
}
478515

479516
.pub-list {
@@ -724,7 +761,7 @@ section {
724761
#contact {
725762
background: var(--white);
726763
text-align: center;
727-
padding: calc(var(--space-unit) * 16) calc(var(--space-unit) * 4);
764+
padding: calc(var(--space-unit) * 12) calc(var(--space-unit) * 4);
728765
}
729766

730767
#contact h2 {
@@ -737,7 +774,7 @@ section {
737774
#contact > .section-inner > p {
738775
font-size: 1.1rem;
739776
color: var(--gray-600);
740-
margin-bottom: calc(var(--space-unit) * 5);
777+
margin-bottom: calc(var(--space-unit) * 6);
741778
max-width: 500px;
742779
margin-left: auto;
743780
margin-right: auto;
@@ -844,6 +881,10 @@ footer {
844881
padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 3);
845882
}
846883

884+
#contact {
885+
padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 3);
886+
}
887+
847888
.nav-inner {
848889
padding: 0 calc(var(--space-unit) * 3);
849890
}
@@ -863,7 +904,7 @@ footer {
863904

864905
.pi-photo {
865906
width: 180px;
866-
height: 220px;
907+
height: 225px;
867908
margin: 0 auto;
868909
}
869910

@@ -905,8 +946,8 @@ footer {
905946
}
906947

907948
.member-photo {
908-
width: 70px;
909-
height: 70px;
949+
width: 84px;
950+
height: 105px;
910951
}
911952

912953
.member-name {

‎index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@
2424
<div class="nav-inner">
2525
<a href="#" class="logo">Gilbert Lab</a>
2626
<ul class="nav-links">
27-
<li><a href="#research">Research</a></li>
28-
<li><a href="#team">Team</a></li>
29-
<li><a href="#publications">Publications</a></li>
30-
<li><a href="#events">Events</a></li>
31-
<li><a href="#protocols">Protocols</a></li>
32-
<li><a href="#alumni">Alumni</a></li>
33-
<li><a href="#contact">Contact</a></li>
27+
<li><a href="#research" class="link-underline">Research</a></li>
28+
<li><a href="#team" class="link-underline">Team</a></li>
29+
<li><a href="#publications" class="link-underline">Publications</a></li>
30+
<li><a href="#events" class="link-underline">Events</a></li>
31+
<li><a href="#protocols" class="link-underline">Protocols</a></li>
32+
<li><a href="#alumni" class="link-underline">Alumni</a></li>
33+
<li><a href="#contact" class="link-underline">Contact</a></li>
3434
</ul>
3535
</div>
3636
</nav>
@@ -42,9 +42,9 @@
4242
<h1><span>Gilbert Lab</span></h1>
4343
<p class="hero-sub">Engineering the Epigenome</p>
4444
<div class="hero-affiliations">
45-
<a href="https://arcinstitute.org" target="_blank">Arc Institute</a>
46-
<a href="https://www.ucsf.edu" target="_blank">UCSF</a>
47-
<a href="https://cancer.ucsf.edu" target="_blank">Helen Diller Cancer Center</a>
45+
<a href="https://arcinstitute.org" target="_blank" class="link-underline">Arc Institute</a>
46+
<a href="https://www.ucsf.edu" target="_blank" class="link-underline">UCSF</a>
47+
<a href="https://cancer.ucsf.edu" target="_blank" class="link-underline">Helen Diller Cancer Center</a>
4848
</div>
4949
</div>
5050
<div class="scroll-hint">Scroll</div>
@@ -207,7 +207,7 @@ <h4>Staff</h4>
207207
<p class="section-label">Publications</p>
208208
<h2>Selected Work</h2>
209209
</div>
210-
<a href="https://www.ncbi.nlm.nih.gov/pubmed/?term=gilbert+la" target="_blank">View all publications →</a>
210+
<a href="https://www.ncbi.nlm.nih.gov/pubmed/?term=gilbert+la" target="_blank" class="link-underline">View all publications →</a>
211211
</div>
212212

213213
<div class="pub-list" id="publications-list">
@@ -494,12 +494,12 @@ <h2>We're Recruiting</h2>
494494
</div>
495495
<div>
496496
<strong>Email</strong><br>
497-
<a href="mailto:luke@arcinstitute.org">luke [at] arcinstitute.org</a>
497+
<a href="mailto:luke@arcinstitute.org" class="link-underline">luke [at] arcinstitute.org</a>
498498
</div>
499499
<div>
500500
<strong>Affiliations</strong><br>
501-
<a href="https://arcinstitute.org" target="_blank">Arc Institute</a><br>
502-
<a href="https://www.ucsf.edu" target="_blank">UCSF</a>
501+
<a href="https://arcinstitute.org" target="_blank" class="link-underline">Arc Institute</a><br>
502+
<a href="https://www.ucsf.edu" target="_blank" class="link-underline">UCSF</a>
503503
</div>
504504
</div>
505505
</div>
@@ -509,9 +509,9 @@ <h2>We're Recruiting</h2>
509509
<footer>
510510
<div class="footer-info">Gilbert Lab · UCSF & Arc Institute · San Francisco</div>
511511
<div class="footer-links">
512-
<a href="https://twitter.com/GilbertLabUCSF" target="_blank">Twitter</a>
513-
<a href="https://github.com/GilbertLabUCSF" target="_blank">GitHub</a>
514-
<a href="https://scholar.google.com/citations?user=wlqxB00AAAAJ" target="_blank">Scholar</a>
512+
<a href="https://twitter.com/GilbertLabUCSF" target="_blank" class="link-underline">Twitter</a>
513+
<a href="https://github.com/GilbertLabUCSF" target="_blank" class="link-underline">GitHub</a>
514+
<a href="https://scholar.google.com/citations?user=wlqxB00AAAAJ" target="_blank" class="link-underline">Scholar</a>
515515
</div>
516516
</footer>
517517

‎js/main.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,15 @@ function initDNABackground() {
1717
container.appendChild(canvas);
1818

1919
// Sizing
20+
const maxDpr = 2;
21+
const getDpr = () => Math.min(window.devicePixelRatio || 1, maxDpr);
2022
function resize() {
21-
canvas.width = container.offsetWidth * window.devicePixelRatio;
22-
canvas.height = container.offsetHeight * window.devicePixelRatio;
23+
const dpr = getDpr();
24+
canvas.width = Math.round(container.offsetWidth * dpr);
25+
canvas.height = Math.round(container.offsetHeight * dpr);
2326
canvas.style.width = '100%';
2427
canvas.style.height = '100%';
25-
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
28+
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
2629
}
2730
resize();
2831
window.addEventListener('resize', resize);
@@ -123,6 +126,24 @@ function initDNABackground() {
123126
let mutations = [];
124127

125128
// Animation
129+
let rafId = null;
130+
let isRunning = false;
131+
let isVisible = true;
132+
const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
133+
134+
function start() {
135+
if (isRunning || prefersReducedMotion || !isVisible) return;
136+
isRunning = true;
137+
rafId = requestAnimationFrame(animate);
138+
}
139+
140+
function stop() {
141+
if (!isRunning) return;
142+
isRunning = false;
143+
if (rafId) cancelAnimationFrame(rafId);
144+
rafId = null;
145+
}
146+
126147
function animate(now) {
127148
const w = width();
128149
const h = height();
@@ -325,11 +346,27 @@ function initDNABackground() {
325346
}
326347
}
327348

328-
requestAnimationFrame(animate);
349+
rafId = requestAnimationFrame(animate);
329350
}
330351

331-
if (!window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches) {
332-
requestAnimationFrame(animate);
352+
if ('IntersectionObserver' in window) {
353+
const observer = new IntersectionObserver((entries) => {
354+
entries.forEach((entry) => {
355+
isVisible = entry.isIntersecting;
356+
if (isVisible) start();
357+
else stop();
358+
});
359+
}, { threshold: 0.1 });
360+
observer.observe(container);
361+
}
362+
363+
document.addEventListener('visibilitychange', () => {
364+
if (document.hidden) stop();
365+
else start();
366+
});
367+
368+
if (!prefersReducedMotion) {
369+
start();
333370
}
334371
}
335372

0 commit comments

Comments
 (0)