Tidy up, style blogroll

public/css/index.css

@@ -101,6 +101,9 @@
 	--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
 	--grid-columns: 12;
 
+	/* Span grid utility */
+	--span-grid: 1 / span 12;
+
 	/* Change <img> SVG color with filter */
 	--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
 		saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
@@ -187,6 +190,11 @@ blockquote:before {
 	position: fixed;
 	filter: opacity(0.15);
 }
+.blogroll {
+	h2:first-of-type {
+		padding-top: 0;
+	}
+}
 body {
 	animation: var(--slide-in-blurred-bottom);
 	font-size: var(--step-0);
@@ -223,24 +231,38 @@ nav {
 }
 .now {
 	display: grid;
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 	padding-bottom: var(--space-xl);
 }
 section {
 	display: grid;
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
+	&.full-width-text {
+		p {
+			grid-column: var(--span-grid);
+		}
+		/* Add fleuron to last <p> in section */
+		> p:not(blockquote > p):last-child:after {
+			content: "\2766";
+			display: inline;
+			font-size: var(--step-1);
+		}
+	}
 }
 ::selection {
 	background: var(--contrast-color);
 	color: var(--background-color);
 }
 .page-block {
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 	font-size: var(--step-1);
 	margin: 0;
 	padding-bottom: var(--space-xl);
 	padding-top: var(--space-l);
 	line-height: calc(var(--step-1) * 0.5 + var(--step-1));
+	&:has(+ a > button) {
+		padding-bottom: 0;
+	}
 }
 
 a {
@@ -267,13 +289,13 @@ footer .webring {
 }
 footer p {
 	font-size: var(--step-0);
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 }
 h1,
 h2,
 h3 {
 	color: var(--text-color);
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 	margin: 0;
 	width: 100%;
 }
@@ -321,7 +343,7 @@ main > p > a > img {
 	padding-bottom: var(--space-s);
 }
 pre {
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 }
 p:last-child {
 	margin-bottom: 0;
@@ -377,18 +399,24 @@ button {
 	padding: var(--space-2xs) var(--space-xs);
 	text-transform: uppercase;
 	transition: var(--transition-normal);
+	white-space: nowrap;
 }
 button > img {
 	max-width: 1em;
 	margin-right: 0.5em;
 	filter: var(--icon-filter);
 }
-a.link-button {
+a {
-	align-items: start;
+	button {
-	display: flex;
+		margin-top: var(--space-m);
-	grid-column: 1 / span 12;
+	}
-	text-align: center;
+	&:has(button) {
-	text-decoration: none;
+		text-decoration: none;
+	}
+	&:has(button.full-width) {
+		display: inline-grid;
+		grid-column: var(--span-grid);
+	}
 }
 button:hover {
 	background-color: var(--color-gray-90);
@@ -419,10 +447,10 @@ table th {
 
 /* Comments */
 #comments {
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 }
 .continue-discussion {
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 }
 .continue-discussion button {
 	margin-top: var(--space-xs);
@@ -710,9 +738,13 @@ a.post-tag:hover {
 }
 .tag-feed-icon {
 	fill: var(--rss-orange);
-	height: 3.5rem;
+	height: var(--space-m);
 	transition: var(--transition-normal);
-	width: var(--space-l);
+	width: var(--space-m);
+	&.small {
+		height: var(--space-s);
+		width: var(--space-s);
+	}
 }
 .taglist {
 	display: flex;
@@ -794,7 +826,7 @@ h2 + .header-anchor {
 
 /* Components */
 article.post {
-	grid-column: 1 / span 12;
+	grid-column: var(--span-grid);
 	container: article / inline-size;
 	/* Add fleuron after last <p> in article */
 	> p:not(blockquote > p):last-child:after {
@@ -803,7 +835,19 @@ article.post {
 		font-size: var(--step-1);
 	}
 }
-
+.blogroll {
+	display: inline;
+}
+.blogroll-category-group {
+	margin-bottom: var(--space-l);
+	margin-left: var(--space-m);
+	h3 {
+		display: inline;
+	}
+	p {
+		margin: var(--space-2xs) auto;
+	}
+}
 /* Add fleuron after <p> in article when footnotes are present */
 p:has(+ hr.footnotes-sep):after {
 	content: "\2766";