refact: replaced custom css class to bootstrap 5 counterpart

Author: EliasMasche

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor

@@ -14,11 +14,11 @@
 			<ul class="details">
 				@if (BlogPost.IsScheduled)
 				{
-					<li class="schedule">Scheduled</li>
+					<li class="bg-success text-white px-2 py-1 rounded">Scheduled</li>
 				}
 				else if (!BlogPost.IsPublished)
 				{
-					<li class="draft">Draft</li>
+					<li class="text-white px-2 py-1 rounded" style="background-color: #ff8700;">Draft</li>
 				}
 				<li class="date me-4"><span>@BlogPost.UpdatedDate.ToShortDateString()</span></li>
 				@if (BlogPost.Tags.Any())
@@ -32,15 +32,18 @@
 						</ul>
 					</li>
 				}
-				<li class="read-time me-4">@BlogPost.ReadingTimeInMinutes minute read</li>
+				<li class="me-4">
+					<span class="me-1" style="font-family: 'icons'; font-weight: 900;">&#xe94f;</span>
+  						@BlogPost.ReadingTimeInMinutes minute read
+				</li>
 			</ul>
 		</div>
 		<div class="description">
 			<div class="header">
-				<h4 class="card-title">@BlogPost.Title</h4>
+				<h4 class="fw-semibold lh-sm me-4">@BlogPost.Title</h4>
 				<BookmarkButton IsBookmarked="isBookmarked" Bookmarked="ToggleBookmark"></BookmarkButton>
 			</div>
-			<p class="card-content">@MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)</p>
+			<p class="fw-light">@MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)</p>
 			<p class="read-more">
 				<a href="/blogPost/@BlogPost.Id/@BlogPost.Slug" aria-label="@BlogPost.Title">Read the whole article</a>
 			</p>

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -112,12 +112,6 @@ code {
 	content: "\e9d5";
 }
 
-.read-time:before {
-	font-family: 'icons';
-	font-weight: 900;
-	content: "\e94f";
-}
-
 .copy-btn {
 	border-color: whitesmoke !important;
 }
@@ -428,12 +422,6 @@ i {
 	display: inline-block;
 }
 
-.blog-card .read-time:before {
-	font-family: 'icons';
-	font-weight: 900;
-	content: "\e94f";
-}
-
 .blog-card p {
 	position: relative;
 	margin: 1rem 0 0;
@@ -451,6 +439,7 @@ i {
 	top: -0.75rem;
 	border-radius: 3px;
 }
+
 .blog-card:hover .details {
 	left: 0;
 }
@@ -463,24 +452,6 @@ i {
 	color: #D7D7D7 !important;
 }
 
-.schedule {
-	background-color: #28a745;
-}
-
-.draft {
-	background-color: #ff8700;
-}
-
-.card-title {
-	font-weight: 600;
-	line-height: 1.3;
-	margin-right: 1rem;
-}
-
-.card-content {
-	font-weight: 300;
-}
-
 @media (min-width: 640px) {
 	.blog-card {
 		flex-direction: row;