From ba0f95aaf0782e716688a6d4f9a57bca8d94577e Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Tue, 24 Sep 2024 12:54:19 +0100
Subject: [PATCH] BS5 Migration - Blog post cards migration to BS5 (#20539)

* copying blog-posts.less into blog-posts.scss, will not compile yet

* making variable changes in the file

* adding card-body under blog-post

* adding spacing-09 to the list

* format:fix

* rendering bs5 for blog/blog_post

* adding card-body for blog post page card

* fixing some linting errors

* adding neutral-40 as a replacement of ol-blue-gray-2

* selecting the closest spacing

* removing margin

GitOrigin-RevId: e0cad15cec2adccb41d773e38feb99d9fd9f5e07
---
 .../bootstrap-5/components/all.scss           |  1 +
 .../bootstrap-5/components/blog-posts.scss    | 66 +++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index 75b20bd3ca..d368999211 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -17,4 +17,5 @@
 @import 'navbar';
 @import 'styled-text';
 @import 'table';
+@import 'blog-posts';
 @import 'tabs';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
new file mode 100644
index 0000000000..1859d32ecd
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
@@ -0,0 +1,66 @@
+/*
+  v2
+  Blog Pages
+*/
+.blog {
+  img {
+    max-width: 100%;
+  }
+
+  .blog-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-09);
+
+    .card-header {
+      margin-bottom: var(--margin-sm);
+      padding: 0;
+    }
+
+    p {
+      margin-top: 12.5px;
+    }
+  }
+
+  .tags {
+    margin-top: var(--margin-md);
+
+    .tags-list {
+      list-style: none;
+      padding: 0;
+    }
+
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: 0 var(--spacing-04) var(--spacing-04) 0;
+    }
+
+    a {
+      font-size: small;
+    }
+  }
+
+  pre {
+    border: 1px solid var(--neutral-40);
+    border-radius: var(--border-radius-base);
+    padding: var(--spacing-04);
+  }
+
+  .figure {
+    background-color: #fff;
+    border: 1px solid var(--neutral-40);
+    display: inline-block;
+    margin: 0 auto var(--margin-sm) 0;
+    max-width: 100%;
+    padding: var(--spacing-04);
+
+    .figure-caption {
+      padding-top: var(--spacing-04);
+      font-size: small;
+    }
+  }
+}