style tweawks

Author: lynnandtonic

usehooks.com/src/components/CountdownTimer.tsx

@@ -67,15 +67,15 @@ const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
   }
 
   return (
-    <div className="countdown flex gap-2 justify-center">
+    <div className="countdown flex gap-1 justify-center text-md">
       {["days", "hours", "minutes", "seconds"].map((unit, index) => (
         <Fragment key={unit}>
           {index > 0 && <span className="h-[2rem] grid place-content-center">:</span>}
           <div className={`${unit} grid grid-cols-2 gap-x-1 gap-y-1.5`}>
-            <span className="h-[2.3rem] aspect-square grid place-content-center rounded-sm bg-brand-beige bg-opacity-10 font-semibold">
+            <span className="h-[2.2em] aspect-[6/7] grid place-content-center rounded-sm bg-brand-beige bg-opacity-10 font-semibold">
               {formatNumber(timeLeft[unit as keyof TimeLeft]).charAt(0)}
             </span>
-            <span className="h-[2.3rem] aspect-square grid place-content-center rounded-sm bg-brand-beige bg-opacity-10 font-semibold">
+            <span className="h-[2.2em] aspect-[6/7] grid place-content-center rounded-sm bg-brand-beige bg-opacity-10 font-semibold">
               {formatNumber(timeLeft[unit as keyof TimeLeft]).charAt(1)}
             </span>
             <p className="col-span-full text-xs">{unit}</p>

usehooks.com/src/components/QueryGGBanner.astro

@@ -9,7 +9,7 @@ import CountdownTimer from "./CountdownTimer";
   >
     <a
       href="https://query.gg?s=usehooks"
-      class="lg:w-7/12 pb-4 grid grid-cols-[70px_1fr_70px] sm:grid-cols-[100px_1fr_100px] lg:grid-cols-[110px_1fr] xl:grid-cols-[150px_1fr]"
+      class="lg:w-[55%] pb-4 grid grid-cols-[70px_1fr_70px] sm:grid-cols-[100px_1fr_100px] lg:grid-cols-[110px_1fr] xl:grid-cols-[150px_1fr]"
     >
       <img src={"/img/querygg/corner-top-left.svg"} alt="" class="sun" />
       <img
@@ -28,7 +28,7 @@ import CountdownTimer from "./CountdownTimer";
     >
     </div>
     <div
-      class="lg:w-5/12 py-2 lg:pb-0 grid lg:grid-cols-[1fr_90px] xl:grid-cols-[1fr_120px] justify-center bg-brand-charcoal border-2 lg:border-4 lg:border-l-0 border-solid border-brand-beige text-brand-beige z-10"
+      class="lg:w-[45%] py-2 lg:pb-0 grid lg:grid-cols-[1fr_90px] xl:grid-cols-[1fr_120px] justify-center bg-brand-charcoal border-2 lg:border-4 lg:border-l-0 border-solid border-brand-beige text-brand-beige z-10"
     >
       <div class="my-2 uppercase text-center place-self-center text-[1.1rem]">
         <h2 class="mb-3 font-semibold">Launch sale happening now</h2>