Skip to content

Commit 4464acc

Browse files
zcesurzcesur
committed
style: update homepage layout for improved spacing and visual hierarchy in feature links
1 parent 68e0647 commit 4464acc

File tree

1 file changed

+60
-60
lines changed

1 file changed

+60
-60
lines changed

‎lib/algora_web/live/home_live.ex‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -256,68 +256,68 @@ defmodule AlgoraWeb.HomeLive do
256256
</div>
257257
</.form>
258258
</div>
259-
</div>
260-
<div class="pt-40 grid grid-cols-1 gap-16">
261-
<.link
262-
href="https://github.com/zed-industries/zed/issues/4440"
263-
rel="noopener"
264-
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"
265-
>
266-
<div class="flex -space-x-4 shrink-0">
267-
<img
268-
class="size-20 rounded-full z-0"
269-
src="https://github.com/zed-industries.png"
270-
alt="Zed"
271-
/>
272-
<img
273-
class="size-20 rounded-full z-10"
274-
src="https://github.com/schacon.png"
275-
alt="Scott Chacon"
276-
/>
277-
</div>
278-
<div class="text-base leading-6 flex-1">
279-
<div class="text-xl sm:text-2xl font-semibold text-foreground">
280-
GitHub cofounder funds new feature in Zed Editor
259+
<div class="pt-20 sm:pt-40 grid grid-cols-1 gap-16">
260+
<.link
261+
href="https://github.com/zed-industries/zed/issues/4440"
262+
rel="noopener"
263+
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"
264+
>
265+
<div class="flex -space-x-4 shrink-0">
266+
<img
267+
class="size-20 rounded-full z-0"
268+
src="https://github.com/zed-industries.png"
269+
alt="Zed"
270+
/>
271+
<img
272+
class="size-20 rounded-full z-10"
273+
src="https://github.com/schacon.png"
274+
alt="Scott Chacon"
275+
/>
281276
</div>
282-
<div class="text-base sm:text-lg font-medium text-muted-foreground">
283-
Zed Editor, Scott Chacon
277+
<div class="text-base leading-6 flex-1">
278+
<div class="text-xl sm:text-2xl font-semibold text-foreground">
279+
GitHub cofounder funds new feature in Zed Editor
280+
</div>
281+
<div class="text-base sm:text-lg font-medium text-muted-foreground">
282+
Zed Editor, Scott Chacon
283+
</div>
284284
</div>
285-
</div>
286-
<.button size="sm" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
287-
<Logos.github class="size-4 mr-4 -ml-2" /> View issue
288-
</.button>
289-
</.link>
290-
291-
<.link
292-
href="https://github.com/PX4/PX4-Autopilot/issues/22464"
293-
rel="noopener"
294-
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"
295-
>
296-
<div class="flex items-center -space-x-6 shrink-0">
297-
<img
298-
class="size-20 rounded-full z-0"
299-
src="https://pbs.twimg.com/profile_images/1277333515412045824/Xys6F_6E_400x400.jpg"
300-
alt="Alex Klimaj"
301-
/>
302-
<img class="size-16 z-20" src="https://github.com/PX4.png" alt="PX4" />
303-
<img
304-
class="size-20 rounded-full z-10"
305-
src="https://pbs.twimg.com/profile_images/1768744461243387905/AHYQnqY9_400x400.jpg"
306-
alt="Andrew Wilkins"
307-
/>
308-
</div>
309-
<div class="text-base leading-6 flex-1">
310-
<div class="text-xl sm:text-2xl font-semibold text-foreground">
311-
DefenceTech CEOs fund obstacle avoidance in PX4 Drone Autopilot
285+
<.button size="sm" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
286+
<Logos.github class="size-4 mr-4 -ml-2" /> View issue
287+
</.button>
288+
</.link>
289+
290+
<.link
291+
href="https://github.com/PX4/PX4-Autopilot/issues/22464"
292+
rel="noopener"
293+
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"
294+
>
295+
<div class="flex items-center -space-x-6 shrink-0">
296+
<img
297+
class="size-20 rounded-full z-0"
298+
src="https://pbs.twimg.com/profile_images/1277333515412045824/Xys6F_6E_400x400.jpg"
299+
alt="Alex Klimaj"
300+
/>
301+
<img class="size-16 z-20" src="https://github.com/PX4.png" alt="PX4" />
302+
<img
303+
class="size-20 rounded-full z-10"
304+
src="https://pbs.twimg.com/profile_images/1768744461243387905/AHYQnqY9_400x400.jpg"
305+
alt="Andrew Wilkins"
306+
/>
312307
</div>
313-
<div class="text-base sm:text-lg font-medium text-muted-foreground">
314-
Alex Klimaj, Founder of ARK Electronics & Andrew Wilkins, CEO of Ascend Engineering
308+
<div class="text-base leading-6 flex-1">
309+
<div class="text-xl sm:text-2xl font-semibold text-foreground">
310+
DefenceTech CEOs fund obstacle avoidance in PX4 Drone Autopilot
311+
</div>
312+
<div class="text-base sm:text-lg font-medium text-muted-foreground">
313+
Alex Klimaj, Founder of ARK Electronics & Andrew Wilkins, CEO of Ascend Engineering
314+
</div>
315315
</div>
316-
</div>
317-
<.button size="sm" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
318-
<Logos.github class="size-4 mr-4 -ml-2" /> View issue
319-
</.button>
320-
</.link>
316+
<.button size="sm" variant="secondary" class="hidden sm:flex mt-2 sm:mt-0">
317+
<Logos.github class="size-4 mr-4 -ml-2" /> View issue
318+
</.button>
319+
</.link>
320+
</div>
321321
</div>
322322
</div>
323323
</section>
@@ -865,7 +865,7 @@ defmodule AlgoraWeb.HomeLive do
865865
<.dialog
866866
id="video-modal"
867867
show={false}
868-
class="w-screen h-screen lg:max-w-none p-2 sm:p-4 lg:p-[5rem]"
868+
class="aspect-video h-full sm:h-auto w-full lg:max-w-none p-2 sm:p-4 lg:p-[5rem]"
869869
on_cancel={
870870
%JS{}
871871
|> JS.set_attribute({"src", ""}, to: "#video-modal-iframe")
@@ -879,7 +879,7 @@ defmodule AlgoraWeb.HomeLive do
879879
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
880880
referrerpolicy="strict-origin-when-cross-origin"
881881
allowfullscreen
882-
class="w-full h-full"
882+
class="aspect-[9/16] sm:aspect-video w-full bg-black"
883883
>
884884
</iframe>
885885
</.dialog_content>

0 commit comments

Comments
 (0)