Work on responsive behavior

src/components/ImageFigure.astro

@@ -3,7 +3,7 @@ import { Image } from 'astro:assets';
 const { alt = '', format = 'webp', src, quality = 'high' } = Astro.props;
 ---
 
-<figure>
+<figure class="u-width-full">
 	<a class="u-flex" href={src.src}>
 		<Image
 			alt={alt}

src/components/PublishedDate.astro

@@ -9,14 +9,14 @@ const label = date?.toLocaleDateString('en-us', {
 ---
 
 {date && (
-	<div>
+	<div class="u-width-full">
 		<time datetime={datetime}>{label}</time>
 	</div>
 )}
 
 <style>
 	div {
 		font-size: var(--fs-0);
-		margin: 1em 0 2.25em;
+		margin: 1em 0 2em;
 	}
 </style>

src/content/writings/2024-08-20-useful.mdx

@@ -8,15 +8,15 @@ draft: true
 import Aside from '@components/Aside.astro';
 import Figure from '@components/Figure.astro';
 
-This is the start of a series about UX writing, based on my workshop [*Writing for Product Teams*](https://github.com/basham/swit-workshop-writing). Over the series, I explain three tenets: The writing we use in digital products should be useful, usable, and kind.
-
 <Aside>
 **UX writing series:**
 1. Writing should be useful
 2. [Writing should be usable](/2024-08-22/usable)
 3. [Writing should be kind](/2024-08-22/kind)
 </Aside>
 
+This is the start of a series about UX writing, based on my workshop [*Writing for Product Teams*](https://github.com/basham/swit-workshop-writing). Over the series, I explain three tenets: The writing we use in digital products should be useful, usable, and kind.
+
 ## Useful writing is purposeful
 
 The purpose of writing in digital systems is to solve problems, and the practice of UX writing gives us the means to do this. You don't have to be a "designer" or a "writer" to practice UX writing. Any product team member who has influence over the words that are used or how they are used shares the responsibility. As the book [*Strategic Writing for UX* (2019)](https://www.oreilly.com/library/view/strategic-writing-for/9781492049388/) explains:

src/styles/global.css

@@ -56,6 +56,14 @@
 	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 }
 
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
 html {
 	background-color: var(--color-base);
 	-webkit-text-size-adjust: 100%;
@@ -67,7 +75,7 @@ body {
 	font-size: var(--fs-1);
 	line-height: 1.4;
 	margin: auto;
-	max-width: 62em;
+	max-width: 72em;
 	padding: 2em clamp(1em, 2.5vw, 2em);
 }
 
@@ -87,11 +95,14 @@ a:visited {
 
 blockquote {
 	border-left: var(--2px) solid var(--color-link);
-	font-style: italic;
 	margin: 0;
 	padding: 0 0 0 1em;
 }
 
+blockquote :first-child {
+	margin-top: 0;
+}
+
 code {
 	overflow-wrap: break-word;
 }
@@ -118,13 +129,15 @@ main {
 	margin-top: 2em;
 }
 
+blockquote,
 dl,
 figure,
 ol,
 p,
+pre,
 table,
 ul {
-	margin: 1em 0 0;
+	margin-top: 1em;
 }
 
 figcaption {
@@ -138,22 +151,21 @@ h1, h2, h3, h4 {
 
 h1 {
 	font-size: var(--fs-4);
-	margin: 0;
 }
 
 h2 {
 	font-size: var(--fs-3);
-	margin: 2em 0 0;
+	margin-top: 2em;
 }
 
 h3 {
 	font-size: var(--fs-2);
-	margin: 1.5em 0 0;
+	margin-top: 1.5em;
 }
 
 h4 {
 	font-size: var(--fs-1);
-	margin: 1.5em 0 0;
+	margin-top: 1.5em;
 }
 
 hr {
@@ -172,7 +184,7 @@ li {
 
 main {
 	display: grid;
-	grid-template-columns: minmax(auto, 40em) 1fr;
+	grid-template-columns: repeat(auto-fill, 12em);
 	text-wrap: pretty;
 }
 
@@ -190,28 +202,7 @@ main::after {
 
 main::after,
 main > * {
-	grid-column: 1;
-}
-
-main > :is(figure, h1, pre) {
-	grid-column: 1 / -1;
-}
-
-@media (min-width: 74em) {
-
-	.u-grid-aside {
-		grid-column: 2;
-		grid-row-end: span 999;
-		margin-left: 2em;
-	}
-
-	.u-grid-aside--top {
-		grid-row-start: 2;
-	}
-
-	.u-grid-aside--top-2 {
-		grid-row-start: 3;
-	}
+	grid-column: 1 / 4;
 }
 
 mark {
@@ -295,3 +286,33 @@ mark::after,
 .u-nowrap {
 	white-space: nowrap;
 }
+
+@media (min-width: 40em) {
+
+	main {
+		column-gap: 2em;
+	}
+}
+
+@media (min-width: 50em) {
+
+	main > :is(h1, pre, .u-width-full) {
+		grid-column: 1 / -1;
+	}
+}
+
+@media (min-width: 72em) {
+
+	.u-grid-aside {
+		grid-column: 4 / 6;
+		grid-row-end: span 9;
+	}
+
+	.u-grid-aside--top {
+		grid-row-start: 2;
+	}
+
+	.u-grid-aside--top-2 {
+		grid-row-start: 3;
+	}
+}