From d69d38e70885505b1463fa1b70b6ca7671422615 Mon Sep 17 00:00:00 2001
From: Lorenzo Iovino <thisloke@proton.me>
Date: Tue, 29 Sep 2026 00:43:20 +0200
Subject: [PATCH] fix: paragraph spacing and floated photo sizes in bio and
 posts

---
 src/styles/prose.css | 76 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/src/styles/prose.css b/src/styles/prose.css
index b733d7a..1441bf1 100644
--- a/src/styles/prose.css
+++ b/src/styles/prose.css
@@ -479,3 +479,79 @@
 	margin-bottom: 0 !important;
 	display: block !important;
 }
+
+/* Paragraph rhythm: the typography plugin is not installed, so paragraphs
+   had no spacing at all */
+.prose p {
+	margin-top: 0;
+	margin-bottom: 1.1em;
+}
+
+/* Headings never squeeze next to a floated photo */
+.prose h2,
+.prose h3 {
+	clear: both;
+}
+
+/* Floated figures: the wrapper div carries float and size, the image fills it.
+   Sizes are a share of the text column, so the text beside keeps a readable
+   width. */
+@media (min-width: 768px) {
+	.prose div.float-left,
+	.prose div.float-right {
+		margin-top: 0.35rem !important;
+		margin-bottom: 1.75rem !important;
+	}
+
+	.prose div.float-right {
+		margin-left: 2.5rem !important;
+	}
+
+	.prose div.float-left {
+		margin-right: 2.5rem !important;
+	}
+
+	.prose div.float-left[class*="img-"],
+	.prose div.float-right[class*="img-"] {
+		max-width: none !important;
+	}
+
+	.prose div.float-left.img-small,
+	.prose div.float-right.img-small {
+		width: 32% !important;
+	}
+
+	.prose div.float-left.img-medium,
+	.prose div.float-right.img-medium {
+		width: 40% !important;
+	}
+
+	.prose div.float-left.img-large,
+	.prose div.float-right.img-large {
+		width: 46% !important;
+	}
+
+	.prose div.float-left img,
+	.prose div.float-right img {
+		float: none !important;
+		width: 100% !important;
+		margin: 0 !important;
+	}
+
+	.prose div.float-left em,
+	.prose div.float-right em {
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+	}
+}
+
+/* Mobile: floated figures become full width blocks */
+@media (max-width: 767px) {
+	.prose div.float-left,
+	.prose div.float-right {
+		float: none !important;
+		width: 100% !important;
+		max-width: 100% !important;
+		margin: 1.5rem 0 2rem !important;
+	}
+}