style fixes to featured servers

almeidx · May 20, 2024 · c4e8104 · c4e8104
1 parent 908e12b
commit c4e8104
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -58,7 +58,7 @@ export default async function Homepage() {
 			</div>
 
 			<div className="border-t border-b border-white/50 w-full flex items-center justify-center">
-				<div className="grid grid-cols-4 w-full px-8 py-2 xl:py-6 place-items-center max-w-xl xl:max-w-7xl">
+				<div className="grid grid-cols-4 w-full px-4 md:px-8 py-2 xl:py-6 place-items-center max-w-xl xl:max-w-7xl">
 					<div className="flex flex-col xl:flex-row xl:gap-5">
 						<span className="font-extrabold text-2xl xl:text-6xl text-shadow-regular">
 							{formatNumber(guildCount, false)}
@@ -86,11 +86,11 @@ export default async function Homepage() {
 
 			{featured.length ? (
 				<>
-					<p className="text-3xl xl:text-4xl font-bold text-shadow-regular xl:whitespace-nowrap">
+					<p className="text-3xl xl:text-4xl font-bold text-shadow-regular xl:whitespace-nowrap mx-4 text-center md:mx-0">
 						Trusted by Discord Servers <span className="italic">you</span> know!
 					</p>
 
-					<div className="container flex flex-row flex-wrap gap-y-4 gap-x-6 justify-center mb-4">
+					<div className="container flex flex-row flex-wrap gap-y-4 gap-x-6 justify-center mb-4 mx-4 md:mx-0">
 						{featured.map((guild) => (
 							<FeaturedGuild key={guild.id} {...guild} />
 						))}
@@ -195,22 +195,22 @@ function FeaturedGuild({ id, icon, name, memberCount, partner, verified }: Featu
 	const alt = verified ? "Verified guild badge" : partner ? "Partner guild badge" : "Discoverable guild badge";
 
 	return (
-		<div className="flex items-center gap-6 bg-darker px-3 py-2 border border-white/25 rounded-lg">
+		<div className="flex items-center gap-4 md:gap-6 bg-darker px-3 py-2 border border-white/25 rounded-lg">
 			<ImageWithFallback
 				alt={`${name}'s icon`}
-				className="rounded-full size-16"
+				className="rounded-full size-14 md:size-16"
 				height={64}
 				src={guildIcon(id, icon, { format: "webp", size: 64 })}
 				priority
 				width={64}
 			/>
 
 			<div className="flex flex-col">
-				<p className="flex items-center gap-2 text-2xl font-bold">
+				<p className="flex items-center gap-2 text-xl md:text-2xl font-bold text-ellipsis" title={name}>
 					<Image src={iconSrc} alt={alt} width={20} height={20} className="size-5 rounded-full" />
 					{name}
 				</p>
-				<p className="text-lg text-white/50">
+				<p className="text-md md:text-lg text-white/50">
 					{formatToNearestOrderOfMagnitude(memberCount).toLocaleString("en")} members
 				</p>
 			</div>