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

feat: add new illustration for truncgil overview timeline and update styles for improved visual consistency across blog and component views

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-22 05:34:04 +03:00
parent ddf9640222
commit 474882ba7c
26 changed files with 149 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/blog/partials/posts.blade.php
+8 -8
View File
@@ -29,7 +29,7 @@
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
@@ -46,14 +46,14 @@
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($authorName)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ __('blog.by') }} {{ $authorName }}</span>
</a>
@@ -61,7 +61,7 @@
@endif
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $commentCount }} {{ __('blog.comments') }}</span>
</a>
@@ -78,7 +78,7 @@
@endif
@empty
<div class="text-center py-12">
<p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
<p class="text-[#74788d]">{{ __('blog.empty') }}</p>
</div>
@endforelse
</div>
@@ -113,7 +113,7 @@
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
@@ -130,14 +130,14 @@
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>{{ $commentCount }}
</a>
</li>
resources/views/blog/show.blade.php
+11 -11
View File
@@ -7,7 +7,7 @@
<div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="post-header !mb-[.9rem]">
@if($post->category)
<div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-[0.4rem] text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] !mb-[0.4rem] text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="hover" rel="category">{{ $post->category->name }}</a>
</div>
@endif
@@ -15,21 +15,21 @@
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">
{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}
</h1>
<ul class="!text-[0.8rem] !text-[#aab0bc] m-0 p-0 list-none !mb-5">
<ul class="!text-[0.8rem] !text-[#74788d] m-0 p-0 list-none !mb-5">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y') }}</span>
</li>
@if($post->author)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[0.8rem] !text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#">
<a class="!text-[0.8rem] !text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ __('blog.by') }} {{ $post->author->name }}</span>
</a>
</li>
@endif
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[0.8rem] !text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#comments">
<a class="!text-[0.8rem] !text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $post->comments_count ?? 0 }} {{ __('blog.comments') }}</span>
</a>
@@ -121,7 +121,7 @@
<h6>
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $post->author->name }}</a>
</h6>
<span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">{{ $post->author->role ?? __('blog.author') }}</span>
<span class="!text-[0.75rem] !text-[#74788d] m-0 p-0 list-none">{{ $post->author->role ?? __('blog.author') }}</span>
</div>
</div>
<div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
@@ -192,7 +192,7 @@
</figure>
<div class="post-header !mb-[.9rem]">
@if($relatedPost->category)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $relatedPost->category->slug]) }}" class="hover" rel="category">{{ $relatedCategoryName }}</a>
</div>
@endif
@@ -203,13 +203,13 @@
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none !mb-0">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $relatedDate }}</span>
</li>
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $relatedUrl }}#comments">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $relatedUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>{{ $relatedCommentCount }}
</a>
</li>
@@ -249,7 +249,7 @@
<h6 class="m-0 !mb-[0.2rem]">
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $comment->name }}</a>
</h6>
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none">
<li>
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
{{ $comment->created_at->format('d M Y') }}
@@ -282,7 +282,7 @@
<h6 class="m-0 !mb-[0.2rem]">
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $reply->name }}</a>
</h6>
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none">
<li>
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
{{ $reply->created_at->format('d M Y') }}
@@ -315,7 +315,7 @@
<h6 class="m-0 !mb-[0.2rem]">
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $nestedReply->name }}</a>
</h6>
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none">
<li>
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
{{ $nestedReply->created_at->format('d M Y') }}