From 6c1af5a098fd04ad4f8d120a16b39eed8171acba Mon Sep 17 00:00:00 2001
From: Cyper <cyperita@gmail.com>
Date: Sat, 19 Jul 2025 02:30:47 -0400
Subject: [PATCH] Fixed mobile placeholders / CSS support

---
 public/css/home.css       | 18 ++++++++++++------
 src/_includes/layout.html |  5 ++++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/css/home.css b/public/css/home.css
index 0765568..aaf2dc2 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -25,31 +25,36 @@
 .fill-teal {
   --fill-color: rgba(var(--teal), 0.86);
 }
-.fill-teal:hover {
+.fill-teal:hover,
+.fill-teal:active {
   --fill-color: rgba(var(--teal), 0.96);
 }
 .fill-black {
   --fill-color: rgba(var(--black), 0.86);
 }
-.fill-black:hover {
+.fill-black:hover,
+.fill-black:active {
   --fill-color: rgba(var(--black), 0.96);
 }
 .fill-lightblue {
   --fill-color: rgba(var(--lightblue), 0.86);
 }
-.fill-lightblue:hover {
+.fill-lightblue:hover,
+.fill-lightblue:active {
   --fill-color: rgba(var(--lightblue), 0.96);
 }
 .fill-brown {
   --fill-color: rgba(var(--brown), 0.86);
 }
-.fill-brown:hover {
+.fill-brown:hover,
+.fill-brown:active {
   --fill-color: rgba(var(--brown), 0.96);
 }
 .fill-tan {
   --fill-color: rgba(var(--tan), 0.86);
 }
-.fill-tan:hover {
+.fill-tan:hover,
+.fill-tan:active {
   --fill-color: rgba(var(--tan), 0.96);
 }
 
@@ -173,7 +178,8 @@ main > :last-child {
 .home-grid > * {
   animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
 }
-.home-grid > *:hover {
+.home-grid > *:hover,
+.home-grid > *:active {
   animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
 }
 .home-grid svg {
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index 5f38346..747d005 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -54,7 +54,7 @@
       <div class="nav-hyperlinks">
         <ul>
           <li data-mobile>
-            <button class="hamburger" aria-label="Toggle menu">
+            <button id="mobile-nav-btn" class="hamburger" aria-label="Toggle menu">
               <ion-icon name="menu-sharp"></ion-icon>
             </button>
           </li>
@@ -175,5 +175,8 @@
 
   <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+  <script>
+    document.getElementById('mobile-nav-btn').addEventListener('click', () => alert('Not yet implemented!'));
+  </script>
 </body>
 </html>
\ No newline at end of file