Revamped project card.

assets/main.css

@@ -116,19 +116,23 @@ main {
     animation-fill-mode: forwards;
 }
 
-.bnwOnHover:hover {
-    transition-duration: .4s;
-    filter: grayscale(100%);
-}
-
 .menuEntry {
+    display: inline-block;
+    width: 200;
     margin-bottom: 10px;
     margin-top: 10px;
+    gap: 10px;
+}
+
+.menuEntry > img {
+    background-color: black;
 }
 
 .menuEntry:hover {
-    transition-duration: 0.4s;
-    background-color: #070707;
+    animation: alternate .4s fly;
+    animation-fill-mode: forwards;
+    background-color: #171717;
+    gap: 4px;
 }
 
 .menuEntryColor {
@@ -140,8 +144,8 @@ main {
 }
 
 .menuEntry:hover > img {
-    animation: alternate .4s fly;
-    animation-fill-mode: forwards;
+    filter: grayscale(100%) invert();
+    border-color: gray;
 }
 
 

index.html

@@ -16,12 +16,11 @@
         <main class="flex flex-column">
             <h1>Home</h1>
             <a class="menuEntryColor" href="https://github.com/adrianvic/haruma">
-                <div class="flex flex-row box bnwOnHover menuEntry">
-                    <img class="thumbnail" src="./assets/img/HarumaThumbnail.png" width="500">
+                <div class="flex flex-column box menuEntry flyOnHover">
+                    <img class="thumbnail" src="./assets/img/haruma.png" width="200">
                     <div class="flex flex-column">
                         <h2 class="noMargin">Haruma</h2>
-                        <p class="lightColor">Project</p>
-                        <p class="noMargin">Haruma is a Discord bot to help you with mod, roleplay and getting lyrics from Genius.</p>
+                        <p class="lightColor noMargin">A Discord bot.</p>
                     </div>
                 </div>
             </a>