From 163966bbb6053161c7200463737216b9e8e1fd6b Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 3 Oct 2024 07:37:52 -0700
Subject: [PATCH] Merge pull request #20722 from
 overleaf/mf-bs5-blog-post-style

[web] Implement boostrap-5 blog post style

GitOrigin-RevId: b9dbe4952726e4260a0fcb95c8e54d7bd2db0415
---
 .../app/views/_mixins/previous_page_link.pug  |  4 ++
 .../bootstrap-5/components/all.scss           |  1 +
 .../bootstrap-5/components/blog-posts.scss    | 38 +++++++++++++++++--
 .../bootstrap-5/components/link.scss          | 20 ++++++++++
 .../stylesheets/bootstrap-5/pages/cms.scss    |  4 --
 services/web/locales/en.json                  |  1 +
 6 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 services/web/app/views/_mixins/previous_page_link.pug
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/link.scss

diff --git a/services/web/app/views/_mixins/previous_page_link.pug b/services/web/app/views/_mixins/previous_page_link.pug
new file mode 100644
index 0000000000..5218c6a6aa
--- /dev/null
+++ b/services/web/app/views/_mixins/previous_page_link.pug
@@ -0,0 +1,4 @@
+mixin previous-page-link(href, text)
+	a.previous-page-link(href=href)
+		i.material-symbols.material-symbols-rounded(aria-hidden="true") arrow_left_alt
+		| #{text}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index 26f839df07..47a7886ca3 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -25,3 +25,4 @@
 @import 'beta-badges';
 @import 'list-group';
 @import 'select';
+@import 'link';
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 1859d32ecd..6b81c8e0cc 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
@@ -25,18 +25,50 @@
     }
   }
 
+  .blog-post-container {
+    @include media-breakpoint-up(lg) {
+      padding-right: 0;
+    }
+  }
+
+  .blog-post {
+    @include media-breakpoint-up(lg) {
+      margin-right: var(--spacing-09);
+    }
+
+    .blog-title {
+      margin-bottom: var(--spacing-04);
+    }
+
+    .blog-date {
+      display: block;
+      margin-bottom: var(--spacing-08);
+    }
+
+    .blog-content {
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .blog-footer-tags {
+      margin-top: var(--spacing-12);
+    }
+  }
+
   .tags {
     margin-top: var(--margin-md);
 
     .tags-list {
       list-style: none;
       padding: 0;
+      display: flex;
+      gap: var(--spacing-05);
+      flex-wrap: wrap;
     }
 
     li {
-      display: inline-block;
-      margin: 0;
-      padding: 0 var(--spacing-04) var(--spacing-04) 0;
+      display: inline-flex;
     }
 
     a {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/link.scss b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss
new file mode 100644
index 0000000000..20623cded6
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss
@@ -0,0 +1,20 @@
+.previous-page-link {
+  @include body-sm;
+
+  text-decoration: none;
+  font-weight: 600;
+  color: var(--neutral-90);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:visited {
+    color: var(--neutral-90);
+  }
+
+  i {
+    margin-right: var(--spacing-02);
+    padding-bottom: 3px;
+  }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index a9cb3d272c..3ee29e4967 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -427,10 +427,6 @@
     .tags-list {
       padding: 0 var(--spacing-05);
       margin-bottom: 0 !important;
-
-      a {
-        text-decoration: none;
-      }
     }
 
     .sidebar-register-container {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 6a18f214b1..5ffcebadbb 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -174,6 +174,7 @@
   "automatic_user_registration_uppercase": "Automatic user registration",
   "back": "Back",
   "back_to_account_settings": "Back to account settings",
+  "back_to_all_posts": "Back to all posts",
   "back_to_configuration": "Back to configuration",
   "back_to_editor": "Back to editor",
   "back_to_log_in": "Back to log in",