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

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';

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