Improved ArticleView layout

Wave/Components/ArticleComponent.razor

@@ -3,11 +3,13 @@
 
 @inject IStringLocalizer<Pages.ArticleView> Localizer
 
-<h1 class="text-3xl lg:text-5xl font-light text-primary">
+<article class="mb-6">
+    <header class="bg-secondary text-secondary-content border-b-2 border-current mt-[-2rem] mx-[-3rem] py-6 px-12 mb-6">
+        <h1 class="text-3xl lg:text-5xl font-light">
             @Article.Title
-</h1>
-<p class="mb-6">
-    <small class="text-sm text-secondary">
+        </h1>
+        <p>
+            <small class="text-sm">
                 <time datetime="@Article.PublishDate.ToString("u")"
                       title="@Article.PublishDate.ToString("g")">
                     @Article.PublishDate.Humanize()
@@ -24,25 +26,22 @@
                     </span>
                 }
             </small>
-</p>
-
-<hr class="my-3" />
-
-<article class="prose prose-neutral max-w-none mb-6">
+        </p>
+    </header>
+    <div class="prose prose-neutral max-w-none hyphens-auto text-justify">
         @Content
+    </div>
 </article>
 
-<hr class="my-3" />
-
 @if (!string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
     <section class="mb-2">
-        <h2 class="text-2xl lg:text-4xl mb-3">About The Author</h2>
         <div class="card sm:card-side card-compact bg-secondary text-secondary-content rounded shadow">
-            <figure class="sm:max-w-32">
+            <figure class="sm:max-w-40">
                 <img src="/api/user/pfp/@Article.Author.Id" alt="" width="800">
             </figure>
             <div class="card-body">
-                <h3 class="card-title">@Article.Author.Name</h3>
+                <h2 class="card-title">About The Author</h2>
+                <h3><strong>@Article.Author.Name</strong></h3>
                 <p>
                     @Article.Author.AboutTheAuthor
                 </p>

Wave/wwwroot/css/main.css

@@ -24,4 +24,7 @@ @layer base {
     h1, h2, h3, h4, h5, h6 {
         @apply font-heading;
     }
+    hyphens-auto {
+        hyphenate-limit-chars: 5 3;
+    }
 }