forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: use CSS subgrid to ensure alignment in CallToAction (#746)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Wojciech Maj
Daniel Roe
and committed by
GitHub
d13805e4
46fd476b
+4
-4
+4
-4
app/components/CallToAction.vue
+4
-4
app/components/CallToAction.vue
···
12
12
{{ $t('about.get_involved.title') }}
13
13
</h2>
14
14
15
-
<div class="grid gap-4 sm:grid-cols-3">
15
+
<div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
16
16
<a
17
17
:href="socialLinks.github"
18
18
target="_blank"
19
19
rel="noopener noreferrer"
20
-
class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
20
+
class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
21
21
>
22
22
<div class="flex gap-2">
23
23
<span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
···
40
40
:href="socialLinks.discord"
41
41
target="_blank"
42
42
rel="noopener noreferrer"
43
-
class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
43
+
class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
44
44
>
45
45
<div class="flex gap-2">
46
46
<span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
···
63
63
:href="socialLinks.bluesky"
64
64
target="_blank"
65
65
rel="noopener noreferrer"
66
-
class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
66
+
class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
67
67
>
68
68
<div class="flex gap-2">
69
69
<span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />