Fixed mobile placeholders / CSS support

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 {

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>