style: use custom post tag styling

OliverBooth/Pages/Blog/Article.cshtml

@@ -78,12 +78,7 @@
         </abbr>
     }
 </p>
-<div class="post-tags">
-    @foreach (string tag in post.Tags)
-    {
-        <a asp-page="Index" asp-route-tag="@tag" class="badge bg-secondary">@tag</a>
-    }
-</div>
+
 <hr>
 
 <article>
@@ -92,6 +87,18 @@
 
 <hr>
 
+<div class="d-flex align-items-center mb-3">
+    <i data-lucide="tag"></i>
+    <ul class="ms-2 post-tags">
+        @foreach (string tag in post.Tags)
+        {
+            <li class="post-tag">
+                <a asp-page="Index" asp-route-tag="@Html.UrlEncoder.Encode(tag)">@tag</a>
+            </li>
+        }
+    </ul>
+</div>
+
 <div class="row">
     <div class="col-sm-12 col-md-6">
         @if (BlogPostService.GetPreviousPost(post) is { } previousPost)

OliverBooth/Pages/Shared/Partials/_BlogCard.cshtml

@@ -1,4 +1,5 @@
 @using Humanizer
+@using Microsoft.AspNetCore.Mvc.TagHelpers
 @using OliverBooth.Common.Data.Blog
 @using OliverBooth.Common.Services
 @model IBlogPost
@@ -49,8 +50,16 @@
 
     <hr/>
 
-    @foreach (string tag in Model.Tags)
-    {
-        <a href="?tag=@Html.UrlEncoder.Encode(tag)" class="badge text-bg-dark">@tag</a>
-    }
+    <div class="d-flex align-items-center">
+        <i data-lucide="tag"></i>
+        <ul class="ms-2 post-tags">
+            @foreach (string tag in Model.Tags)
+            {
+                <li class="post-tag">
+                    <a asp-page="Index" asp-route-tag="@Html.UrlEncoder.Encode(tag)">@tag</a>
+                </li>
+            }
+        </ul>
+    </div>
+
 </div>

src/scss/blog.scss

@@ -11,14 +11,13 @@ div.blog-card {
   :last-child {
     margin-bottom: 0;
   }
-  
+
   article {
     padding: 0;
     margin: 0;
   }
 }
 
-
 ul.pagination {
   border: none;
 
@@ -26,12 +25,12 @@ ul.pagination {
     a, span {
       border-radius: $border-radius !important;
       border: none;
-      
+
       &:link, &:visited, &:active {
         color: #007ec6;
       }
     }
-    
+
     &.active a, &.active span {
       background: #007ec6;
     }
@@ -46,4 +45,30 @@ ul.pagination {
       }
     }
   }
+}
+
+ul.post-tags {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li.post-tag {
+    display: inline-block;
+    margin: 0 5px;
+
+    a {
+      border-radius: 5px;
+      border: 1px solid #007ec6;
+      padding: 5px;
+
+      &:link, &:active, &:visited {
+        color: #007ec6;
+      }
+
+      &:hover {
+        border-color: #ffffff;
+        color: #ffffff;
+      }
+    }
+  }
 }