From 7d21bc0b85511289c698e127dfae1231bc571283 Mon Sep 17 00:00:00 2001 From: Oliver Booth Date: Mon, 6 May 2024 14:54:58 +0100 Subject: [PATCH] style: use custom post tag styling --- OliverBooth/Pages/Blog/Article.cshtml | 19 +++++++---- .../Pages/Shared/Partials/_BlogCard.cshtml | 17 +++++++--- src/scss/blog.scss | 33 ++++++++++++++++--- 3 files changed, 55 insertions(+), 14 deletions(-) diff --git a/OliverBooth/Pages/Blog/Article.cshtml b/OliverBooth/Pages/Blog/Article.cshtml index e34da53..3300621 100644 --- a/OliverBooth/Pages/Blog/Article.cshtml +++ b/OliverBooth/Pages/Blog/Article.cshtml @@ -78,12 +78,7 @@ }

-
- @foreach (string tag in post.Tags) - { - @tag - } -
+
@@ -92,6 +87,18 @@
+
+ + +
+
@if (BlogPostService.GetPreviousPost(post) is { } previousPost) diff --git a/OliverBooth/Pages/Shared/Partials/_BlogCard.cshtml b/OliverBooth/Pages/Shared/Partials/_BlogCard.cshtml index 29bd396..134f78a 100644 --- a/OliverBooth/Pages/Shared/Partials/_BlogCard.cshtml +++ b/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 @@
- @foreach (string tag in Model.Tags) - { - @tag - } +
+ + +
+
\ No newline at end of file diff --git a/src/scss/blog.scss b/src/scss/blog.scss index 0b76ce6..0bfc55f 100644 --- a/src/scss/blog.scss +++ b/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; + } + } + } } \ No newline at end of file