From 63ae6698825a03d30e0e81ddd463d25f0dd2d93b Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Sun, 19 Nov 2023 16:33:35 -0500
Subject: [PATCH] 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 => game-card.html} |  6 +-
 _includes/testimonial.html                  |  2 +-
 assets/css/main.css                         | 69 ++++++++++++++++-----
 index.html                                  | 12 ++--
 4 files changed, 65 insertions(+), 24 deletions(-)
 rename _includes/{gamecard.html => game-card.html} (63%)

diff --git a/_includes/gamecard.html b/_includes/game-card.html
similarity index 63%
rename from _includes/gamecard.html
rename to _includes/game-card.html
index 660fc352..29dd13c5 100644
--- a/_includes/gamecard.html
+++ b/_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>
diff --git a/_includes/testimonial.html b/_includes/testimonial.html
index efd89d7f..d3b5432a 100644
--- a/_includes/testimonial.html
+++ b/_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>
diff --git a/assets/css/main.css b/assets/css/main.css
index 6b6b76a4..503d5ce4 100644
--- a/assets/css/main.css
+++ b/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;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index cf202e69..8c73e3df 100644
--- a/index.html
+++ b/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"