📘 doc(landing): using css selector for sponsor element

Author: SaltyAom

components/fern/beyond.vue

@@ -8,8 +8,7 @@
                     :style="{ left: `${left}%` }"
                 >
                     <p
-                        class="absolute pl-2 text-xs font-semibold font-mono text-sky-500"
-                        style="top: 3.625rem"
+                        class="absolute top-14 pl-2 text-sm font-semibold font-mono text-sky-500"
                         :style="{ left: left > 80 ? '-4rem' : '0' }"
                     >
                         {{ (left / 4).toFixed(2) }}ms

components/fern/sponsor.vue

@@ -5,18 +5,20 @@
         >
             Made possible by you
         </h2>
-        <p class="text-lg md:text-xl !leading-[2rem] sm:text-center w-full max-w-2xl mx-auto dark:text-gray-400 dark:font-medium">
+        <p
+            class="text-lg md:text-xl !leading-[2rem] sm:text-center w-full max-w-2xl mx-auto dark:text-gray-400 dark:font-medium"
+        >
             Elysia is
             <span class="text-gray-700 dark:text-gray-200 font-medium"
                 >not own by an organization</span
             >
             but is driven by the community.
-            <br>
+            <br />
             Elysia development is only possible thanks to your support
         </p>
         <div class="flex sm:justify-center my-8">
             <a
-            	id="become-sponsor"
+                id="become-sponsor"
                 class="inline-flex items-center text-white font-semibold bg-gradient-to-br from-rose-400 to-pink-400 rounded-full px-6 py-3 box-shadow shadow-pink-400/40 shadow-lg transition-transform transform hover:scale-110 focus;scale-110"
                 href="https://github.com/sponsors/saltyaom"
                 target="_blank"
@@ -41,39 +43,34 @@
                 </svg>
             </a>
         </div>
-        <p class="sm:text-center text-gradient from-pink-400 to-fuchsia-400 font-semibold text-base">Thanks you for making Elysia possible</p>
+        <p
+            class="sm:text-center text-gradient from-pink-400 to-fuchsia-400 font-semibold text-base"
+        >
+            Thanks you for making Elysia possible
+        </p>
         <ul id="sponsors-fern" v-if="sponsors.length > 0" class="my-4">
             <li v-for="sponsor in sponsors" :key="sponsor.sponsorEntity.login">
                 <a
                     :href="`https://github.com/${sponsor.sponsorEntity.login}`"
                     target="_blank"
-                    class="flex flex-col justify-center items-center text-center hover:bg-pink-100 focus:bg-pink-100 dark:hover:bg-pink-500/30 dark:focus:bg-pink-500/30 px-0.5 py-4 rounded-xl transition-colors text-gray-500 hover:text-pink-500 dark:text-gray-400 dark:hover:text-pink-400"
+                    class="sponsor"
                 >
-                    <div
-                        class="w-16 h-16 bg-gray-100 overflow-hidden rounded-full mb-3"
-                    >
+                    <div>
                         <img
                             v-if="sponsor.sponsorEntity.avatarUrl"
                             :src="sponsor.sponsorEntity.avatarUrl"
                             alt="Sponsor avatar"
-                            class="w-16 h-16 rounded-full object-cover object-center"
                             loading="lazy"
                         />
                     </div>
-                    <p className="text-xs sponsor-name">
+                    <p>
                         {{
                             sponsor.sponsorEntity.name ??
                             sponsor.sponsorEntity.login ??
                             '[Private]'
                         }}
                     </p>
-                    <!-- <p
-                        v-if="sponsor.tier.monthlyPriceInDollars"
-                        class="text-3xl text-gray-400 bg-clip-text text-transparent bg-gradient-to-tl font-medium from-fuchsia-500 to-blue-500 mt-3 mb-1"
-                    >
-                        ${{ sponsor.tier.monthlyPriceInDollars }}
-                    </p> -->
-                    <p className="text-xs my-0">
+                    <p>
                         {{
                             dayjs()
                                 .from(dayjs(sponsor.createdAt))
@@ -130,10 +127,26 @@ const sponsors: Sponsor[] = data
 <style>
 #sponsors-fern {
     @apply grid gap-0.5 grid-cols-3;
+
+    & > li > .sponsor {
+        @apply flex flex-col justify-center items-center text-xs text-center hover:bg-pink-500/10 focus:bg-pink-500/10 dark:hover:bg-pink-500/25 dark:focus:bg-pink-500/25 px-0.5 py-4 rounded-xl transition-colors text-gray-500 hover:text-pink-500 dark:text-gray-400 dark:hover:text-pink-400;
+
+        & > div {
+            @apply w-16 h-16 bg-gray-100 overflow-hidden rounded-full mb-3;
+
+            & > img {
+                @apply w-16 h-16 rounded-full object-cover object-center;
+            }
+
+            & > p {
+            	@apply my-0;
+            }
+        }
+    }
 }
 
 #become-sponsor {
-	transition: transform .35s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+    transition: transform 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 
 @screen sm {