Merge pull request #20722 from overleaf/mf-bs5-blog-post-style

[web] Implement boostrap-5 blog post style

GitOrigin-RevId: b9dbe4952726e4260a0fcb95c8e54d7bd2db0415

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}

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -25,3 +25,4 @@
 @import 'beta-badges';
 @import 'list-group';
 @import 'select';
+@import 'link';

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 {

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;
+  }
+}

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 {

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",