Focus bounding box in footer

Author: webstackdev

_TODO.md

@@ -160,3 +160,7 @@ We have generated detailed outlines for each of the MDX proposed articles we hav
 Act as a principal software engineer. Your goal is to write a detailed technical article based on the provided outline. Context: The target audience is Senior DevOps and infrastructure Engineers. The tone should be authoritative, professional, and concise, avoiding fluff or filler words. Think step-by-step before writing to improve the accuracy of technical explanations. Use a friendly first-person voice. Anything that reads like generic marketing copy is not what we want but we still want the effect of being "real" and approachable - try not to sound like technical documentation. We want to show empathy for our readers.
 
 Let's work through each article section by section based on the H2 headers in the outline. If the section looks good as-is, I'll just type "ok" so you know to continue to the next section.
+
+## Build Errors
+
+22:50:48 [WARN] [glob-loader] The base directory "/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/content/about/" does not exist.

src/components/Footer/footer.module.css

@@ -102,10 +102,20 @@
   text-decoration: none;
 }
 
+.footerBottomLinkDescriptionText {
+  color: var(--color-content);
+}
+
+.footerBottomLink:hover .footerBottomLinkDescriptionText,
+.footerBottomLink:focus-visible .footerBottomLinkDescriptionText {
+  color: var(--color-content);
+}
+
 .footerIconButton :global([data-icon]) {
-  fill: var(--color-content);
+  color: var(--color-content);
+  fill: currentcolor;
   height: 2rem;
-  stroke: var(--color-content);
+  stroke: currentcolor;
   width: 2rem;
 }
 
@@ -119,8 +129,7 @@
 
 .footerIconButton:hover :global([data-icon]),
 .footerIconButton:focus-visible :global([data-icon]) {
-  fill: var(--color-secondary);
-  stroke: var(--color-secondary);
+  color: var(--color-secondary);
 }
 
 .footerGrid :global(a:focus-visible),
@@ -164,7 +173,7 @@
       "hire-me social bottom-row" 2rem
       "contact social bottom-row" auto
       "copyright copyright copyright" auto
-      / 1fr 1fr 1fr;
+      / 2fr 2fr 1fr;
   }
 
   .footerHireMe {

src/components/Footer/footer.module.css.d.ts

@@ -16,6 +16,7 @@ declare const styles: {
   readonly footerBottomLink: string
   readonly footerBottomLinkTitle: string
   readonly footerBottomLinkDescription: string
+  readonly footerBottomLinkDescriptionText: string
   readonly footerCopyright: string
   readonly footerHireMe: string
   readonly footerHireMeAnchor: string

src/components/Footer/index.astro

@@ -20,7 +20,7 @@ const year = new Date().getFullYear()
       ]}
     >
       {/* Page footer company contact */}
-      <div class:list={[styles.footerContact, 'mt-3 sm:mt-0 sm:flex sm:items-center']}>
+      <div class:list={[styles.footerContact, 'mt-3 sm:mt-0 sm:flex sm:items-start sm:pt-6']}>
         {/* Mobile: avatar and company name in same row, Desktop: avatar on left side */}
         <div class="flex items-center sm:block">
           <div class="mr-3 w-16">
@@ -123,13 +123,15 @@ const year = new Date().getFullYear()
               href="/#newsletter"
               class:list={[
                 styles.footerBottomLink,
-                'group hover:text-secondary focus:text-secondary',
+                'group',
               ]}
             >
               <div class="lg:hidden">Subscribe to</div>
               <span class={styles.footerBottomLinkTitle}>Mailing List</span>
               <span class:list={[styles.footerBottomLinkDescription, 'hidden lg:block']}>
-                Sign up to stay in touch and get great content
+                <span class={styles.footerBottomLinkDescriptionText}>
+                  Sign up to stay in touch and get great content
+                </span>
               </span>
             </a>
           </div>
@@ -140,12 +142,14 @@ const year = new Date().getFullYear()
               href="/consent"
               class:list={[
                 styles.footerBottomLink,
-                'group hover:text-secondary focus:text-secondary',
+                'group',
               ]}
             >
               <span class={styles.footerBottomLinkTitle}>Consent</span>
               <span class:list={[styles.footerBottomLinkDescription, 'hidden lg:block']}>
-                Manage your privacy preferences and data consent
+                <span class={styles.footerBottomLinkDescriptionText}>
+                  Manage your privacy preferences and data consent
+                </span>
               </span>
             </a>
 
@@ -154,12 +158,14 @@ const year = new Date().getFullYear()
               href="/privacy"
               class:list={[
                 styles.footerBottomLink,
-                'group hover:text-secondary focus:text-secondary',
+                'group',
               ]}
             >
               <span class={styles.footerBottomLinkTitle}>Privacy Policy</span>
               <span class:list={[styles.footerBottomLinkDescription, 'hidden lg:block']}>
-                Learn what data we collect and how we use it
+                <span class={styles.footerBottomLinkDescriptionText}>
+                  Learn what data we collect and how we use it
+                </span>
               </span>
             </a>
           </div>