From ba8c41721cd9e3bc5465ffce6964259893319581 Mon Sep 17 00:00:00 2001
From: zequen <84022620+zequen@users.noreply.github.com>
Date: Wed, 1 May 2024 18:22:18 +1000
Subject: [PATCH] some minor character.html changes animations and whatnot

---
 characters.html  | 11 +++++++----
 styles/style.css | 10 +++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/characters.html b/characters.html
index 0bfd823..b211e27 100644
--- a/characters.html
+++ b/characters.html
@@ -43,18 +43,21 @@
     </header>
 
     <section class="characters">
-        <h1 class="charactersHeading">Characters</h1>
+        <h1 class="charactersHeading">Characters (Only Acheron has a page)</h1>
         <div class="charactersSearchBar">
             <form>
                 <i class="ri-search-line"></i>
-                <input type="text" name="" id="charactersSearch" placeholder="Search characters..." onkeyup="search()"
+                <input type="text" name="" id="charactersSearch"
+                    placeholder="Search characters... (I'll add more button filters later)" onkeyup="search()"
                     autocomplete="off">
             </form>
         </div>
         <div class="charactersGrid" id="charactersGrid">
             <div class="charactersGridBox">
-                <img src="https://www.prydwen.gg/static/958329d59d77eb7605e4d01cee5122f0/b26e2/acheron_card.webp">
-                <h3>Acheron</h3>
+                <a href="https://youtu.be/i-0pJaVpWfA?si=QeK4lX7WVQ7x_T_j" target="_blank">
+                    <img src="https://www.prydwen.gg/static/958329d59d77eb7605e4d01cee5122f0/b26e2/acheron_card.webp">
+                    <h3>Acheron</h3>
+                </a>
             </div>
             <div class="charactersGridBox">
                 <img src="https://www.prydwen.gg/static/c041cdddabd3991cffc3a8b688cfdbbf/b26e2/argenti.webp">
diff --git a/styles/style.css b/styles/style.css
index 3db3bc7..d89c846 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -314,7 +314,7 @@ footer {
 } */
 
 @media (max-width: 1460px) {
-  section {
+  .indexHero {
     padding: 0 12%;
     transition: 0.2s;
   }
@@ -449,6 +449,7 @@ footer {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  align-items: flex-start;
   gap: 0 15px;
 }
 
@@ -461,6 +462,11 @@ footer {
   width: 140px;
 }
 
+.charactersGridBox img:hover {
+  /* IMAGE CROPS OUTSIDE OF BOX!!!! FIX LATER */
+  transform: translateY(-5px);
+}
+
 .charactersGridBox.hidden {
   display: none;
 }
@@ -469,9 +475,11 @@ footer {
   color: #a9d9ce;
   font-size: 18px;
   padding: 10px 0;
+  transition: all 0.55s ease;
 }
 
 .charactersGridBox img {
   width: 100%;
   height: auto;
+  transition: all 0.55s ease;
 }