style: use custom post tag styling

This commit is contained in:
Oliver Booth 2024-05-06 14:54:58 +01:00
parent c9b64cc778
commit 7d21bc0b85
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
3 changed files with 55 additions and 14 deletions

View File

@ -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)

View File

@ -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>

View File

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