huncholanestyle: company banners stand out
- Company name leads in bold, role follows smaller and muted - Orange-tinted opaque banner, orange edge lines, and a solid orange left bar - Orange dates and larger logos; tighter rows on phones - AeroVironment shortened to "AeroVironment, Inc." with "formerly Arcturus UAV" moved into the role line
huncholane1 file changed, +34 -18
+34-18src/pages/index.astro
| @@ -60,8 +60,8 @@ const orgs: Record<OrgId, Org> = { | ||
| 60 | 60 | }, |
| 61 | 61 | av: { |
| 62 | 62 | short: 'AeroVironment', |
| 63 | - title: 'Software developer', | |
| 64 | - org: 'AeroVironment, Inc. (formerly Arcturus UAV)', | |
| 63 | + title: 'Software developer (formerly Arcturus UAV)', | |
| 64 | + org: 'AeroVironment, Inc.', | |
| 65 | 65 | logo: '/logos/aerovironment.png', |
| 66 | 66 | dates: 'May 2021 to Dec 2021', |
| 67 | 67 | places: ['grassvalley', 'petaluma'], |
| @@ -707,7 +707,8 @@ const pad = (n: number) => String(n).padStart(2, '0'); | ||
| 707 | 707 | > |
| 708 | 708 | <span class="era-dates">{o.dates}</span> |
| 709 | 709 | <span class="era-title"> |
| 710 | - <span class="text-ink">{o.title}</span> <span class="text-muted">{o.org}</span> | |
| 710 | + <span class="era-org">{o.org}</span> | |
| 711 | + <span class="era-role">{o.title}</span> | |
| 711 | 712 | </span> |
| 712 | 713 | <img class="era-logo" src={o.logo} alt="" loading="lazy" decoding="async" /> |
| 713 | 714 | </div> |
| @@ -1368,8 +1369,9 @@ const pad = (n: number) => String(n).padStart(2, '0'); | ||
| 1368 | 1369 | top: 2.5rem; |
| 1369 | 1370 | z-index: 20; |
| 1370 | 1371 | margin-inline: -1.25rem; |
| 1371 | - border-block: 1px solid var(--color-rule); | |
| 1372 | - background: var(--color-panel); | |
| 1372 | + border-block: 1px solid rgb(255 130 0 / 0.35); | |
| 1373 | + /* Opaque so work scrolls cleanly underneath; faint orange tint. */ | |
| 1374 | + background: color-mix(in srgb, var(--color-vol) 8%, var(--color-panel)); | |
| 1373 | 1375 | } |
| 1374 | 1376 | .era-head.is-first { |
| 1375 | 1377 | margin-top: -1.5rem; |
| @@ -1382,32 +1384,43 @@ const pad = (n: number) => String(n).padStart(2, '0'); | ||
| 1382 | 1384 | display: grid; |
| 1383 | 1385 | grid-template-columns: minmax(0, 1fr) auto; |
| 1384 | 1386 | align-items: center; |
| 1385 | - gap: 0.25rem 1rem; | |
| 1386 | - padding: 0.6rem 1.25rem; | |
| 1387 | + gap: 0.1rem 1rem; | |
| 1388 | + padding: 0.5rem 1.25rem; | |
| 1389 | + box-shadow: inset 3px 0 0 var(--color-vol); | |
| 1387 | 1390 | } |
| 1388 | 1391 | .era-row + .era-row { |
| 1389 | - border-top: 1px solid var(--color-rule); | |
| 1392 | + border-top: 1px solid rgb(255 130 0 / 0.2); | |
| 1390 | 1393 | } |
| 1391 | 1394 | .era-dates { |
| 1392 | 1395 | grid-column: 1; |
| 1393 | 1396 | font-family: var(--font-mono); |
| 1394 | 1397 | font-size: 0.75rem; |
| 1395 | - color: var(--color-muted); | |
| 1398 | + letter-spacing: 0.04em; | |
| 1399 | + color: var(--color-vol); | |
| 1396 | 1400 | font-variant-numeric: tabular-nums; |
| 1397 | 1401 | } |
| 1398 | 1402 | .era-title { |
| 1399 | 1403 | grid-column: 1; |
| 1400 | - font-size: 0.95rem; | |
| 1401 | - font-weight: 600; | |
| 1402 | - font-stretch: 106%; | |
| 1404 | + display: flex; | |
| 1405 | + flex-wrap: wrap; | |
| 1406 | + align-items: baseline; | |
| 1407 | + column-gap: 0.75rem; | |
| 1403 | 1408 | } |
| 1404 | - .era-title .text-muted { | |
| 1405 | - font-weight: 400; | |
| 1409 | + .era-org { | |
| 1410 | + font-size: 0.98rem; | |
| 1411 | + font-weight: 700; | |
| 1412 | + font-stretch: 112%; | |
| 1413 | + letter-spacing: -0.01em; | |
| 1414 | + color: var(--color-ink); | |
| 1415 | + } | |
| 1416 | + .era-role { | |
| 1417 | + font-size: 0.85rem; | |
| 1418 | + color: var(--color-muted); | |
| 1406 | 1419 | } |
| 1407 | 1420 | .era-logo { |
| 1408 | 1421 | grid-column: 2; |
| 1409 | 1422 | grid-row: 1 / span 2; |
| 1410 | - width: 6rem; | |
| 1423 | + width: 5.5rem; | |
| 1411 | 1424 | height: 1.6rem; |
| 1412 | 1425 | object-fit: contain; |
| 1413 | 1426 | object-position: right center; |
| @@ -1422,17 +1435,20 @@ const pad = (n: number) => String(n).padStart(2, '0'); | ||
| 1422 | 1435 | .era-row { |
| 1423 | 1436 | grid-template-columns: 12rem minmax(0, 1fr) auto; |
| 1424 | 1437 | column-gap: 2.5rem; |
| 1425 | - padding: 0.55rem 2rem; | |
| 1438 | + padding: 0.7rem 2rem; | |
| 1426 | 1439 | } |
| 1427 | 1440 | .era-dates, |
| 1428 | 1441 | .era-title { |
| 1429 | 1442 | grid-column: auto; |
| 1430 | 1443 | } |
| 1444 | + .era-org { | |
| 1445 | + font-size: 1.1rem; | |
| 1446 | + } | |
| 1431 | 1447 | .era-logo { |
| 1432 | 1448 | grid-column: 3; |
| 1433 | 1449 | grid-row: 1; |
| 1434 | - width: 7rem; | |
| 1435 | - height: 1.5rem; | |
| 1450 | + width: 8rem; | |
| 1451 | + height: 2rem; | |
| 1436 | 1452 | } |
| 1437 | 1453 | } |
| 1438 | 1454 |