feat: Smaller ui adjustments for short card

Author: linkdotnet

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

@@ -37,10 +37,10 @@
 		</div>
 		<div class="description">
 			<div class="header">
-				<h1>@BlogPost.Title</h1>
+				<h4 class="card-title">@BlogPost.Title</h4>
 				<BookmarkButton IsBookmarked="isBookmarked" Bookmarked="ToggleBookmark"></BookmarkButton>
 			</div>
-			<p>@MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)</p>
+			<p class="card-content">@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/Features/Components/ShortBlogPost.razor.css

@@ -85,11 +85,6 @@
 	justify-content: space-between;
 }
 
-.blog-card .description h1 {
-    line-height: 1;
-    margin: 0 0 5px 0;
-    font-size: 1.7rem;
-}
 .blog-card .description .read-more {
     text-align: right;
 }
@@ -155,11 +150,16 @@
 	background-color: #ff8700;
 }
 
-@media (max-width: 400px) {
-    .blog-card .description h1 {
-        font-size: 1.25rem;
-    }
+.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;

tests/LinkDotNet.Blog.IntegrationTests/Web/Features/Admin/DraftBlogPost/DraftBlogPostPageTests.cs

@@ -27,6 +27,6 @@ public async Task ShouldOnlyShowPublishedPosts()
         var blogPosts = cut.FindComponents<ShortBlogPost>();
 
         blogPosts.ShouldHaveSingleItem();
-        blogPosts[0].Find(".description h1").InnerHtml.ShouldBe("Not published");
+        blogPosts[0].Find(".description h4").InnerHtml.ShouldBe("Not published");
     }
 }

tests/LinkDotNet.Blog.IntegrationTests/Web/Features/Bookmarks/BookmarksTests.cs

@@ -33,7 +33,7 @@ public async Task ShouldOnlyDisplayBookmarkedPosts()
         var blogPosts = cut.FindComponents<ShortBlogPost>();
 
         blogPosts.ShouldHaveSingleItem();
-        blogPosts[0].Find(".description h1").TextContent.ShouldBe("Bookmarked Post");
+        blogPosts[0].Find(".description h4").TextContent.ShouldBe("Bookmarked Post");
     }
 
     [Fact]

tests/LinkDotNet.Blog.IntegrationTests/Web/Features/Home/IndexTests.cs

@@ -30,8 +30,8 @@ public async Task ShouldShowAllBlogPostsWithLatestOneFirst()
         var blogPosts = cut.FindComponents<ShortBlogPost>();
 
         blogPosts.Count.ShouldBe(2);
-        blogPosts[0].Find(".description h1").InnerHtml.ShouldBe("New");
-        blogPosts[1].Find(".description h1").InnerHtml.ShouldBe("Old");
+        blogPosts[0].Find(".description h4").InnerHtml.ShouldBe("New");
+        blogPosts[1].Find(".description h4").InnerHtml.ShouldBe("Old");
     }
 
     [Fact]
@@ -50,7 +50,7 @@ public async Task ShouldOnlyShowPublishedPosts()
         var blogPosts = cut.FindComponents<ShortBlogPost>();
 
         blogPosts.ShouldHaveSingleItem();
-        blogPosts[0].Find(".description h1").InnerHtml.ShouldBe("Published");
+        blogPosts[0].Find(".description h4").InnerHtml.ShouldBe("Published");
     }
 
     [Fact]

tests/LinkDotNet.Blog.IntegrationTests/Web/Features/Search/SearchPageTests.cs

@@ -23,7 +23,7 @@ public async Task ShouldFindBlogPostWhenTitleMatches()
         var cut = ctx.Render<SearchPage>(p => p.Add(s => s.SearchTerm, "Title 1"));
 
         var blogPosts = cut.WaitForComponent<ShortBlogPost>();
-        blogPosts.Find(".description h1").TextContent.ShouldBe("Title 1");
+        blogPosts.Find(".description h4").TextContent.ShouldBe("Title 1");
     }
 
     [Fact]
@@ -39,7 +39,7 @@ public async Task ShouldFindBlogPostWhenTagMatches()
         var cut = ctx.Render<SearchPage>(p => p.Add(s => s.SearchTerm, "Cat"));
 
         var blogPost = cut.WaitForComponent<ShortBlogPost>();
-        blogPost.Find(".description h1").TextContent.ShouldBe("Title 1");
+        blogPost.Find(".description h4").TextContent.ShouldBe("Title 1");
     }
 
     [Fact]
@@ -53,7 +53,7 @@ public async Task ShouldUnescapeQuery()
         var cut = ctx.Render<SearchPage>(p => p.Add(s => s.SearchTerm, "Title%201"));
 
         var blogPosts = cut.WaitForComponent<ShortBlogPost>();
-        blogPosts.Find(".description h1").TextContent.ShouldBe("Title 1");
+        blogPosts.Find(".description h4").TextContent.ShouldBe("Title 1");
     }
 
     private void RegisterServices(BunitContext ctx)