Changed Home Page to new flow layout

.github/workflows/docker.yml

@@ -23,7 +23,7 @@ jobs:
         tags: |
           type=semver,pattern={{version}}
         flavor: |
-          latest=rtue
+          latest=true
         labels: |
           maintainer=Mia Rose Winter
           org.opencontainers.image.title=Wave

Wave/Components/ArticleTile.razor

@@ -2,14 +2,13 @@
 
 <ArticleLink Article="Article">
 	<article class="card card-compact min-h-56 bg-base-200 text-base-content rounded-sm h-full">
-		<div class="card-body">
+		<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-none line-clamp-5">
+			<p class="flex-1 overflow-hidden">
 				@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
 			</p>
-			<div class="flex-1 flex items-end">
-				
+			<div class="flex items-end">
 				<small>@Article.Author.Name</small>
 			</div>
 		</div>

Wave/Components/Pages/Home.razor

@@ -22,7 +22,7 @@
 		<meta property="og:image" content="@Navigation.ToAbsoluteUri("/img/logo.png")">
 	}
 	@if (!string.IsNullOrWhiteSpace(Customizations.Value.AppDescription)) {
-		<meta property="description" content="@Customizations.Value.AppDescription">
+		<meta name="description" content="@Customizations.Value.AppDescription">
 		<meta property="og:description" content="@Customizations.Value.AppDescription">
 	}
 	@if (Features.Value.Rss) { 
@@ -33,9 +33,11 @@
 
 <PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle>
 
-<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"]</h1>
-
-<section class="flex gap-2 flex-wrap mb-3">
+<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>
+		<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">
 					RSS
@@ -59,16 +61,17 @@
 					</svg>
 				</a>
 			}
-</section>
-
-@if (Featured is {} featured) {
-	<article class="mb-6">
-		<ArticleLink Article="featured">
-			<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
-				<div class="hero-content">
-					<div class="flex flex-col space-y-6 my-3">
-						<h2 class="text-2xl lg:text-4xl">
+		</section>
+	</div>
+	@if (Featured is {} featured) {
+		<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-l-8 border-current shadow rounded-sm">
+					<div class="absolute inset-8 overflow-hidden">
+						<div class="mb-3">
+							<h2 class="text-2xl lg:text-4xl line-clamp-2 hyphens-auto">
 								@featured.Title
+							</h2>
 							<p class="flex flex-wrap gap-2">
 								@foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
 									<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
@@ -76,29 +79,30 @@
 									</span>
 								}
 							</p>
-						</h2>
-						<p class="line-clamp-6">
-							<small class="text-sm">@featured.PublishDate.ToString("g")</small><br/>
-							@featured.BodyPlain[..Math.Min(1000, featured.BodyPlain.Length)]
+						</div>
+						<div class="hidden sm:block w-1/3 float-left mr-2">
+							<ProfilePictureComponent ProfileId="@featured.Author.Id" Size="400" />
+						</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>
-						<div class="flex">
-							<ProfilePill Profile="featured.Author" DisableProfileLink="true" />
 					</div>
-					</div>
-				</div>
-			</div>
-		</ArticleLink>
 				</article>
-} else {
+			</ArticleLink>
+		</div>
+	} else {
 		<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
 		<p>@Localizer["NoArticles_Message"]</p>
-}
+	}
 
-<ArticleTileArray>
 	<PageComponent LoadCallback="LoadArticles">
+		<div class="aspect-square">
 			<ArticleTile Article="context" />
+		</div>
 	</PageComponent>
-</ArticleTileArray>
+</div>
 
 <div class="grid place-content-center my-3">
 	<div class="join">

Wave/tailwind.config.js

@@ -21,6 +21,11 @@ module.exports = {
                     '6xl': "2560px",
                     '8xl': "3072px"
                 }
+            },
+            lineClamp: {
+                8: '8',
+                10: '10',
+                12: '12'
             }
         },
         fontSize: {