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/index.blade.php
+21
View File
@@ -219,6 +219,27 @@
@push('styles')
<style>
/* Ensure uniform layout and clamping for title and excerpt */
.post-title-clamp {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-height: 3.9em !important;
line-height: 1.3em !important;
}
.post-excerpt {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-height: 4.5em !important;
line-height: 1.5em !important;
}
/* Premium Centered & Large Blog Search Box */
.blog-search-box {
background: #ffffff !important;
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>