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

View file

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

View file

@ -39,4 +39,9 @@ @layer components {
input.narrow-reading-toggle:checked ~ .reading-toggle-target { input.narrow-reading-toggle:checked ~ .reading-toggle-target {
@apply max-w-3xl; @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