Skip to content

Commit 2f2614c

Browse files
ritamtbsilvaritamtbsilva
committed
team section better
1 parent 8340c57 commit 2f2614c

5 files changed

Lines changed: 302 additions & 207 deletions

File tree

‎assets/photos/Rita.jpg‎

1.56 MB
Loading

‎css/styles.css‎

Lines changed: 84 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -432,21 +432,21 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
432432
margin-bottom: 2.5rem;
433433
display: grid;
434434
grid-template-columns: 320px 1fr;
435+
/* default align-items: stretch — photo column grows to match bio height */
435436
}
436437

437438
.pi-photo {
438439
background: linear-gradient(160deg, #e0eeec 0%, #b2d8d2 100%);
439-
display: flex;
440-
align-items: center;
441-
justify-content: center;
442440
overflow: hidden;
443-
min-height: 360px;
441+
min-height: 380px;
442+
/* stretches to match .pi-info height via grid align-items: stretch */
444443
}
445444
.pi-photo img {
446445
width: 100%;
447446
height: 100%;
448447
object-fit: cover;
449-
border-radius: 0;
448+
object-position: center top; /* keep face in frame on tall portraits */
449+
display: block;
450450
}
451451
.pi-photo-placeholder {
452452
width: 100px; height: 100px;
@@ -550,18 +550,17 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
550550

551551
.member-photo {
552552
width: 100%;
553-
aspect-ratio: 1/1;
553+
aspect-ratio: 5/4; /* consistent crop: slightly taller than 4/3 */
554554
background: linear-gradient(135deg, #e8f4f2 0%, #cce5e1 100%);
555-
display: flex;
556-
align-items: center;
557-
justify-content: center;
558555
overflow: hidden;
556+
flex-shrink: 0;
559557
}
560558
.member-photo img {
561559
width: 100%;
562560
height: 100%;
563561
object-fit: cover;
564-
border-radius: 0;
562+
object-position: center top; /* keep face in frame */
563+
display: block;
565564
}
566565
.member-photo-placeholder {
567566
width: 64px; height: 64px;
@@ -912,31 +911,77 @@ a.outreach-header--link:hover .outreach-status-pill {
912911
}
913912

914913
/* ----------------------------------------------------------------
915-
PUBLICATIONS
914+
PUBLICATIONS — timeline layout
916915
---------------------------------------------------------------- */
917916
#publications { background: var(--fog); }
918917

919-
.pub-list { list-style: none; display: flex; flex-direction: column; }
918+
/* Vertical track */
919+
.pub-timeline {
920+
position: relative;
921+
margin-top: 2.5rem;
922+
padding-left: 2.25rem;
923+
}
924+
.pub-timeline::before {
925+
content: '';
926+
position: absolute;
927+
left: 7px;
928+
top: 12px;
929+
bottom: 12px;
930+
width: 2px;
931+
background: linear-gradient(
932+
to bottom,
933+
var(--teal) 0%,
934+
rgba(13,148,136,.15) 100%
935+
);
936+
}
920937

921-
.pub-item {
922-
display: grid;
923-
grid-template-columns: 60px 1fr;
924-
gap: 0 1.5rem;
925-
padding: 1.5rem 0;
926-
border-bottom: 1px solid var(--border);
927-
align-items: start;
938+
/* Year group */
939+
.pub-year-group {
940+
margin-bottom: 2.75rem;
928941
}
929-
.pub-item:first-child { border-top: 1px solid var(--border); }
942+
.pub-year-group:last-child { margin-bottom: 0; }
930943

931-
.pub-year {
944+
/* Year label row with dot on the track */
945+
.pub-year-header {
946+
display: flex;
947+
align-items: center;
948+
gap: .85rem;
949+
margin-bottom: .9rem;
950+
position: relative;
951+
}
952+
.pub-year-dot {
953+
position: absolute;
954+
left: calc(-2.25rem + 1px); /* centres 14px dot on the 2px line at left:7px */
955+
width: 14px;
956+
height: 14px;
957+
border-radius: 50%;
958+
background: var(--teal);
959+
box-shadow: 0 0 0 3px rgba(13,148,136,.2), 0 0 0 6px rgba(13,148,136,.07);
960+
flex-shrink: 0;
961+
}
962+
.pub-year-label {
932963
font-family: var(--font-display);
933-
font-size: 1rem;
964+
font-size: 1.35rem;
934965
font-weight: 700;
935966
color: var(--teal);
936-
padding-top: .1rem;
967+
line-height: 1;
937968
}
938969

939-
.pub-content { display: flex; flex-direction: column; gap: .3rem; }
970+
/* Papers under each year */
971+
.pub-year-papers {
972+
display: flex;
973+
flex-direction: column;
974+
}
975+
.pub-paper {
976+
display: flex;
977+
flex-direction: column;
978+
gap: .3rem;
979+
padding: 1.1rem 0;
980+
border-bottom: 1px solid var(--border);
981+
}
982+
.pub-year-papers .pub-paper:first-child {
983+
border-top: 1px solid var(--border);
984+
}
940985

941986
.pub-title { font-size: .98rem; font-weight: 500; color: var(--navy); line-height: 1.45; }
942987
.pub-title a { color: var(--navy); }
@@ -945,7 +990,7 @@ a.outreach-header--link:hover .outreach-status-pill {
945990
.pub-authors { font-size: .82rem; color: var(--slate); font-style: italic; }
946991
.pub-journal { font-size: .82rem; color: #475569; font-weight: 500; }
947992

948-
.pub-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
993+
.pub-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
949994
.pub-tag {
950995
font-size: .7rem; font-weight: 500;
951996
background: #EFF6FF; color: #1D4ED8;
@@ -1167,6 +1212,19 @@ footer {
11671212
font-style: italic;
11681213
}
11691214

1215+
/* Fun fact line — appears on member cards and PI card */
1216+
.member-fun-fact {
1217+
font-size: .76rem;
1218+
color: #94a3b8; /* lighter than --slate, so it reads as a footnote */
1219+
line-height: 1.5;
1220+
margin-top: .2rem;
1221+
font-style: italic;
1222+
}
1223+
.member-fun-fact::before {
1224+
content: '💡 ';
1225+
font-style: normal;
1226+
}
1227+
11701228
/* ----------------------------------------------------------------
11711229
ALUMNI SECTION
11721230
---------------------------------------------------------------- */
@@ -1379,7 +1437,7 @@ footer {
13791437
---------------------------------------------------------------- */
13801438
@media (max-width: 900px) {
13811439
.pi-card { grid-template-columns: 1fr; }
1382-
.pi-photo { min-height: 280px; aspect-ratio: 16/9; }
1440+
.pi-photo { min-height: 280px; aspect-ratio: 16/9; position: static; }
13831441
.mission-pillars { grid-template-columns: 1fr 1fr; }
13841442
.footer-inner { grid-template-columns: 1fr 1fr; }
13851443
}

‎js/main.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,22 @@ function loadBlueskyFeed() {
164164
const grid = document.getElementById('bsky-feed-grid');
165165
if (!grid) return;
166166

167-
fetch(API_URL)
168-
.then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); })
167+
/* Safari-safe fetch: explicit CORS mode, no cache, 8-second timeout */
168+
const controller = new AbortController();
169+
const timeoutId = setTimeout(() => controller.abort(), 8000);
170+
171+
fetch(API_URL, {
172+
method: 'GET',
173+
mode: 'cors',
174+
cache: 'no-store',
175+
signal: controller.signal
176+
})
177+
.then(res => {
178+
clearTimeout(timeoutId);
179+
/* Opaque responses (Safari cross-origin quirk) carry no data */
180+
if (!res.ok || res.type === 'opaque') throw new Error(`HTTP ${res.status}`);
181+
return res.json();
182+
})
169183
.then(data => {
170184
const feed = (data.feed || []).filter(item => !item.reason); // skip reposts
171185
if (!feed.length) {
@@ -175,6 +189,7 @@ function loadBlueskyFeed() {
175189
grid.innerHTML = feed.slice(0, LIMIT).map(renderCard).join('');
176190
})
177191
.catch(() => {
192+
clearTimeout(timeoutId);
178193
grid.innerHTML =
179194
`<p class="bsky-error">Could not load posts. ` +
180195
`<a href="https://bsky.app/profile/${HANDLE}" target="_blank" rel="noopener">` +

0 commit comments

Comments
 (0)