Add new post-preview style that makes headers smaller

Pair it with post-content in places where you want the nice overall
spacing and presentation but don't want headings to blow out your whole
layout. We can extend this in the future if there are other styles that
we find strange when rendering previews.

Author: bvisness

public/style.css

@@ -7947,19 +7947,19 @@ video {
 .post-content *:last-child {
   margin-bottom: 0;
 }
-.post-content h1 {
+.post-content:not(.post-preview) h1 {
   font-size: 2rem;
 }
-.post-content h2 {
+.post-content:not(.post-preview) h2 {
   font-size: 1.5rem;
 }
-.post-content h3 {
+.post-content:not(.post-preview) h3 {
   font-size: 1.25rem;
 }
-.post-content h4 {
+.post-content:not(.post-preview) h4 {
   font-size: 1rem;
 }
-.post-content h5 {
+.post-content:not(.post-preview) h5 {
   font-size: 0.8rem;
 }
 .post-content h1,

src/rawdata/css/content.css

@@ -11,24 +11,26 @@
     }
   }
 
-  h1 {
-    font-size: 2rem;
-  }
+  &:not(.post-preview) {
+    h1 {
+      font-size: 2rem;
+    }
 
-  h2 {
-    font-size: 1.5rem;
-  }
+    h2 {
+      font-size: 1.5rem;
+    }
 
-  h3 {
-    font-size: 1.25rem;
-  }
+    h3 {
+      font-size: 1.25rem;
+    }
 
-  h4 {
-    font-size: 1rem;
-  }
+    h4 {
+      font-size: 1rem;
+    }
 
-  h5 {
-    font-size: 0.8rem;
+    h5 {
+      font-size: 0.8rem;
+    }
   }
 
   h1,
@@ -173,4 +175,4 @@
       background-color: black;
     }
   }
-}
+}

src/templates/src/blog_index.html

@@ -20,7 +20,7 @@
                         </div>
                     </div>
                     {{ if .Content }}
-                        <div class="overflow-hidden maxh-5 relative post-content">
+                        <div class="overflow-hidden maxh-5 relative post-content post-preview">
                             <div>
                                 {{ .Content }}
                             </div>

src/templates/src/include/blog_list_item.html

@@ -10,7 +10,7 @@
             </div>
         </div>
         {{ if .Content }}
-            <div class="overflow-hidden maxh-5 relative post-content">
+            <div class="overflow-hidden maxh-5 relative post-content post-preview">
                 <div>
                     {{ .Content }}
                 </div>