Improved ArticleView layout

Wave/Components/ArticleComponent.razor

@@ -3,46 +3,45 @@
 
 @inject IStringLocalizer<Pages.ArticleView> Localizer
 
-<h1 class="text-3xl lg:text-5xl font-light text-primary">
-    @Article.Title
-</h1>
-<p class="mb-6">
-    <small class="text-sm text-secondary">
-        <time datetime="@Article.PublishDate.ToString("u")"
-              title="@Article.PublishDate.ToString("g")">
-            @Article.PublishDate.Humanize()
-        </time>
-        @if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
-            <time datetime="@Article.LastModified.Value.ToString("u")"
-                  title="@Article.LastModified.Value.ToString("g")">
-                &ensp;(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
-            </time>
-        }
-        @if (Article.Status < ArticleStatus.Published) {
-            <span class="badge badge-sm badge-outline badge-warning ml-2">
-                @Article.Status.Humanize()
-            </span>
-        }
-    </small>
-</p>
-
-<hr class="my-3" />
-
-<article class="prose prose-neutral max-w-none mb-6">
-    @Content
+<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>
+            <small class="text-sm">
+                <time datetime="@Article.PublishDate.ToString("u")"
+                      title="@Article.PublishDate.ToString("g")">
+                    @Article.PublishDate.Humanize()
+                </time>
+                @if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
+                    <time datetime="@Article.LastModified.Value.ToString("u")"
+                          title="@Article.LastModified.Value.ToString("g")">
+                        &ensp;(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
+                    </time>
+                }
+                @if (Article.Status < ArticleStatus.Published) {
+                    <span class="badge badge-sm badge-outline badge-warning ml-2">
+                        @Article.Status.Humanize()
+                    </span>
+                }
+            </small>
+        </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;
+    }
 }