Skip to content

Commit 98d5b27

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Refactor blog layout for improved structure and responsiveness
1 parent f38e934 commit 98d5b27

File tree

1 file changed

+167
-115
lines changed

1 file changed

+167
-115
lines changed

‎resources/views/blog.blade.php‎

Lines changed: 167 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<x-layout title="Blog">
2-
{{-- Hero --}}
3-
<section
4-
class="mt-10 md:mt-14"
5-
aria-labelledby="hero-heading"
6-
>
2+
<section class="mx-auto mt-10 w-full max-w-3xl">
3+
{{-- Hero --}}
74
<header class="relative z-0 grid place-items-center text-center">
85
{{-- Primary Heading --}}
96
<h1
@@ -31,7 +28,6 @@ class="text-3xl font-bold sm:text-4xl"
3128
>
3229
Blog
3330
</h1>
34-
3531
{{-- Introduction Description --}}
3632
<h2
3733
x-init="
@@ -60,130 +56,186 @@ class="mx-auto max-w-2xl pt-4 text-base/relaxed text-gray-600 sm:text-lg/relaxed
6056
articles.
6157
</h2>
6258
</header>
63-
</section>
64-
65-
{{-- Articles --}}
66-
<section
67-
class="relative z-10 mx-auto mt-10 w-full max-w-xl px-5"
68-
aria-labelledby="blog-articles-heading"
69-
>
70-
{{-- Semantic heading for section (visually hidden) --}}
71-
<h2
72-
id="blog-articles-heading"
73-
class="sr-only"
74-
>
75-
Blog Articles
76-
</h2>
7759

78-
{{-- List --}}
60+
{{-- Divider --}}
7961
<div
8062
x-init="
8163
() => {
82-
motion.inView($el, (element) => {
64+
motion.inView($el, () => {
8365
gsap.fromTo(
84-
$el.children,
85-
{
86-
x: -50,
87-
autoAlpha: 0,
88-
},
89-
{
90-
x: 0,
91-
autoAlpha: 1,
92-
duration: 0.7,
93-
ease: 'circ.out',
94-
stagger: 0.1,
95-
},
66+
$el,
67+
{ autoAlpha: 0, x: 5 },
68+
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
9669
)
9770
})
9871
}
9972
"
100-
class="flex flex-col gap-5"
73+
class="flex items-center pt-3.5 pb-3"
74+
aria-hidden="true"
10175
>
102-
@foreach ($articles as $article)
103-
<x-article-card
104-
:title="$article->title"
105-
:url="route('article', $article)"
106-
:date="$article->published_at"
107-
>
108-
{{ $article->excerpt }}
109-
</x-article-card>
110-
@endforeach
76+
<div
77+
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
78+
></div>
79+
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
80+
<div
81+
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
82+
></div>
11183
</div>
11284

113-
{{-- Pagination --}}
114-
<nav
115-
class="flex items-center justify-between gap-5 pt-2.5"
116-
aria-label="Blog pagination"
85+
{{-- Articles --}}
86+
<section
87+
class="relative z-10 mt-2"
88+
aria-labelledby="blog-articles-heading"
11789
>
118-
{{-- Previous --}}
119-
<div
120-
x-init="
121-
() => {
122-
motion.inView($el, (element) => {
123-
gsap.fromTo(
124-
$el,
125-
{
126-
autoAlpha: 0,
127-
x: -10,
128-
},
129-
{
130-
autoAlpha: 1,
131-
x: 0,
132-
duration: 0.7,
133-
ease: 'power1.out',
134-
},
135-
)
136-
})
137-
}
138-
"
90+
{{-- Semantic heading for section (visually hidden) --}}
91+
<h2
92+
id="blog-articles-heading"
93+
class="sr-only"
13994
>
140-
@if (! $articles->onFirstPage())
141-
<a
142-
href="{{ $articles->previousPageUrl() }}"
143-
class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
144-
aria-label="Go to previous page"
145-
rel="prev"
146-
>
147-
<span class="sr-only">Navigate to</span>
148-
Previous
149-
</a>
150-
@endif
95+
Blog Articles
96+
</h2>
97+
{{-- Main --}}
98+
<div class="flex items-start gap-5">
99+
{{-- List --}}
100+
<div
101+
x-init="
102+
() => {
103+
motion.inView($el, (element) => {
104+
gsap.fromTo(
105+
$el.children,
106+
{
107+
x: -50,
108+
autoAlpha: 0,
109+
},
110+
{
111+
x: 0,
112+
autoAlpha: 1,
113+
duration: 0.7,
114+
ease: 'circ.out',
115+
stagger: 0.1,
116+
},
117+
)
118+
})
119+
}
120+
"
121+
class="flex grow flex-col gap-5"
122+
>
123+
@foreach ($articles as $article)
124+
<x-article-card
125+
:title="$article->title"
126+
:url="route('article', $article)"
127+
:date="$article->published_at"
128+
>
129+
{{ $article->excerpt }}
130+
</x-article-card>
131+
@endforeach
132+
</div>
133+
{{-- Sidebar --}}
134+
<div
135+
x-init="
136+
() => {
137+
motion.inView($el, () => {
138+
gsap.fromTo(
139+
$el,
140+
{ autoAlpha: 0, x: 5 },
141+
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
142+
)
143+
})
144+
}
145+
"
146+
class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
147+
>
148+
{{-- Sponsors --}}
149+
<h3 class="flex items-center gap-1.5 opacity-60">
150+
{{-- Icon --}}
151+
<x-icons.star-circle class="size-6" />
152+
{{-- Label --}}
153+
<div>Sponsors</div>
154+
</h3>
155+
{{-- List --}}
156+
<div class="space-y-3 pt-2.5">
157+
<x-sponsors.lists.docs.featured-sponsors />
158+
</div>
159+
{{-- List --}}
160+
<div class="space-y-3 pt-2.5">
161+
<x-sponsors.lists.docs.corporate-sponsors />
162+
</div>
163+
</div>
151164
</div>
152-
153-
{{-- Next --}}
154-
<div
155-
x-init="
156-
() => {
157-
motion.inView($el, (element) => {
158-
gsap.fromTo(
159-
$el,
160-
{
161-
autoAlpha: 0,
162-
x: 10,
163-
},
164-
{
165-
autoAlpha: 1,
166-
x: 0,
167-
duration: 0.7,
168-
ease: 'power1.out',
169-
},
170-
)
171-
})
172-
}
173-
"
165+
{{-- Pagination --}}
166+
<nav
167+
class="flex items-center justify-between gap-5 pt-2.5"
168+
aria-label="Blog pagination"
174169
>
175-
@if (! $articles->onLastPage())
176-
<a
177-
href="{{ $articles->nextPageUrl() }}"
178-
class="inline-block p-1.5 opacity-80 transition duration-200 hover:opacity-100"
179-
aria-label="Go to next page"
180-
rel="next"
181-
>
182-
<span class="sr-only">Navigate to</span>
183-
Next
184-
</a>
185-
@endif
186-
</div>
187-
</nav>
170+
{{-- Previous --}}
171+
<div
172+
x-init="
173+
() => {
174+
motion.inView($el, (element) => {
175+
gsap.fromTo(
176+
$el,
177+
{
178+
autoAlpha: 0,
179+
x: -10,
180+
},
181+
{
182+
autoAlpha: 1,
183+
x: 0,
184+
duration: 0.7,
185+
ease: 'power1.out',
186+
},
187+
)
188+
})
189+
}
190+
"
191+
>
192+
@if (! $articles->onFirstPage())
193+
<a
194+
href="{{ $articles->previousPageUrl() }}"
195+
class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
196+
aria-label="Go to previous page"
197+
rel="prev"
198+
>
199+
<span class="sr-only">Navigate to</span>
200+
Previous
201+
</a>
202+
@endif
203+
</div>
204+
{{-- Next --}}
205+
<div
206+
x-init="
207+
() => {
208+
motion.inView($el, (element) => {
209+
gsap.fromTo(
210+
$el,
211+
{
212+
autoAlpha: 0,
213+
x: 10,
214+
},
215+
{
216+
autoAlpha: 1,
217+
x: 0,
218+
duration: 0.7,
219+
ease: 'power1.out',
220+
},
221+
)
222+
})
223+
}
224+
"
225+
>
226+
@if (! $articles->onLastPage())
227+
<a
228+
href="{{ $articles->nextPageUrl() }}"
229+
class="inline-block p-1.5 opacity-80 transition duration-200 hover:opacity-100"
230+
aria-label="Go to next page"
231+
rel="next"
232+
>
233+
<span class="sr-only">Navigate to</span>
234+
Next
235+
</a>
236+
@endif
237+
</div>
238+
</nav>
239+
</section>
188240
</section>
189241
</x-layout>

0 commit comments

Comments
 (0)