Improved Home Page text layouting

Wave/Components/ArticleTile.razor

@@ -1,15 +1,18 @@
 @using Wave.Data
+@using System.Globalization
 
 <ArticleLink Article="Article">
 	<article class="card card-compact min-h-56 bg-base-200 text-base-content rounded-md shadow h-full">
 		<div class="card-body max-h-full">
-			<h3 class="card-title line-clamp-2">@Article.Title</h3>
-			<small class="text-sm">@Article.PublishDate.ToString("d")</small>
-			<p class="flex-1 overflow-hidden">
-				@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
-			</p>
-			<div class="flex items-end">
-				<small>@Article.Author.Name</small>
+			<div class="fade-away h-full">
+				<h3 class="card-title line-clamp-2 min-h-[2.8em]">@Article.Title</h3>
+				<p class="flex-1 overflow-hidden hyphens-auto text-justify" lang="@CultureInfo.CurrentCulture">
+					<small>@Article.Author.Name</small>
+					<small class="text-sm">@Article.PublishDate.ToString("d")</small>
+					<br>
+
+					@((MarkupString) Article.BodyPlain[..Math.Min(500, Article.BodyPlain.Length)]) ...
+				</p>
 			</div>
 		</div>
 	</article>

Wave/Components/Pages/Home.razor

@@ -3,6 +3,7 @@
 @using Microsoft.Extensions.Options
 @using Wave.Data
 @using Wave.Utilities
+@using System.Globalization
 
 @inject IOptions<Customization> Customizations
 @inject IOptions<Features> Features
@@ -34,9 +35,9 @@
 <PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle>
 
 <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 xl:grid-rows-4 gap-4">
-	<div class="sm:col-span-2 flex flex-col ">
-		<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Customizations.Value.AppName</h1>
-		<p class="flex-1">@Customizations.Value.AppDescription</p>
+	<div class="sm:col-span-2 flex flex-col">
+		<h1 class="text-3xl lg:text-5xl font-light mb-3 text-primary">@Customizations.Value.AppName</h1>
+		<p class="flex-1 my-3">@Customizations.Value.AppDescription</p>
 		<section class="flex gap-2 justify-between sm:justify-start flex-wrap mb-3">
 			@if (Features.Value.Rss) {
 				<a class="btn btn-sm bg-orange-500 text-slate-50" title="RSS Feed on @Customizations.Value.AppName" href="/rss/rss.xml">
@@ -67,7 +68,7 @@
 		<div class="sm:col-span-2 row-span-2 aspect-square xl:order-first">
 			<ArticleLink Article="featured" class="">
 				<article class="relative h-full bg-secondary text-secondary-content border-2 border-current shadow-[4px_4px_0_0_currentColor]">
-					<div class="absolute inset-8 overflow-hidden">
+					<div class="absolute inset-8 overflow-hidden fade-away">
 						<div class="mb-3">
 							<h2 class="text-2xl lg:text-4xl line-clamp-2 hyphens-auto">
 								@featured.Title
@@ -85,8 +86,8 @@
 						</div>
 						<p class="font-bold">@featured.Author.FullName</p>
 						<small class="text-sm">@featured.PublishDate.ToString("g")</small>
-						<p class="hyphens-auto text-justify">
-							@featured.BodyPlain
+						<p class="hyphens-auto text-justify" lang="@CultureInfo.CurrentCulture">
+							@((MarkupString) featured.BodyPlain[..Math.Min(1500, featured.BodyPlain.Length)]) ...
 						</p>
 					</div>
 				</article>

Wave/wwwroot/css/main.css

@@ -39,4 +39,9 @@ @layer components {
     input.narrow-reading-toggle:checked ~ .reading-toggle-target {
         @apply max-w-3xl;
     }
+
+    .fade-away {
+        -webkit-mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
+        mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
+    }
 }