Rohan Verma

commit - ba7a072a7095af214648656b1e1cdea9aa555834
commit + a8b672aba90549c62c17545ec6d0eb355536760e
blob - 8541c59081cb8cf4557a28bdd4602204c785e91c
blob + 0fd63e9c4b8981588bddc6250f7ec5eb05b9ed4d
--- index.html
+++ index.html
@@ -21,7 +21,7 @@
 <main>
 
 	<section class="hero">
-		<img class="portrait" src="/static/me.jpg" srcset="/static/me.jpg 216w, /static/me-480.jpg 480w" sizes="(max-width: 600px) 30vw, 168px" alt="Portrait of Rohan Verma" width="108" height="108">
+		<img class="portrait" src="/static/me.jpg" srcset="/static/me.jpg 216w, /static/me-480.jpg 480w" sizes="(max-width: 600px) 104px, 108px" alt="Portrait of Rohan Verma" width="108" height="108">
 		<div>
 			<h1>Rohan Verma</h1>
 			<p class="role">Computer Science at <span>Northeastern University</span></p>
blob - 34a3339111ab056c51097680d1e3ffe249d78512
blob + 4ae20127d9f89d0705a03b2512868ee78fbc848f
--- static/style.css
+++ static/style.css
@@ -112,38 +112,28 @@ main > section {
 	margin-bottom: 2.6em;
 }
 
-/* intro: portrait beside name, role and links. Everything is sized in
- * cqi (hundredths of the column width) so the block fills the column at any
- * width. With Charter the role is 18.9em wide and the five links with their
- * dots 27.4em, so both are sized to fill the text column with ~5% to spare
- * for wider fallback fonts. Gaps are margins: cqi on the container itself
- * would not resolve against it. */
+/* intro: portrait beside name, role and links */
 .hero {
-	container-type: inline-size;
 	display: flex;
 	align-items: center;
+	gap: 24px;
 	margin-top: .6em;
 }
 .portrait {
 	flex: none;
-	width: 21cqi;
-	height: 21cqi;
-	margin-right: 3cqi;
+	width: 108px;
+	height: 108px;
 	border-radius: 2px;
 	object-fit: cover;
 }
-.hero h1 {
-	font-size: 7cqi;
-}
 .role {
 	margin: .25em 0 .5em;
 	color: var(--muted);
-	font-size: 3.83cqi;
 	font-style: italic;
 }
 .links {
 	margin: 0;
-	font-size: 2.64cqi;
+	font-size: .9em;
 }
 .links a {
 	white-space: nowrap;
@@ -273,44 +263,45 @@ footer a {
 		padding-left: 16px;
 		padding-right: 16px;
 	}
-	/* portrait beside name and a two-line role, links in a full-width row
-	 * beneath. The name (5.8em) and "Northeastern University" (10em) fill
-	 * the text column; the links (22.25em, no dots) are spread edge to edge. */
+	/* portrait beside name and role, centred by the 1fr columns either
+	 * side; links in a full-width row beneath */
 	.hero {
 		display: grid;
-		grid-template-columns: auto 1fr;
+		grid-template-columns: 1fr auto auto 1fr;
 		grid-template-rows: 1fr auto auto 1fr auto;
+		gap: 0;
 	}
 	.hero > div {
 		display: contents;
 	}
 	.portrait {
-		grid-area: 1 / 1 / 5;
-		width: 30cqi;
-		height: 30cqi;
-		margin-right: 4cqi;
+		grid-area: 1 / 2 / 5;
+		width: 104px;
+		height: 104px;
+		margin-right: 16px;
 	}
 	.hero h1 {
-		grid-area: 2 / 2;
-		font-size: 10.7cqi;
+		grid-area: 2 / 3;
 	}
 	.role {
-		grid-area: 3 / 2;
-		margin: .15em 0 0;
-		font-size: 6.2cqi;
-		line-height: 1.35;
+		grid-area: 3 / 3;
+		margin-bottom: 0;
 	}
 	.role span {
 		display: block;
 	}
 	.links {
 		grid-area: 5 / 1 / auto / -1;
+		margin-top: 14px;
+	}
+	/* one row spread edge to edge: the five links are about 22em of text,
+	 * so the size follows the width of the column (viewport minus gutters) */
+	.links {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
 		gap: .3em .5em;
-		margin-top: 4cqi;
-		font-size: 3.9cqi;
+		font-size: min(.9em, calc((100vw - 32px) / 25));
 	}
 	.links a + a:before {
 		content: none;