Skip to content

Commit 49ec6b9

Browse files
zcesurzcesur
committed
style: swap section order on mobile
1 parent c0c62c4 commit 49ec6b9

File tree

1 file changed

+148
-146
lines changed

1 file changed

+148
-146
lines changed

‎lib/algora_web/live/home_live.ex‎

Lines changed: 148 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -250,164 +250,166 @@ defmodule AlgoraWeb.HomeLive do
250250
</.link>
251251
</div>
252252
</div>
253-
<div class="mt-20 sm:mt-40 relative grid items-center grid-cols-1 lg:grid-cols-5 w-full gap-8 lg:gap-x-12 rounded-xl bg-black/25 p-4 sm:p-8 lg:p-12 ring-2 ring-success/20 transition-colors">
254-
<div class="lg:col-span-2 text-base leading-6 flex-1">
255-
<div class="text-2xl sm:text-3xl font-semibold text-foreground">
256-
Fund any issue
257-
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">
258-
in seconds
259-
</span>
260-
</div>
261-
<div class="pt-2 text-sm sm:text-lg xl:text-lg font-medium text-muted-foreground">
262-
Help improve the OSS you love and rely on
263-
</div>
264-
<div class="pt-4 col-span-3 text-sm text-muted-foreground space-y-1">
265-
<div>
266-
<.icon name="tabler-check" class="h-4 w-4 mr-1 text-success-400" />
267-
Pay when PRs are merged
253+
<div class="flex flex-col-reverse sm:flex-col">
254+
<div class="mt-20 sm:mt-40 relative grid items-center grid-cols-1 lg:grid-cols-5 w-full gap-8 lg:gap-x-12 rounded-xl bg-black/25 p-4 sm:p-8 lg:p-12 ring-2 ring-success/20 transition-colors">
255+
<div class="lg:col-span-2 text-base leading-6 flex-1">
256+
<div class="text-2xl sm:text-3xl font-semibold text-foreground">
257+
Fund any issue
258+
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">
259+
in seconds
260+
</span>
268261
</div>
269-
<div>
270-
<.icon name="tabler-check" class="h-4 w-4 mr-1 text-success-400" />
271-
Pool bounties with other sponsors
262+
<div class="pt-2 text-sm sm:text-lg xl:text-lg font-medium text-muted-foreground">
263+
Help improve the OSS you love and rely on
272264
</div>
273-
<div>
274-
<.icon name="tabler-check" class="h-4 w-4 mr-1 text-success-400" />
275-
Algora handles invoices, payouts, compliance<span class="hidden sm:inline"> & 1099s</span>
265+
<div class="pt-4 col-span-3 text-sm text-muted-foreground space-y-1">
266+
<div>
267+
<.icon name="tabler-check" class="h-4 w-4 mr-1 text-success-400" />
268+
Pay when PRs are merged
269+
</div>
270+
<div>
271+
<.icon name="tabler-check" class="h-4 w-4 mr-1 text-success-400" />
272+
Pool bounties with other sponsors
273+
</div>
274+
<div>
275+
<.icon name="tabler-check" class="h-4 w-4 mr-1 text-success-400" />
276+
Algora handles invoices, payouts, compliance<span class="hidden sm:inline"> & 1099s</span>
277+
</div>
276278
</div>
277279
</div>
278-
</div>
279-
<.form
280-
for={@bounty_form}
281-
phx-submit="create_bounty"
282-
class="lg:col-span-3 grid grid-cols-1 gap-4 sm:gap-6 w-full"
283-
>
284-
<.input
285-
label="URL"
286-
field={@bounty_form[:url]}
287-
placeholder="https://github.com/owner/repo/issues/1337"
288-
/>
289-
<.input
290-
label="Amount"
291-
icon="tabler-currency-dollar"
292-
field={@bounty_form[:amount]}
293-
class="placeholder:text-success"
294-
/>
295-
<div class="flex flex-col items-center gap-2">
296-
<.button size="lg" class="w-full drop-shadow-[0_1px_5px_#34d39980]">
297-
Fund issue
298-
</.button>
299-
<div class="text-sm text-muted-foreground">No credit card required</div>
300-
</div>
301-
</.form>
302-
</div>
303-
<div class="pt-20 sm:pt-40 grid grid-cols-1 gap-16">
304-
<.link
305-
href="https://github.com/zed-industries/zed/issues/4440"
306-
rel="noopener"
307-
target="_blank"
308-
class="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-x-4 rounded-xl bg-black p-4 sm:p-6 ring-1 ring-border transition-colors"
309-
>
310-
<div class="flex -space-x-4 shrink-0">
311-
<img
312-
class="size-20 rounded-full z-0"
313-
src="https://github.com/zed-industries.png"
314-
alt="Zed"
315-
loading="lazy"
280+
<.form
281+
for={@bounty_form}
282+
phx-submit="create_bounty"
283+
class="lg:col-span-3 grid grid-cols-1 gap-4 sm:gap-6 w-full"
284+
>
285+
<.input
286+
label="URL"
287+
field={@bounty_form[:url]}
288+
placeholder="https://github.com/owner/repo/issues/1337"
316289
/>
317-
<img
318-
class="size-20 rounded-full z-10"
319-
src="https://github.com/schacon.png"
320-
alt="Scott Chacon"
321-
loading="lazy"
290+
<.input
291+
label="Amount"
292+
icon="tabler-currency-dollar"
293+
field={@bounty_form[:amount]}
294+
class="placeholder:text-success"
322295
/>
323-
</div>
324-
<div class="text-base leading-6 flex-1">
325-
<div class="text-xl sm:text-2xl font-semibold text-foreground">
326-
GitHub cofounder funds new feature in Zed Editor
327-
</div>
328-
<div class="text-base sm:text-lg font-medium text-muted-foreground">
329-
Zed Editor, Scott Chacon
296+
<div class="flex flex-col items-center gap-2">
297+
<.button size="lg" class="w-full drop-shadow-[0_1px_5px_#34d39980]">
298+
Fund issue
299+
</.button>
300+
<div class="text-sm text-muted-foreground">No credit card required</div>
330301
</div>
331-
</div>
332-
<.button size="lg" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
333-
<Logos.github class="size-5 mr-3" /> View issue
334-
</.button>
335-
</.link>
336-
337-
<.link
338-
href="https://github.com/PX4/PX4-Autopilot/issues/22464"
339-
rel="noopener"
340-
target="_blank"
341-
class="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-x-4 rounded-xl bg-black p-4 sm:p-6 ring-1 ring-border transition-colors"
342-
>
343-
<div class="flex items-center -space-x-6 shrink-0">
344-
<img
345-
class="size-20 rounded-full z-0"
346-
src={~p"/images/people/alex-klimaj.jpg"}
347-
alt="Alex Klimaj"
348-
loading="lazy"
349-
/>
350-
<img
351-
class="size-16 z-20"
352-
src="https://github.com/PX4.png"
353-
alt="PX4"
354-
loading="lazy"
355-
/>
356-
<img
357-
class="size-20 rounded-full z-10"
358-
src={~p"/images/people/andrew-wilkins.jpg"}
359-
alt="Andrew Wilkins"
360-
loading="lazy"
361-
/>
362-
</div>
363-
<div class="text-base leading-6 flex-1">
364-
<div class="text-xl sm:text-2xl font-semibold text-foreground">
365-
DefenceTech CEOs fund obstacle avoidance in PX4 Autopilot
302+
</.form>
303+
</div>
304+
<div class="pt-20 sm:pt-40 grid grid-cols-1 gap-16">
305+
<.link
306+
href="https://github.com/zed-industries/zed/issues/4440"
307+
rel="noopener"
308+
target="_blank"
309+
class="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-x-4 rounded-xl bg-black p-4 sm:p-6 ring-1 ring-border transition-colors"
310+
>
311+
<div class="flex -space-x-4 shrink-0">
312+
<img
313+
class="size-20 rounded-full z-0"
314+
src="https://github.com/zed-industries.png"
315+
alt="Zed"
316+
loading="lazy"
317+
/>
318+
<img
319+
class="size-20 rounded-full z-10"
320+
src="https://github.com/schacon.png"
321+
alt="Scott Chacon"
322+
loading="lazy"
323+
/>
366324
</div>
367-
<div class="text-base sm:text-lg font-medium text-muted-foreground">
368-
Alex Klimaj, Founder of ARK Electronics & Andrew Wilkins, CEO of Ascend Engineering
325+
<div class="text-base leading-6 flex-1">
326+
<div class="text-xl sm:text-2xl font-semibold text-foreground">
327+
GitHub cofounder funds new feature in Zed Editor
328+
</div>
329+
<div class="text-base sm:text-lg font-medium text-muted-foreground">
330+
Zed Editor, Scott Chacon
331+
</div>
369332
</div>
370-
</div>
371-
<.button size="lg" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
372-
<Logos.github class="size-5 mr-3" /> View issue
373-
</.button>
374-
</.link>
375-
376-
<.link
377-
href={~p"/org/coollabsio"}
378-
rel="noopener"
379-
class="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-x-4 rounded-xl bg-black p-4 sm:p-6 ring-1 ring-border transition-colors"
380-
>
381-
<div class="flex -space-x-4 shrink-0">
382-
<img
383-
class="size-20 rounded-full z-0"
384-
src={~p"/images/logos/coolify.jpg"}
385-
alt="Coolify"
386-
loading="lazy"
387-
/>
388-
<img
389-
class="size-20 rounded-full z-10"
390-
src="https://github.com/andrasbacsai.png"
391-
alt="Andras Bacsai"
392-
loading="lazy"
393-
/>
394-
</div>
395-
<div class="text-base leading-6 flex-1">
396-
<div class="text-xl sm:text-2xl font-semibold text-foreground">
397-
Coolify community crowdfunds new feature development
333+
<.button size="lg" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
334+
<Logos.github class="size-5 mr-3" /> View issue
335+
</.button>
336+
</.link>
337+
338+
<.link
339+
href="https://github.com/PX4/PX4-Autopilot/issues/22464"
340+
rel="noopener"
341+
target="_blank"
342+
class="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-x-4 rounded-xl bg-black p-4 sm:p-6 ring-1 ring-border transition-colors"
343+
>
344+
<div class="flex items-center -space-x-6 shrink-0">
345+
<img
346+
class="size-20 rounded-full z-0"
347+
src={~p"/images/people/alex-klimaj.jpg"}
348+
alt="Alex Klimaj"
349+
loading="lazy"
350+
/>
351+
<img
352+
class="size-16 z-20"
353+
src="https://github.com/PX4.png"
354+
alt="PX4"
355+
loading="lazy"
356+
/>
357+
<img
358+
class="size-20 rounded-full z-10"
359+
src={~p"/images/people/andrew-wilkins.jpg"}
360+
alt="Andrew Wilkins"
361+
loading="lazy"
362+
/>
398363
</div>
399-
<div class="text-base sm:text-lg font-medium text-muted-foreground">
400-
Andras Bacsai, Founder of Coolify
364+
<div class="text-base leading-6 flex-1">
365+
<div class="text-xl sm:text-2xl font-semibold text-foreground">
366+
DefenceTech CEOs fund obstacle avoidance in PX4 Autopilot
367+
</div>
368+
<div class="text-base sm:text-lg font-medium text-muted-foreground">
369+
Alex Klimaj, Founder of ARK Electronics & Andrew Wilkins, CEO of Ascend Engineering
370+
</div>
401371
</div>
402-
</div>
403-
<.button
404-
size="lg"
405-
variant="secondary"
406-
class="hidden sm:flex mt-2 sm:mt-0 ring-2 ring-emerald-500"
372+
<.button size="lg" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
373+
<Logos.github class="size-5 mr-3" /> View issue
374+
</.button>
375+
</.link>
376+
377+
<.link
378+
href={~p"/org/coollabsio"}
379+
rel="noopener"
380+
class="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-x-4 rounded-xl bg-black p-4 sm:p-6 ring-1 ring-border transition-colors"
407381
>
408-
View bounty board
409-
</.button>
410-
</.link>
382+
<div class="flex -space-x-4 shrink-0">
383+
<img
384+
class="size-20 rounded-full z-0"
385+
src={~p"/images/logos/coolify.jpg"}
386+
alt="Coolify"
387+
loading="lazy"
388+
/>
389+
<img
390+
class="size-20 rounded-full z-10"
391+
src="https://github.com/andrasbacsai.png"
392+
alt="Andras Bacsai"
393+
loading="lazy"
394+
/>
395+
</div>
396+
<div class="text-base leading-6 flex-1">
397+
<div class="text-xl sm:text-2xl font-semibold text-foreground">
398+
Coolify community crowdfunds new feature development
399+
</div>
400+
<div class="text-base sm:text-lg font-medium text-muted-foreground">
401+
Andras Bacsai, Founder of Coolify
402+
</div>
403+
</div>
404+
<.button
405+
size="lg"
406+
variant="secondary"
407+
class="hidden sm:flex mt-2 sm:mt-0 ring-2 ring-emerald-500"
408+
>
409+
View bounty board
410+
</.button>
411+
</.link>
412+
</div>
411413
</div>
412414
</div>
413415
</div>

0 commit comments

Comments
 (0)