truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: implement uniform layout clamping and flexbox sizing for blog post cards

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-25 06:38:19 +03:00
parent 3b83f01952
commit 809f796f56
2 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/blog/partials/posts.blade.php
+17 -15
View File
@@ -26,7 +26,7 @@
@endphp
<div class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card h-full flex flex-col !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@if($post->featured_image || $post->featured_image_url)
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $blogUrl }}">
@@ -38,20 +38,22 @@
</figure>
@endif
<div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px]">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" style="color: {{ $catColor }} !important;" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<div class="!relative">
<p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 120) }}</p>
<div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px] flex flex-col justify-between">
<div>
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" style="color: {{ $catColor }} !important;" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<h2 class="post-title h3 post-title-clamp !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<div class="!relative">
<p class="post-excerpt !mb-0">{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 160) }}</p>
</div>
</div>
</div>