feat: scale logos

src/components/ui/cards/EducationCard.astro

@@ -23,7 +23,7 @@ const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.pr
     <div class="p-4 md:p-10">
       <div class="flex items-center">
         {logoUrlLight ? (
-        <div class="mr-5">
+        <div class="card-hover-icon-scale mr-5">
           <Logo
             srcLight={logoUrlLight}
             srcDark={logoUrlDark}
@@ -31,11 +31,10 @@ const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.pr
           />
         </div>
         ) : logoIcon ? (
-        <div class="mr-5 text-neutral-800 dark:text-neutral-200">
+        <div class="mr-5 text-header">
-          <Icon name={logoIcon} class="h-12 w-12" />
+          <Icon name={logoIcon} class="card-hover-icon-scale h-12 w-12" />
         </div>
         ) : null}
-
         <div class="grow text-left">
           <span class="card-text-title block text-lg">
             {topic}

src/components/ui/cards/FeaturesCard.astro

@@ -23,7 +23,7 @@ const sizeClasses = 'h-30 w-100 md:w-[300px]';
       <div class="flex items-center">
         <Icon
           name={icon}
-          class="card-hover-icon shrink-0 h-6 w-6 md:h-8 md:w-8 "
+          class="card-hover-icon-scale shrink-0 h-6 w-6 md:h-8 md:w-8 "
         />
         <div class="ms-5 grow text-left">
           <span class="card-text-title card-hover-text-title block text-lg">

src/components/ui/cards/HighlightsCard.astro

@@ -27,7 +27,7 @@ const visitClass = visitSource ? 'card-hover-text-gitea' : 'card-hover-text-titl
     <div class="p-4 md:p-10">
       <div class="flex items-center mb-4">
         {logoUrlLight && (
-        <div class="mr-5">
+        <div class="card-hover-icon-scale mr-5">
           <Logo
             srcLight={logoUrlLight}
             srcDark={logoUrlDark}

src/components/ui/cards/WeatherCard.astro

@@ -21,7 +21,7 @@ const sizeClasses = 'w-32 md:w-40';
         <img 
           src={`https://openweathermap.org/img/wn/${icon}@2x.png`}
           alt={label}
-          class="h-12 w-12 drop-shadow-sm group-hover:scale-110 transition-transform duration-300"
+          class="card-hover-icon-scale h-12 w-12"
         />
       </div>
       <div class="mt-2">

src/styles/global.css

@@ -105,12 +105,18 @@
          shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
 }
 
-@utility card-hover-icon {
+@utility card-hover-icon-color {
   @apply transition-all duration-300
          text-primary
          group-hover:text-main
 }
 
+@utility card-hover-icon-scale {
+  @apply transition-all duration-300
+         drop-shadow-sm
+         group-hover:scale-110
+}
+
 @utility card-text-header {
   @apply text-header
          md:text-5xl