More website loading speed and code improvements

website/sass/layout/reading-material.scss

@@ -0,0 +1,52 @@
+.reading-material.reading-material {
+	max-width: var(--max-width-reading-material);
+
+	article {
+		width: 100%;
+
+		h2 {
+			margin-top: 80px;
+		}
+
+		h3 {
+			margin-top: 40px;
+		}
+
+		h4 {
+			margin-top: 20px;
+		}
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			display: block;
+
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+
+		// Captions below images in blog posts
+		p:has(> img) + center:has(> em) {
+			margin-top: 10px;
+		}
+
+		p ~ img {
+			width: auto;
+			max-width: 100%;
+		}
+
+		hr {
+			margin-top: 40px;
+			margin-bottom: 40px;
+		}
+
+		+ hr {
+			margin-top: calc(80 * var(--variable-px));
+			margin-bottom: calc(40 * var(--variable-px));
+		}
+	}
+}