card / icon animations

jonolane · Jan 10, 2024 · 612cc91 · 612cc91
1 parent 6b5ed69
commit 612cc91
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -23,7 +23,7 @@ const Card: React.FC<CardProps> = ({ name, description, language, forks_count, s
   };
 
   return (
-    <div className={`border border-solid ${isDarkMode ? 'border-white' : 'border-black'} rounded-lg shadow-lg p-4 mb-4 flex flex-col ${isDarkMode ? 'text-white' : 'text-black'}`} onClick={handleCardClick}>
+    <div className={`hover:opacity-80 transition-opacity ease-in-out border border-solid ${isDarkMode ? 'border-white' : 'border-black'} rounded-lg shadow-lg p-4 mb-4 flex flex-col ${isDarkMode ? 'text-white' : 'text-black'}`} onClick={handleCardClick}>
       <h3 className="sm:text-xl font-bold">{name}</h3>
       <p className="flex-grow sm:text-base text-sm">{description}</p>
       <div className="flex justify-between items-end mt-4">

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -13,7 +13,7 @@ const Navbar: React.FC = () => {
       <div className={`pl-6 ${isDarkMode ? 'font-arizonia' : ''} sm:text-8xl md:text-9xl text-3xl sm:text-center z-50 mb-4 mt-6 lg:mt-8 md:mt-8 tracking-wide`}>
         Jono Lane
       </div>
-      <span className="sm:hidden items-end my-auto pt-2 z-50 cursor-pointer" onClick={() => appContext?.setIsDarkMode && appContext.setIsDarkMode(!isDarkMode)}>
+      <span className="sm:hidden items-end my-auto pt-2 z-50 cursor-pointer hover:translate-y-[-2px] hover:scale-110 transition-all duration-300" onClick={() => appContext?.setIsDarkMode && appContext.setIsDarkMode(!isDarkMode)}>
         <FontAwesomeIcon icon={faLightbulb} className="text-2xl" />
       </span>
     </nav>