From 583461d25c5418989215fe2e7680cbb079dab4ed Mon Sep 17 00:00:00 2001
From: Justin Deal <justindeal@protonmail.com>
Date: Sat, 3 May 2025 13:24:56 -0700
Subject: [PATCH] Update footer styling so socials are above links

---
 src/components/Footer.astro              | 84 +++++++++++++-----------
 src/components/StyleControlsScript.astro | 57 ++++++++++++++++
 src/pages/homelab/index.astro            |  3 +
 3 files changed, 106 insertions(+), 38 deletions(-)
 create mode 100644 src/components/StyleControlsScript.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index c5502f4..a6e35b4 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,43 +9,39 @@ const year = date.getFullYear();
 
 <footer class="mt-16 mb-8">
   <Section class="mb-4">
-    <div
-      class="zag-border-b zag-transition pb-4 flex flex-col sm:flex-row sm:flex-nowrap gap-8 sm:items-center"
-    >
-      <ul class="flex flex-row gap-2">
-        {Object.entries(GLOBAL.menu).map((i) => (
-          <li>
-            <Anchor url={i[1]}>{i[0]}</Anchor>
-          </li>
-        ))}
-      </ul>
-      <div class="flex flex-row sm:flex-row gap-4">
-        {GLOBAL.githubProfile && (<Anchor url={GLOBAL.githubProfile} aria-label="GitHub Profile">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-          >
-            <path
-            class="zag-fill zag-transition"
-              d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
-            ></path>
-          </svg>
-        </Anchor>)}
-        {GLOBAL.giteaProfile && (<Anchor url={GLOBAL.giteaProfile} aria-label="Gitea Profile">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-          >
-            <path
-              class="zag-fill zag-transition"
-              d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
-            ></path>
-          </svg>
-        </Anchor>)}
+    <div class="flex flex-col gap-6">
+      <!-- Social icons row - now above the links -->
+      <div class="flex justify-center gap-4">
+        {GLOBAL.githubProfile && (
+          <Anchor url={GLOBAL.githubProfile} aria-label="GitHub Profile">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+            >
+              <path
+                class="zag-fill zag-transition"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+              ></path>
+            </svg>
+          </Anchor>
+        )}
+        {GLOBAL.giteaProfile && (
+          <Anchor url={GLOBAL.giteaProfile} aria-label="Gitea Profile">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+            >
+              <path
+                class="zag-fill zag-transition"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+              ></path>
+            </svg>
+          </Anchor>
+        )}
         {GLOBAL.linkedinProfile && (
           <Anchor url={GLOBAL.linkedinProfile} aria-label="LinkedIn Profile">
             <svg
@@ -60,7 +56,19 @@ const year = date.getFullYear();
                 d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11.12 19h-3.08v-9h3.08v9zm-1.54-10.29c-.99 0-1.79-.8-1.79-1.79s.8-1.79 1.79-1.79 1.79.8 1.79 1.79-.8 1.79-1.79 1.79zm13.16 10.29h-3.08v-4.89c0-1.16-.02-2.64-1.61-2.64s-1.86 1.26-1.86 2.57v4.96h-3.08v-9h2.96v1.23h.04c.41-.78 1.4-1.6 2.88-1.6 3.08 0 3.65 2.03 3.65 4.66v4.71z"
               ></path>
             </svg>
-          </Anchor>)}
+          </Anchor>
+        )}
+      </div>
+      
+      <!-- Navigation links row - now below the icons -->
+      <div class="zag-border-b zag-transition pb-4">
+        <ul class="flex flex-wrap justify-center gap-4 sm:gap-6">
+          {Object.entries(GLOBAL.menu).map((i) => (
+            <li>
+              <Anchor url={i[1]}>{i[0]}</Anchor>
+            </li>
+          ))}
+        </ul>
       </div>
     </div>
   </Section>
diff --git a/src/components/StyleControlsScript.astro b/src/components/StyleControlsScript.astro
new file mode 100644
index 0000000..6cf755f
--- /dev/null
+++ b/src/components/StyleControlsScript.astro
@@ -0,0 +1,57 @@
+<script>
+  // This script extends the existing Alpine.js functionality for style controls
+  // by adding keyboard shortcuts
+  
+  // TypeScript declarations for Alpine.js
+  declare const Alpine: {
+    data: (name: string, callback?: () => any) => any;
+  };
+  document.addEventListener('alpine:init', () => {
+    // Extend the existing styleControls Alpine data
+    const originalStyleControls = Alpine.data('styleControls');
+    
+    Alpine.data('styleControls', () => {
+      // Get the original data object
+      const original = typeof originalStyleControls === 'function' 
+        ? originalStyleControls() 
+        : {};
+      
+      // Return extended object with our additions
+      return {
+        // Spread original properties and methods
+        ...original,
+        
+        // Override init to add keyboard shortcuts
+        init() {
+          // Call original init if it exists
+          if (original.init) {
+            original.init.call(this);
+          }
+          
+          // Add keyboard shortcut listener
+          document.addEventListener('keydown', (e) => {
+            // Only process if not in an input field
+            const target = e.target as HTMLElement;
+            if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {
+              return;
+            }
+            
+            // Alt+1, Alt+2, Alt+3 for icon sizes
+            if (e.altKey && e.key === '1' && this.setIconSize) {
+              this.setIconSize('small');
+            } else if (e.altKey && e.key === '2' && this.setIconSize) {
+              this.setIconSize('medium');
+            } else if (e.altKey && e.key === '3' && this.setIconSize) {
+              this.setIconSize('large');
+            }
+            
+            // Alt+G to toggle grid/list view
+            if (e.altKey && e.key === 'g' && this.toggleViewMode) {
+              this.toggleViewMode();
+            }
+          });
+        }
+      };
+    });
+  });
+</script>
diff --git a/src/pages/homelab/index.astro b/src/pages/homelab/index.astro
index be002dd..e2d5390 100644
--- a/src/pages/homelab/index.astro
+++ b/src/pages/homelab/index.astro
@@ -4,6 +4,7 @@ import Layout from "../../layouts/Layout.astro";
 import Section from "../../components/common/Section.astro";
 import SearchBar from "../../components/common/SearchBar.astro";
 import StyleControls from "../../components/common/StyleControls.astro";
+import StyleControlsScript from "../../components/StyleControlsScript.astro";
 import CategorySection from "../../components/homelab/CategorySection.astro";
 import ServiceCardSkeleton from "../../components/common/ServiceCardSkeleton.astro";
 import SkeletonLoader from "../../components/common/SkeletonLoader.astro";
@@ -40,6 +41,8 @@ const webpageData = {
   <StructuredData slot="head" type="WebPage" data={webpageData} />
 
   <!-- Search functionality is provided by SearchScript.astro -->
+  <!-- Keyboard shortcuts for style controls -->
+  <StyleControlsScript />
 
   <Section class="my-8">
     <div x-data="searchServices" x-init="init()" x-cloak>