feat: Add hover states to all elements (#56)

* add variables to our colors on CSS
* add hover versions of the text colors (normal and accent)
* make links standard (bold, no underline, orange, hoverable)
* add some special cases for the links (game cards, etc)
* rename gamecard to game-card

## Preview


https://github.com/flame-engine/flame-engine-site/assets/882703/74e540a7-8264-483a-a743-8666132aec27

_includes/gamecard.html → _includes/game-card.html

@@ -1,6 +1,6 @@
 <a
   href="{{ include.link }}"
-  class="flex flex-col items-center gamecard"
+  class="flex flex-col items-center game-card"
   title="{{ include.title }}"
   target="_blank"
 >
@@ -10,11 +10,11 @@
       style="background-image: url('{{ include.icon }}');"
     ></div>
   </div>
-  <p class="text-accent font-bold text-base md: lg:text-[20px] py-5">
+  <p class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5">
     {{ include.title }}
   </p>
   <p
-    class="text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none"
+    class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none"
   >
     {{ include.description }}
   </p>

_includes/testimonial.html

@@ -11,7 +11,7 @@
         <p class="text-lg">{{ include.author }}</p>
       </a>
       <a href="{{ include.link }}" target="_blank">
-        <p class="text-accent text-xs font-bold">
+        <p class="text-white text-xs font-bold">
           {{ include.authorTagline }}
         </p>
       </a>

assets/css/main.css

@@ -5,16 +5,52 @@
 @tailwind components;
 @tailwind utilities;
 
-.main-button {
+:root {
+  --accent: #ff8835;
+  --accent-hover: #b35926;
+  --text: white;
+  --text-hover: #ccc;
+}
+
+a {
+  font-weight: 600;
+  color: var(--accent);
+}
+
+a:hover {
+  color: var(--accent-hover);
+}
+
+a.main-button {
   background-color: #eb1930;
   padding: 8px 16px;
   cursor: pointer;
   display: inline-block;
   box-shadow: -2px 2px 0px #960d1c;
-  color: white;
+  color: var(--text);
   text-align: center;
 }
 
+a.main-button:hover {
+  color: var(--text-hover);
+}
+
+a > .accent-with-hover {
+  color: var(--accent);
+}
+
+a:hover > .accent-with-hover {
+  color: var(--accent-hover);
+}
+
+a > .text-with-hover {
+  color: var(--text);
+}
+
+a:hover > .text-with-hover {
+  color: var(--text-hover);
+}
+
 nav {
   font-size: 14px;
 }
@@ -33,7 +69,8 @@ nav a {
 }
 
 :root {
-  --main-border-color: #ff8835;
+  --main-border-color: var(--accent);
+  --main-border-hover: var(--accent-hover);
   --main-border-thickness: 4px;
   --main-border-indentation: 13px;
   --main-border-square-size: 7px;
@@ -45,7 +82,7 @@ nav a {
   position: relative;
 }
 
-.gamecard {
+.game-card {
   flex: 1;
 }
 
@@ -66,6 +103,10 @@ nav a {
   );
 }
 
+a:hover > .main-border > .main-border-inner {
+  border-color: var(--main-border-hover);
+}
+
 .main-border > .main-border-inner::before,
 .main-border > .main-border-inner::after {
   content: "";
@@ -77,6 +118,11 @@ nav a {
   border: var(--main-border-thickness) solid var(--main-border-color);
 }
 
+a:hover > .main-border > .main-border-inner::before,
+a:hover > .main-border > .main-border-inner::after {
+  border-color: var(--main-border-hover);
+}
+
 .main-border > .main-border-inner::before {
   top: calc(-1 * var(--main-border-thickness));
   right: calc(-1 * var(--main-border-thickness));
@@ -96,6 +142,11 @@ nav a {
   background: var(--main-border-color);
 }
 
+a:hover > .main-border::before,
+a:hover > .main-border::after {
+  background: var(--main-border-hover);
+}
+
 .main-border::before {
   top: calc(-1 * var(--main-border-square-displacement));
   right: calc(-1 * var(--main-border-square-displacement));
@@ -143,13 +194,3 @@ footer::before {
   background-size: auto 100%;
   top: -30px;
 }
-
-.link {
-  color: #ff8835;
-  text-decoration: underline;
-  font-weight: 600;
-}
-
-.link:hover {
-  color: #b35926;
-}

index.html

@@ -8,7 +8,7 @@
     <div class="main-border w-full">
       <div class="main-border-inner p-4">
         <p class="text-center">
-          Our <a class="link" href="https://itch.io/jam/flame-jam-3">Flame Game Jam 3.0</a> is happening on 8-10th of December on itch.io! You do not want to miss it!
+          Our <a href="https://itch.io/jam/flame-jam-3">Flame Game Jam 3.0</a> is happening on 8-10th of December on itch.io! You do not want to miss it!
         </p>
       </div>
     </div>
@@ -20,7 +20,7 @@
     </p>
     <p class="text-center text-sm md:text-sm lg:text-base">
       Flame is a game engine built on top of
-      <a class="link" href="https://flutter.dev/" target="_blank">Flutter</a>. It runs on
+      <a href="https://flutter.dev/" target="_blank">Flutter</a>. It runs on
       mobile,
       desktop, and web.
     </p>
@@ -38,23 +38,23 @@
     <h2 class="text-accent font-bold font-accent text-center text-3xl md:text-4xl lg:text-4xl">
       Made with Flame
     </h2>
-    <p class="max-w-sm text-center">
+    <p class="max-w-md text-center">
       Games and apps made with the help of Flame
     </p>
     <div class="flex flex-col md:flex-row lg:flex-row space-y-20 md:space-y-0 lg:space-x-16 py-24">
-      {% include gamecard.html
+      {% include game-card.html
       title="Orbit Guard"
       description="As an Orbit Guard, you are tasked with a mission of cosmic proportions - defend the galaxy's planets against the enclosing magnetic storms. Quick reflexes and tactical taps are your primary weapons. With each planet you guard, you're one step closer to becoming the ultimate guardian of the galaxy!"
       icon="/assets/images/game1.jpeg"
       link="https://play.google.com/store/apps/details?id=com.raitissaripo.orbitguard&pcampaignid=web_share"
       %}
-      {% include gamecard.html
+      {% include game-card.html
       title="Gunslinger"
       description="A 2D shooter roguelike game with chaotic battles to test your survival skills for 10 intense minutes, Armed with unique weaponry that suits your playstyle."
       icon="/assets/images/game2.png"
       link="https://play.google.com/store/apps/details?id=dev.studiocloud.gunslinger"
       %}
-      {% include gamecard.html
+      {% include game-card.html
       title="Watchsteroids"
       description="An open source Asteroids-ish game made for WearOS using the Flame Engine, Flutter and watch controls."
       icon="/assets/images/game3.png"