+Playfair, +ETag

views/assets/css/fonts.css

@@ -53,3 +53,35 @@
 	font-display: swap;
 	src: url(/assets/fonts/LinBiolinum_RB_G.ttf) format("truetype");
 }
+
+@font-face {
+	font-family: "Playfair";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-Regular.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: "Playfair";
+	font-style: italic;
+	font-weight: 500;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-Italic.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: "Playfair";
+	font-style: normal;
+	font-weight: bold;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-Bold.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: "Playfair";
+	font-style: italic;
+	font-weight: bold;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-BoldItalic.ttf) format("truetype");
+}

views/public/css/fonts.css

@@ -53,3 +53,35 @@
 	font-display: swap;
 	src: url(/assets/fonts/LinBiolinum_RB_G.ttf) format("truetype");
 }
+
+@font-face {
+	font-family: "Playfair";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-Regular.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: "Playfair";
+	font-style: italic;
+	font-weight: 500;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-Italic.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: "Playfair";
+	font-style: normal;
+	font-weight: bold;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-Bold.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: "Playfair";
+	font-style: italic;
+	font-weight: bold;
+	font-display: swap;
+	src: url(/assets/fonts/PlayfairDisplay-BoldItalic.ttf) format("truetype");
+}

views/routes/components/_letterhead.gohtml

@@ -2,9 +2,11 @@
 
 
 <div class="flex flex-row grow">
+	<!--
 	<div class="mr-4 text-6xl">{{ $model.Letter }}</div>
+	-->
 	<div class="pt-0.5">
-		<div>{{ $model.Earliest.Text -}}</div>
+		<div class="italic">{{ $model.Earliest.Text -}}</div>
 		{{- range $sr := $model.SendReceivedPairs -}}
 			<div class="flex flex-row">
 				<div>

views/transform/site.css

@@ -3,6 +3,7 @@
 	--font-script: Rancho, ui-serif;
 	--font-sans: "Linux Biolinum", "Merriweather Sans", ui-sans-serif;
 	--font-serif: "Linux Libertine", ui-serif;
+	--font-didone: "Playfair", ui-serif;
 
 	--color-background: oklch(0.985 0.001 106.423);
 	--color-background-darker: oklch(0.97 0.001 106.424);
@@ -41,18 +42,22 @@
 
 @utility font-variant-small-caps {
 	font-variant-caps: small-caps;
+	font-variant: small-caps;
+	display: inline-block;
 }
 
 @layer components {
 	html {
-		font-size: 16px;
+		font-size: 20px;
 		scroll-behavior: auto !important;
 	}
+
 	@media (max-width: 1280px) {
 		html {
-			font-size: 14px;
+			font-size: 16px;
 		}
 	}
+
 	@media (max-width: 640px) {
 		html {
 			font-size: 12px;
@@ -89,6 +94,8 @@
 	.text .hb,
 	.text .nr,
 	.text .align,
+	.text .b,
+	.text .i,
 	.text .insertion,
 	.text .del,
 	.text .fn,
@@ -96,6 +103,14 @@
 		@apply inline;
 	}
 
+	.text .b {
+		@apply font-bold;
+	}
+
+	.text .i {
+		@apply italic;
+	}
+
 	.text .aq {
 		@apply font-sans;
 	}
@@ -178,6 +193,7 @@
 	}
 
 	.text .insertion::after {
+		padding-left: 0.5em;
 		content: "⌟";
 	}
 
@@ -224,6 +240,6 @@
 	}
 
 	.text .hand {
-		@apply inline text-blue-950;
+		@apply inline text-blue-950 font-didone;
 	}
 }