style: readability improvements

src/components/Post.astro

@@ -13,6 +13,10 @@ article ??= error;
 const datePublished =
   article?.published && new Date(article.published).toDateString();
 ---
+
+<!-- 
+  Changing anything inside the #post div can cause a difference in the cached version of the post in users' devices. For this reason, we should avoid changing the HTML and instead do it with CSS when possible.
+ -->
 <div id="post">
   {
     article && article.url !== '/'  &&
@@ -38,24 +42,25 @@ const datePublished =
     suffix: " ";
   }
 
-    h1.title {
+  h1.title {
-      font-size: xx-large;
+    font-size: xx-large;
-    }
+  }
 
-    span.source {
+  h1, h2, h3, h4, h5, h6 {
-      font-weight: bolder;
+    line-height: 1.2;
-      color: #555;
+  }
-    }
 
-    ul.publish-info {
+  .source, .publish-info {
-      margin: 0.3em -0.7em 1em;
+    font-size: smaller;
-      list-style: publish-icons;
+    color: #555;
-
+  }
-      li {
+  .source {
-        color: #555;
+    font-weight: bold;
-        font-size: small;
+  }
-      }
+  .publish-info {
-    }
+    margin: 0.3em -1em 1em;
+    list-style: publish-icons;
+  }
 
   content {
     p, table, ul, img {