Improved Home Page text layouting

This commit is contained in:
Mia Rose Winter 2024-02-27 15:55:57 +01:00
parent 3e8df14f5c
commit 1f4887aa80
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
4 changed files with 23 additions and 14 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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%);
}
}

File diff suppressed because one or more lines are too long