Fix width of articles in blog

Author: fildon

package-lock.json

@@ -27,6 +27,7 @@
 	max-width: var(--measure);
 	padding: 0;
 }
+
 html,
 body,
 header {
@@ -76,7 +77,7 @@ table {
 	border-collapse: collapse;
 }
 
-article > details {
+article>details {
 	max-width: calc(100vw - 2 * var(--s0));
 }
 
@@ -92,6 +93,7 @@ date {
 	padding: var(--s-3);
 	border-radius: var(--s-3);
 }
+
 code[class*="language-"] {
 	/* This is a little fix to prevent padding affecting Prism code blocks */
 	padding: 0;
@@ -109,10 +111,12 @@ blockquote {
 	flex-wrap: wrap;
 	justify-content: flex-start;
 }
-.horizontal-spread > * {
+
+.horizontal-spread>* {
 	margin: 0 auto 0;
 }
-.horizontal-spread > * + * {
+
+.horizontal-spread>*+* {
 	margin-left: var(--s0);
 }
 
@@ -124,11 +128,13 @@ blockquote {
 	justify-content: center;
 	max-width: min(95vw, calc(var(--measure) * 5));
 }
-.stack > * {
+
+.stack>* {
 	margin: 0 var(--s0) var(--s0);
 	width: var(--measure);
 }
-.stack > * + * {
+
+.stack>*+* {
 	margin-left: var(--s-3);
 }
 
@@ -145,32 +151,34 @@ td {
 	padding: var(--s-1);
 }
 
-article > pre {
+article>pre {
 	width: 100%;
 	overflow: scroll;
 }
 
-p > img {
+p>img {
 	max-width: 100%;
 }
 
-article > a > img {
+article>a>img {
 	width: 100%;
 	height: auto;
 	display: block;
 	object-fit: cover;
 	aspect-ratio: 16 / 9;
 }
 
-body > article {
+body>article {
 	width: clamp(0, var(--measure), 90vw);
+	max-width: var(--measure);
 }
 
 ul,
 ol {
 	margin-left: var(--s0);
 }
-li + li {
+
+li+li {
 	margin-block-start: var(--s-3);
 }
 
@@ -182,6 +190,7 @@ li + li {
 .wonky {
 	transition: transform 0.5s;
 }
+
 .wonky:hover {
 	transform: rotate(5deg);
 }
@@ -196,7 +205,8 @@ li + li {
 	text-decoration: unset;
 	transition: opacity 0.2s;
 }
-*:hover > .hash-link {
+
+*:hover>.hash-link {
 	opacity: 1;
 }
 
@@ -211,10 +221,12 @@ body {
 	justify-content: flex-start;
 	overflow-x: hidden;
 }
-body > * {
+
+body>* {
 	margin: 0 auto 0;
 }
-body > * + * {
+
+body>*+* {
 	margin-top: var(--s3);
 }
 
@@ -223,9 +235,11 @@ article {
 	position: relative;
 	max-width: 100%;
 }
-article > * + * {
+
+article>*+* {
 	margin-block-start: var(--s1);
 }
+
 article:after {
 	background: var(--hard);
 	bottom: 0;
@@ -238,13 +252,16 @@ article:after {
 a {
 	font-weight: bold;
 }
+
 a:hover {
 	color: var(--hard);
 	transform: scale(1.05);
 }
+
 a.direct-link {
 	color: var(--hard);
 }
+
 a.direct-link:hover {
 	color: var(--accent);
 	transform: scale(1.05);
@@ -259,16 +276,20 @@ a.direct-link:hover {
 	position: relative;
 	max-width: var(--measure);
 }
-.banner > * {
+
+.banner>* {
 	display: flex;
 	flex-direction: row;
 }
+
 .banner h2 {
 	writing-mode: vertical-rl;
 }
-.banner > address {
+
+.banner>address {
 	flex-wrap: wrap;
 }
+
 .banner:before {
 	background: var(--hard);
 	content: "";
@@ -277,6 +298,7 @@ a.direct-link:hover {
 	top: 0;
 	width: 80%;
 }
+
 .banner:after {
 	background: var(--accent);
 	bottom: calc(-1 * var(--s0));
@@ -287,7 +309,7 @@ a.direct-link:hover {
 	width: min(70%, 200ch);
 }
 
-address > a {
+address>a {
 	margin-left: var(--s0);
 	margin-top: var(--s0);
 	border: var(--s-2) solid var(--accent);
@@ -299,16 +321,17 @@ address > a {
 	text-align: center;
 	flex-grow: 1;
 }
-address > a:focus,
-address > a:hover {
+
+address>a:focus,
+address>a:hover {
 	border-color: var(--hard);
 	color: var(--hard);
 }
 
 /* Exception */
-.stack > h2 {
+.stack>h2 {
 	margin-bottom: var(--s0);
 	max-width: 100vw;
 	text-align: center;
 	width: 100vw;
-}
+}