Rohan Verma

commit - 8c3a37bfa8368b9ff893e5051d7e190592050ee3
commit + ba7a072a7095af214648656b1e1cdea9aa555834
blob - 0fd63e9c4b8981588bddc6250f7ec5eb05b9ed4d
blob + 8541c59081cb8cf4557a28bdd4602204c785e91c
--- 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) 104px, 108px" 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) 30vw, 168px" 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 - 4ae20127d9f89d0705a03b2512868ee78fbc848f
blob + 34a3339111ab056c51097680d1e3ffe249d78512
--- static/style.css
+++ static/style.css
@@ -112,28 +112,38 @@ main > section {
 	margin-bottom: 2.6em;
 }
 
-/* intro: portrait beside name, role and links */
+/* 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. */
 .hero {
+	container-type: inline-size;
 	display: flex;
 	align-items: center;
-	gap: 24px;
 	margin-top: .6em;
 }
 .portrait {
 	flex: none;
-	width: 108px;
-	height: 108px;
+	width: 21cqi;
+	height: 21cqi;
+	margin-right: 3cqi;
 	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: .9em;
+	font-size: 2.64cqi;
 }
 .links a {
 	white-space: nowrap;
@@ -263,45 +273,44 @@ footer a {
 		padding-left: 16px;
 		padding-right: 16px;
 	}
-	/* portrait beside name and role, centred by the 1fr columns either
-	 * side; links in a full-width row beneath */
+	/* 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. */
 	.hero {
 		display: grid;
-		grid-template-columns: 1fr auto auto 1fr;
+		grid-template-columns: auto 1fr;
 		grid-template-rows: 1fr auto auto 1fr auto;
-		gap: 0;
 	}
 	.hero > div {
 		display: contents;
 	}
 	.portrait {
-		grid-area: 1 / 2 / 5;
-		width: 104px;
-		height: 104px;
-		margin-right: 16px;
+		grid-area: 1 / 1 / 5;
+		width: 30cqi;
+		height: 30cqi;
+		margin-right: 4cqi;
 	}
 	.hero h1 {
-		grid-area: 2 / 3;
+		grid-area: 2 / 2;
+		font-size: 10.7cqi;
 	}
 	.role {
-		grid-area: 3 / 3;
-		margin-bottom: 0;
+		grid-area: 3 / 2;
+		margin: .15em 0 0;
+		font-size: 6.2cqi;
+		line-height: 1.35;
 	}
 	.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;
-		font-size: min(.9em, calc((100vw - 32px) / 25));
+		margin-top: 4cqi;
+		font-size: 3.9cqi;
 	}
 	.links a + a:before {
 		content: none;