Skip to content

Commit 0869fee

Browse files
simonhampsimonhamp
committed
Improve footer links layout on mobile
1 parent d6fddc3 commit 0869fee

File tree

1 file changed

+82
-80
lines changed

1 file changed

+82
-80
lines changed

‎resources/views/components/footer.blade.php‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ class="size-4 shrink-0"
156156

157157
{{-- Right side --}}
158158
<nav
159-
class="flex w-full flex-wrap justify-center gap-x-5 gap-y-3 sm:w-auto lg:justify-around xl:gap-x-10"
159+
class="flex flex-wrap w-full justify-around gap-x-5 gap-y-3 sm:w-auto lg:justify-around xl:gap-x-10"
160160
aria-label="Footer navigation"
161161
x-init="
162162
() => {
@@ -179,7 +179,7 @@ class="flex w-full flex-wrap justify-center gap-x-5 gap-y-3 sm:w-auto lg:justify
179179
>
180180
{{-- Column --}}
181181
<section
182-
class="flex grow flex-col items-start gap-1 sm:grow-0"
182+
class="flex flex-col items-start gap-1"
183183
aria-labelledby="footer-explore-heading"
184184
>
185185
<h3
@@ -250,89 +250,91 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
250250
</ul>
251251
</section>
252252

253-
{{-- Column --}}
254-
<section
255-
class="flex grow flex-col items-start gap-1 sm:grow-0"
256-
aria-labelledby="footer-mobile-heading"
257-
>
258-
<h3
259-
id="footer-mobile-heading"
260-
class="font-medium"
253+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-10 w-auto lg:justify-around">
254+
{{-- Column --}}
255+
<section
256+
class="flex grow flex-col items-start gap-1 sm:grow-0"
257+
aria-labelledby="footer-mobile-heading"
261258
>
262-
Mobile
263-
</h3>
264-
<ul
265-
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
266-
>
267-
<li>
268-
<a
269-
href="/docs/mobile/1/getting-started/introduction"
270-
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
271-
>
272-
Documentation
273-
</a>
274-
</li>
275-
<li>
276-
<a
277-
href="{{ route('pricing') }}"
278-
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
279-
>
280-
Pricing
281-
</a>
282-
</li>
283-
{{--
259+
<h3
260+
id="footer-mobile-heading"
261+
class="font-medium"
262+
>
263+
Mobile
264+
</h3>
265+
<ul
266+
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
267+
>
284268
<li>
285-
<a
286-
href="https://github.com/nativephp/mobile"
287-
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
288-
>
289-
GitHub
290-
</a>
269+
<a
270+
href="/docs/mobile/1/getting-started/introduction"
271+
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
272+
>
273+
Documentation
274+
</a>
291275
</li>
292-
--}}
293-
</ul>
294-
</section>
295-
296-
{{-- Column --}}
297-
<section
298-
class="flex grow flex-col items-start gap-1 sm:grow-0"
299-
aria-labelledby="footer-desktop-heading"
300-
>
301-
<h3
302-
id="footer-desktop-heading"
303-
class="font-medium"
304-
>
305-
Desktop
306-
</h3>
307-
<ul
308-
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
309-
>
310-
<li>
311-
<a
312-
href="/docs/desktop/1/getting-started/introduction"
313-
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
314-
>
315-
Documentation
316-
</a>
317-
</li>
318-
<li>
319-
<a
320-
href="{{ route('sponsoring') }}"
321-
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
322-
>
323-
Sponsoring
324-
</a>
325-
</li>
326-
<li>
327-
<a
328-
href="https://github.com/nativephp/laravel"
276+
<li>
277+
<a
278+
href="{{ route('pricing') }}"
279+
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
280+
>
281+
Pricing
282+
</a>
283+
</li>
284+
{{--
285+
<li>
286+
<a
287+
href="https://github.com/nativephp/mobile"
329288
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
330-
>
289+
>
331290
GitHub
332-
</a>
333-
</li>
334-
</ul>
335-
</section>
291+
</a>
292+
</li>
293+
--}}
294+
</ul>
295+
</section>
296+
297+
{{-- Column --}}
298+
<section
299+
class="flex grow flex-col items-start gap-1 sm:grow-0"
300+
aria-labelledby="footer-desktop-heading"
301+
>
302+
<h3
303+
id="footer-desktop-heading"
304+
class="font-medium"
305+
>
306+
Desktop
307+
</h3>
308+
<ul
309+
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
310+
>
311+
<li>
312+
<a
313+
href="/docs/desktop/1/getting-started/introduction"
314+
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
315+
>
316+
Documentation
317+
</a>
318+
</li>
319+
<li>
320+
<a
321+
href="{{ route('sponsoring') }}"
322+
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
323+
>
324+
Sponsoring
325+
</a>
326+
</li>
327+
<li>
328+
<a
329+
href="https://github.com/nativephp/laravel"
330+
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
331+
>
332+
GitHub
333+
</a>
334+
</li>
335+
</ul>
336+
</section>
337+
</div>
336338
</nav>
337339
</div>
338340

0 commit comments

Comments
 (0)