Skip to content

Commit 66fd057

Browse files
AshirBorahAshirBorah
committed
Add mobile nav, social meta tags, and update research areas
- Add hamburger menu for mobile navigation - Add Open Graph and Twitter Card meta tags - Replace Virology/Gene Therapy with COMET/Effector Discovery - Fix typo: Nepture Bio → Neptune Bio - Remove unused Marked.js dependency
1 parent 2c8eb5f commit 66fd057

3 files changed

Lines changed: 139 additions & 14 deletions

File tree

‎css/styles.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,42 @@ nav.visible {
128128
color: var(--black);
129129
}
130130

131+
/* Mobile Navigation Toggle */
132+
.nav-toggle {
133+
display: none;
134+
flex-direction: column;
135+
justify-content: center;
136+
gap: 5px;
137+
width: 32px;
138+
height: 32px;
139+
padding: 4px;
140+
background: transparent;
141+
border: none;
142+
cursor: pointer;
143+
z-index: 101;
144+
}
145+
146+
.nav-toggle span {
147+
display: block;
148+
width: 100%;
149+
height: 2px;
150+
background: var(--gray-700);
151+
border-radius: 1px;
152+
transition: all 0.3s var(--ease-out-expo);
153+
}
154+
155+
.nav-toggle.active span:nth-child(1) {
156+
transform: rotate(45deg) translate(5px, 5px);
157+
}
158+
159+
.nav-toggle.active span:nth-child(2) {
160+
opacity: 0;
161+
}
162+
163+
.nav-toggle.active span:nth-child(3) {
164+
transform: rotate(-45deg) translate(5px, -5px);
165+
}
166+
131167
/* Shared link underline treatment */
132168
.link-underline {
133169
position: relative;
@@ -1001,6 +1037,44 @@ footer {
10011037
font-size: 16px;
10021038
}
10031039

1040+
.nav-toggle {
1041+
display: flex;
1042+
}
1043+
1044+
.nav-links {
1045+
position: fixed;
1046+
top: 0;
1047+
right: 0;
1048+
bottom: 0;
1049+
width: 280px;
1050+
max-width: 80vw;
1051+
flex-direction: column;
1052+
align-items: flex-start;
1053+
gap: 0;
1054+
padding: 80px 32px 32px;
1055+
background: var(--white);
1056+
border-left: 1px solid var(--gray-200);
1057+
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
1058+
transform: translateX(100%);
1059+
transition: transform 0.3s var(--ease-out-expo);
1060+
z-index: 100;
1061+
}
1062+
1063+
.nav-links.open {
1064+
transform: translateX(0);
1065+
}
1066+
1067+
.nav-links li {
1068+
width: 100%;
1069+
}
1070+
1071+
.nav-links a {
1072+
display: block;
1073+
padding: 12px 0;
1074+
font-size: 1rem;
1075+
border-bottom: 1px solid var(--gray-100);
1076+
}
1077+
10041078
.hero h1 {
10051079
font-size: 2.5rem;
10061080
}

‎index.html‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,40 @@
77
<meta name="description" content="CRISPR epigenome engineering, functional genomics, and cancer biology research at UCSF and Arc Institute">
88
<link rel="icon" href="favicon.ico" type="image/x-icon">
99

10+
<!-- Open Graph -->
11+
<meta property="og:type" content="website">
12+
<meta property="og:title" content="Gilbert Lab | UCSF & Arc Institute">
13+
<meta property="og:description" content="CRISPR epigenome engineering, functional genomics, and cancer biology research at UCSF and Arc Institute">
14+
<meta property="og:url" content="https://gilbertlab.ucsf.edu">
15+
<meta property="og:image" content="https://gilbertlab.ucsf.edu/images/og-image.jpg">
16+
17+
<!-- Twitter Card -->
18+
<meta name="twitter:card" content="summary_large_image">
19+
<meta name="twitter:site" content="@GilbertLabUCSF">
20+
<meta name="twitter:title" content="Gilbert Lab | UCSF & Arc Institute">
21+
<meta name="twitter:description" content="CRISPR epigenome engineering, functional genomics, and cancer biology research">
22+
<meta name="twitter:image" content="https://gilbertlab.ucsf.edu/images/og-image.jpg">
23+
1024
<!-- Fonts - IBM Plex -->
1125
<link rel="preconnect" href="https://fonts.googleapis.com">
1226
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1327
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
1428

1529
<!-- Styles -->
1630
<link rel="stylesheet" href="css/styles.css">
17-
18-
<!-- Markdown Parser -->
19-
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
2031
</head>
2132
<body>
2233

2334
<!-- Navigation -->
2435
<nav id="nav">
2536
<div class="nav-inner">
2637
<a href="#" class="logo">Gilbert Lab</a>
27-
<ul class="nav-links">
38+
<button class="nav-toggle" id="navToggle" type="button" aria-label="Toggle navigation" aria-expanded="false">
39+
<span></span>
40+
<span></span>
41+
<span></span>
42+
</button>
43+
<ul class="nav-links" id="navLinks">
2844
<li><a href="#research" class="link-underline">Research</a></li>
2945
<li><a href="#team" class="link-underline">Team</a></li>
3046
<li><a href="#publications" class="link-underline">Publications</a></li>
@@ -123,16 +139,17 @@ <h3>Drug Resistance</h3>
123139
<div class="research-card-head">
124140
<div class="research-icon" aria-hidden="true">
125141
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
126-
<circle cx="24" cy="24" r="10"/>
127-
<path d="M24 10v-4"/>
128-
<path d="M24 42v-4"/>
129-
<path d="M10 24h-4"/>
130-
<path d="M42 24h-4"/>
142+
<rect x="8" y="14" width="10" height="20" rx="2"/>
143+
<rect x="19" y="10" width="10" height="28" rx="2"/>
144+
<rect x="30" y="18" width="10" height="12" rx="2"/>
145+
<path d="M13 8v4"/>
146+
<path d="M24 4v4"/>
147+
<path d="M35 12v4"/>
131148
</svg>
132149
</div>
133-
<h3>Virology / Gene Therapy</h3>
150+
<h3>COMET / Effector Discovery</h3>
134151
</div>
135-
<p>New and improved viral delivery methods to increase efficacy.</p>
152+
<p>High-throughput screening of combinatorial dCas9 effector fusions to discover transcriptional modulators and map domain interactions.</p>
136153
</div>
137154
<div class="research-card">
138155
<div class="research-card-head">
@@ -356,7 +373,7 @@ <h2>Celebrations & Milestones</h2>
356373
<div class="event-card-overlay">
357374
<div class="event-card-date">Jul 18, 2024</div>
358375
<div class="event-card-title">Lab Outing 2024</div>
359-
<div class="event-card-desc">Summer lab gathering</div>
376+
<div class="event-card-desc">Summer lab gathering</div>
360377
</div>
361378
</article>
362379
<article class="event-card event-slide">
@@ -454,14 +471,14 @@ <h2>Where Are They Now</h2>
454471
<div class="alumni-grid fade-in" id="alumni-grid">
455472
<div class="alumni-item">
456473
<div class="alumni-name">Aidan Winters</div>
457-
<div class="alumni-meta">Scientist II, Nepture Bio</div>
474+
<div class="alumni-meta">Scientist II, Neptune Bio</div>
458475
</div>
459476
<div class="alumni-item">
460477
<div class="alumni-name">Alex Ge</div>
461478
<div class="alumni-meta">2017-2019 · Medical Student, UCSF</div>
462479
</div>
463480
<div class="alumni-item">
464-
<div class="alumni-name">Amanda Mok</div>
481+
<div class="alumni-name">Amanda Chung</div>
465482
<div class="alumni-meta">2019-2023 · Editas Medicine</div>
466483
</div>
467484
<div class="alumni-item">

‎js/main.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,39 @@ function initNavigation() {
383383
});
384384
}
385385

386+
// ============================================
387+
// MOBILE MENU
388+
// ============================================
389+
function initMobileMenu() {
390+
const toggle = document.getElementById('navToggle');
391+
const navLinks = document.getElementById('navLinks');
392+
if (!toggle || !navLinks) return;
393+
394+
toggle.addEventListener('click', () => {
395+
const isOpen = navLinks.classList.toggle('open');
396+
toggle.classList.toggle('active', isOpen);
397+
toggle.setAttribute('aria-expanded', isOpen);
398+
});
399+
400+
// Close menu when clicking a link
401+
navLinks.querySelectorAll('a').forEach(link => {
402+
link.addEventListener('click', () => {
403+
navLinks.classList.remove('open');
404+
toggle.classList.remove('active');
405+
toggle.setAttribute('aria-expanded', 'false');
406+
});
407+
});
408+
409+
// Close menu when clicking outside
410+
document.addEventListener('click', (e) => {
411+
if (!nav.contains(e.target) && navLinks.classList.contains('open')) {
412+
navLinks.classList.remove('open');
413+
toggle.classList.remove('active');
414+
toggle.setAttribute('aria-expanded', 'false');
415+
}
416+
});
417+
}
418+
386419
// ============================================
387420
// SCROLL ANIMATIONS
388421
// ============================================
@@ -497,6 +530,7 @@ function initEventsCarousel() {
497530
document.addEventListener('DOMContentLoaded', () => {
498531
initDNABackground();
499532
initNavigation();
533+
initMobileMenu();
500534
initScrollAnimations();
501535
initSmoothScroll();
502536
initEventsCarousel();

0 commit comments

Comments
 (0)