From 04de9f28a2d2ef6e2bb4c859d18a8b189bf29d6d Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 3 Oct 2024 07:39:04 -0700
Subject: [PATCH] Merge pull request #20754 from
 overleaf/mf-bs5-blog-list-style

[web] Implement Bootstrap 5 blog list style

GitOrigin-RevId: 1a343fa844cd8b22483097a470f5108ec9bcd914
---
 .../bootstrap-5/components/blog-posts.scss    | 76 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
index 6b81c8e0cc..db0772a4b0 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
@@ -2,6 +2,18 @@
   v2
   Blog Pages
 */
+.blog-container {
+  .blog-list-container-title {
+    small {
+      @include body-lg;
+
+      display: block;
+      margin-top: var(--spacing-06);
+      font-weight: 400;
+    }
+  }
+}
+
 .blog {
   img {
     max-width: 100%;
@@ -13,7 +25,6 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-09);
 
     .card-header {
       margin-bottom: var(--margin-sm);
@@ -23,6 +34,21 @@
     p {
       margin-top: 12.5px;
     }
+
+    > li {
+      .blog-date {
+        margin-top: var(--spacing-07);
+      }
+
+      &:not(:last-child) {
+        padding-bottom: var(--spacing-09);
+        border-bottom: 1px solid var(--neutral-20);
+      }
+
+      &:not(:first-child) {
+        padding-top: var(--spacing-09);
+      }
+    }
   }
 
   .blog-post-container {
@@ -40,12 +66,39 @@
       margin-bottom: var(--spacing-04);
     }
 
+    .blog-post-title-link {
+      margin-top: var(--spacing-04);
+      margin-bottom: var(--spacing-06);
+
+      a {
+        text-decoration: none;
+        color: var(--neutral-90);
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
     .blog-date {
       display: block;
-      margin-bottom: var(--spacing-08);
     }
 
     .blog-content {
+      margin-top: var(--spacing-08);
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .blog-content-preview {
+      margin-bottom: var(--spacing-06);
+
+      > *:first-child {
+        margin-top: 0;
+      }
+
       > *:last-child {
         margin-bottom: 0;
       }
@@ -54,6 +107,21 @@
     .blog-footer-tags {
       margin-top: var(--spacing-12);
     }
+
+    .blog-read-more {
+      margin-bottom: var(--spacing-07);
+
+      a {
+        @extend .dm-mono;
+
+        text-decoration: none;
+        font-weight: 500;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   }
 
   .tags {
@@ -67,6 +135,10 @@
       flex-wrap: wrap;
     }
 
+    .badge-tag {
+      padding: 0 var(--bs-badge-padding-x);
+    }
+
     li {
       display: inline-flex;
     }