Skip to content

Commit d353aad

Browse files
ritamtbsilvaritamtbsilva
committed
alumni section better
1 parent db3274a commit d353aad

3 files changed

Lines changed: 434 additions & 323 deletions

File tree

‎css/styles.css‎

Lines changed: 115 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
159159
align-items: center;
160160
text-decoration: none;
161161
height: 42px;
162+
flex-shrink: 0;
162163
}
163164

164165
.nav-logo img {
@@ -1334,69 +1335,121 @@ footer {
13341335
}
13351336
.alumni-slide-dot.active { background: #fff; transform: scale(1.3); }
13361337

1337-
/* ── Fixed 6-column card grid ───────────────────────────────────── */
1338-
.alumni-card-grid {
1339-
display: grid;
1340-
grid-template-columns: repeat(7, 1fr);
1338+
/* ── Year timeline ───────────────────────────────────────────────── */
1339+
.alumni-timeline {
1340+
display: flex;
1341+
flex-direction: column;
13411342
gap: 0;
1342-
border: 1px solid #e2e8f0;
1343-
border-radius: 8px;
1344-
overflow: hidden;
1343+
margin-top: .5rem;
1344+
}
1345+
1346+
.alumni-year-group {
1347+
display: grid;
1348+
grid-template-columns: 3.5rem 1fr 200px;
1349+
gap: 0 .5rem;
1350+
padding-bottom: 1.6rem;
1351+
align-items: start;
13451352
}
13461353

1347-
.alumni-card {
1354+
.alumni-year-label {
1355+
font-size: .78rem;
1356+
font-weight: 800;
1357+
color: var(--teal);
1358+
letter-spacing: .03em;
1359+
padding-top: .2rem;
1360+
text-align: right;
1361+
flex-shrink: 0;
1362+
}
1363+
1364+
.alumni-year-people {
1365+
list-style: none;
1366+
margin: 0; padding: 0;
1367+
border-left: 2px solid var(--border);
1368+
padding-left: 1.25rem;
13481369
display: flex;
13491370
flex-direction: column;
1371+
gap: .5rem;
1372+
}
1373+
1374+
.alumni-year-group:last-child .alumni-year-people {
1375+
border-left-color: transparent;
1376+
}
1377+
1378+
.alumni-entry {
1379+
display: flex;
13501380
align-items: center;
1351-
text-align: center;
1352-
padding: .08rem .08rem .2rem;
1353-
border-radius: 0;
1354-
background: var(--white);
1355-
border-right: 1px solid #e2e8f0;
1356-
border-bottom: 1px solid #e2e8f0;
1381+
flex-wrap: wrap;
1382+
gap: .3rem .45rem;
1383+
position: relative;
13571384
cursor: default;
1358-
transition: background .15s;
1359-
overflow: hidden;
1385+
transition: opacity .2s ease;
13601386
}
1361-
.alumni-card:hover { background: var(--fog); }
13621387

1363-
.alumni-card-photo {
1364-
width: 85%;
1365-
aspect-ratio: 1;
1366-
object-fit: cover;
1367-
display: block;
1368-
margin-bottom: .4rem;
1369-
border-radius: 4px;
1370-
flex-shrink: 0;
1388+
/* Dot on the timeline line */
1389+
.alumni-entry:first-child::before {
1390+
content: '';
1391+
position: absolute;
1392+
left: -1.6rem;
1393+
top: .45rem;
1394+
width: 7px; height: 7px;
1395+
border-radius: 50%;
1396+
background: var(--white);
1397+
border: 2px solid var(--teal);
13711398
}
13721399

1373-
.alumni-card .alumni-role-badge { margin-bottom: .35rem; }
1400+
/* Dim inactive entries when a sibling is hovered */
1401+
.alumni-year-group.is-hovering .alumni-entry { opacity: .35; }
1402+
.alumni-year-group.is-hovering .alumni-entry.is-active { opacity: 1; }
13741403

1375-
.alumni-card-name {
1376-
font-size: .75rem;
1404+
.alumni-entry-name {
1405+
font-size: .88rem;
13771406
font-weight: 600;
13781407
color: var(--navy);
1379-
line-height: 1.25;
13801408
}
1381-
.alumni-card-years {
1382-
font-size: .68rem;
1409+
1410+
.alumni-entry-years {
1411+
font-size: .78rem;
13831412
color: var(--slate);
1384-
margin-top: .15rem;
1413+
font-weight: 400;
13851414
}
1415+
.alumni-entry-years::before { content: '· '; }
13861416

1387-
.alumni-card-at {
1388-
font-size: .67rem;
1389-
color: var(--teal);
1390-
font-weight: 500;
1391-
line-height: 1.3;
1392-
margin-top: .2rem;
1393-
max-height: 0;
1394-
overflow: hidden;
1395-
opacity: 0;
1396-
transition: max-height .22s ease, opacity .22s ease;
1417+
.alumni-entry-at {
1418+
font-size: .82rem;
1419+
color: var(--slate);
1420+
}
1421+
.alumni-entry-at::before { content: '→ '; color: var(--teal); }
1422+
1423+
/* Photo cluster */
1424+
.alumni-year-photos {
1425+
display: flex;
1426+
flex-wrap: wrap;
1427+
gap: .35rem;
1428+
align-content: flex-start;
1429+
padding-top: .1rem;
1430+
}
1431+
1432+
.alumni-year-photo {
1433+
width: 62px;
1434+
height: 62px;
1435+
border-radius: 50%;
1436+
object-fit: cover;
1437+
border: 2px solid var(--border);
1438+
transition: opacity .2s ease, filter .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
1439+
}
1440+
1441+
/* Dim all photos when hovering, highlight active */
1442+
.alumni-year-group.is-hovering .alumni-year-photo {
1443+
opacity: .2;
1444+
filter: blur(1.5px);
1445+
}
1446+
.alumni-year-group.is-hovering .alumni-year-photo.is-active {
1447+
opacity: 1;
1448+
filter: none;
1449+
transform: scale(1.12);
1450+
border-color: var(--teal);
1451+
box-shadow: 0 0 0 3px rgba(13,148,136,.2);
13971452
}
1398-
.alumni-card-at::before { content: 'now at: '; color: var(--slate); font-weight: 400; }
1399-
.alumni-card:hover .alumni-card-at { max-height: 2.5rem; opacity: 1; }
14001453

14011454
/* ── Role badges ────────────────────────────────────────────────── */
14021455
.alumni-role-badge {
@@ -1419,15 +1472,19 @@ footer {
14191472
.badge-msc { background: #fef3c7; color: #92400e; }
14201473
.badge-trainee { background: #fce7f3; color: #9d174d; }
14211474

1422-
@media (max-width: 860px) {
1423-
.alumni-card-grid { grid-template-columns: repeat(5, 1fr); }
1424-
}
1425-
@media (max-width: 640px) {
1426-
.alumni-card-grid { grid-template-columns: repeat(4, 1fr); }
1427-
.alumni-card-photo { width: 60px; height: 60px; }
1428-
}
1429-
@media (max-width: 400px) {
1430-
.alumni-card-grid { grid-template-columns: repeat(3, 1fr); }
1475+
@media (max-width: 700px) {
1476+
.alumni-year-group {
1477+
grid-template-columns: 2.75rem 1fr;
1478+
grid-template-rows: auto auto;
1479+
}
1480+
.alumni-year-photos {
1481+
display: flex;
1482+
grid-column: 2;
1483+
grid-row: 2;
1484+
padding-top: .6rem;
1485+
padding-bottom: .4rem;
1486+
}
1487+
.alumni-entry-name { font-size: .82rem; }
14311488
}
14321489

14331490
/* ----------------------------------------------------------------
@@ -1604,11 +1661,14 @@ footer {
16041661
.footer-inner { grid-template-columns: 1fr 1fr; }
16051662
}
16061663

1664+
@media (max-width: 1024px) {
1665+
.nav-links { display: none; }
1666+
.nav-toggle { display: flex; }
1667+
}
1668+
16071669
@media (max-width: 640px) {
16081670
section { padding: 4rem 0; }
16091671
.mission-pillars { grid-template-columns: 1fr; }
1610-
.nav-links { display: none; }
1611-
.nav-toggle { display: flex; }
16121672
.pub-item { grid-template-columns: 44px 1fr; gap: 0 1rem; }
16131673
.footer-inner { grid-template-columns: 1fr; }
16141674
.footer-bottom { flex-direction: column; text-align: center; }

‎js/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -766,6 +766,28 @@ function checkProtocol() {
766766
return true;
767767
}
768768

769+
/* ── Alumni timeline hover interaction ──────────────────────────── */
770+
function initAlumniTimeline() {
771+
document.querySelectorAll('.alumni-year-group').forEach(group => {
772+
const entries = [...group.querySelectorAll('.alumni-entry')];
773+
const photos = [...group.querySelectorAll('.alumni-year-photo')];
774+
if (!entries.length || !photos.length) return;
775+
776+
entries.forEach((entry, i) => {
777+
entry.addEventListener('mouseenter', () => {
778+
group.classList.add('is-hovering');
779+
entries.forEach((e, j) => e.classList.toggle('is-active', j === i));
780+
photos.forEach((p, j) => p.classList.toggle('is-active', j === i));
781+
});
782+
entry.addEventListener('mouseleave', () => {
783+
group.classList.remove('is-hovering');
784+
entries.forEach(e => e.classList.remove('is-active'));
785+
photos.forEach(p => p.classList.remove('is-active'));
786+
});
787+
});
788+
});
789+
}
790+
769791
/* ── Bootstrap ──────────────────────────────────────────────────── */
770792
document.addEventListener('DOMContentLoaded', async () => {
771793
updateYear();
@@ -783,6 +805,7 @@ document.addEventListener('DOMContentLoaded', async () => {
783805
loadBlueskyFeed(); // #bsky-feed-grid is now available in the DOM
784806
loadBiomicsVideos(); // #biomics-video-grid — auto-fetched from YouTube RSS
785807
initAlumniSlideshow(); // #alumni-slideshow — group photo crossfade carousel
808+
initAlumniTimeline(); // hover highlight: dim other photos + names
786809

787810
/* Scroll to URL hash after sections load — sections are injected
788811
asynchronously, so the browser's native hash scroll fires before

0 commit comments

Comments
 (0)