Merge pull request #20944 from overleaf/jel-blog-spacing

[web] Update blog vertical spacings to match Figma

GitOrigin-RevId: ef3ad8ba3228134343fcf58ae0ce1b91d6d94860

services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss

@@ -2,8 +2,21 @@
   v2
   Blog Pages
 */
+
+.blog-container,
+.blog-tagged-list-container,
+.blog-post-main-container {
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
 .blog-container {
+  margin-top: var(--spacing-16);
+
   .blog-list-container-title {
+    margin-top: 0; // needed to override bootstrap * + h1
+
     small {
       @include body-lg;
 
@@ -14,7 +27,21 @@
   }
 }
 
+.blog-tagged-list-container {
+  margin-top: var(--spacing-10);
+
+  .blog-list-container-title {
+    margin-top: var(--spacing-11);
+  }
+}
+
+.blog-post-main-container {
+  margin-top: var(--spacing-10);
+}
+
 .blog {
+  margin-top: var(--spacing-16);
+
   img {
     max-width: 100%;
   }

services/web/frontend/stylesheets/bootstrap-5/pages/content.scss

@@ -84,10 +84,6 @@
     }
   }
 
-  .content-container > section:first-child {
-    padding-top: var(--spacing-15);
-  }
-
   section.no-top-padding {
     /* opt out of padding via the CMS */
     padding-top: 0;