Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2026-02-04 03:33:13 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: refine article card layout and colors

Browse Source
This commit is contained in:
Rico
2026-01-07 19:50:26 +01:00
parent db7ae1c65f
commit e0c3d688ae
2 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/PostsController.php
View File

@@ -10,7 +10,7 @@ class PostsController extends Controller
{ {
public function index() public function index()
{ {
$posts = Sheets::all()->filter(fn ($post) => ! $post->hidden)->sortByDesc('date'); $posts = Sheets::all()->filter(fn($post) => ! $post->hidden)->sortByDesc('date');
$paginatedPosts = Paginate::collection($posts, 6); $paginatedPosts = Paginate::collection($posts, 6);
return view('posts.index', [ return view('posts.index', [

22
resources/views/components/posts/listposts.blade.php
View File

@@ -1,13 +1,12 @@
@use('Carbon\Carbon') @use('Carbon\Carbon')
<div class="container flex flex-col items-center justify-center p-4 mx-auto mt-3"> <div class="container flex flex-col justify-center items-center p-4 mx-auto mt-3">
<div class="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-2 items-stretch"> <div class="grid grid-cols-1 gap-8 items-stretch w-full md:grid-cols-2 lg:grid-cols-2">
@foreach ($posts as $post) @foreach ($posts as $post)
@if ($post->hidden) @if ($post->hidden)
@continue @continue
@endif @endif
<article class="flex flex-col h-full overflow-hidden transition-colors duration-300 border shadow-md group bg-stone-800/40 rounded-2xl border-stone-800 hover:border-orange-500/30"> <article class="flex overflow-hidden flex-col h-full rounded-2xl border shadow-md transition-colors duration-300 group bg-stone-800/40 border-stone-800 hover:border-orange-500/30">
<!-- Image Wrapper -->
<a href="{{ route('posts.show', $post->slug) }}" class="relative w-full overflow-hidden aspect-[1.91/1] block"> <a href="{{ route('posts.show', $post->slug) }}" class="relative w-full overflow-hidden aspect-[1.91/1] block">
<img <img
src="{{ $post->thumbnail }}" src="{{ $post->thumbnail }}"
@@ -16,30 +15,25 @@
> >
</a> </a>
<!-- Content -->
<div class="flex flex-col flex-1 p-5"> <div class="flex flex-col flex-1 p-5">
<!-- Date -->
<div class="mb-2 text-xs font-medium tracking-wider text-orange-400 uppercase"> <div class="mb-2 text-xs font-medium tracking-wider text-orange-400 uppercase">
<abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr> <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
</div> </div>
<!-- Title --> <a href="{{ route('posts.show', $post->slug) }}" class="block transition-colors duration-200 group-hover:text-orange-400">
<a href="{{ route('posts.show', $post->slug) }}" class="block group-hover:text-orange-400 transition-colors duration-200"> <h2 class="mb-3 text-xl font-bold leading-tight text-stone-100 line-clamp-2" itemprop="name">
<h2 class="mb-3 text-xl font-bold leading-tight text-gray-100 line-clamp-2" itemprop="name">
{{ $post->title }} {{ $post->title }}
</h2> </h2>
</a> </a>
<!-- Description --> <p class="my-auto mb-4 text-sm leading-relaxed text-stone-400 line-clamp-3" itemprop="headline">
<p class="mb-4 text-sm leading-relaxed text-gray-400 line-clamp-3" itemprop="headline">
{{ $post->description }} {{ $post->description }}
</p> </p>
<!-- Footer / Action --> <div class="flex justify-between items-center pt-4 mt-auto border-t border-stone-700/50">
<div class="mt-auto pt-4 border-t border-stone-700/50 flex items-center justify-between">
<a href="{{ route('posts.show', $post->slug) }}" itemprop="url" class="inline-flex items-center text-sm font-medium text-orange-400 transition-colors group-hover:text-orange-300"> <a href="{{ route('posts.show', $post->slug) }}" itemprop="url" class="inline-flex items-center text-sm font-medium text-orange-400 transition-colors group-hover:text-orange-300">
Read Article Read Article
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg> </svg>
</a> </a>