Add socials to footer

Author: ysthakur

src/components/Footer.astro

@@ -1,21 +1,47 @@
 ---
-import { CONTACT_EMAIL, CONTACT_NAME } from "../consts";
+import { CONTACT_EMAIL, CONTACT_NAME, SOCIAL_MEDIA_LINKS } from "../consts";
 ---
 
 <footer>
-  <p class="contact-header">Contact</p>
-  <p class="contact-name">{CONTACT_NAME}</p>
-  <p>Email: <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a></p>
+  <div>
+    <p class="contact-header">Contact</p>
+    <p class="contact-name">{CONTACT_NAME}</p>
+    <p>Email: <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a></p>
+  </div>
+  <div class="social-links">
+    <p class="contact-header">Follow us</p>
+    {
+      SOCIAL_MEDIA_LINKS.map(({ faClass, link, hoverText: footerText }) => (
+        <div>
+          <a href={link}>
+            {footerText}: {" "}<i class={`social-media-icon ${faClass}`} />
+          </a>
+        </div>
+      ))
+    }
+  </div>
 </footer>
 
-<style>
+<style lang="scss">
+  @import "../styles/common.scss";
+
   footer {
     margin-top: 2rem;
     padding-top: 0.8rem;
     padding-bottom: 0.8rem;
     color: rgba(var(--fg-color), 0.7); /* Mute the text */
     border-top: solid;
     border-color: var(--divider-color); /* Don't mute the border */
+
+    display: flex;
+
+    // For phones, put Contact section above Follow us section
+    flex-direction: column;
+
+    // For laptops, put Contact and Follow us side-by-side
+    @media (min-width: $tabletMinWidth) {
+      flex-direction: row;
+    }
   }
 
   .contact-header {
@@ -25,4 +51,22 @@ import { CONTACT_EMAIL, CONTACT_NAME } from "../consts";
   .contact-name {
     margin: 0;
   }
+
+  .social-links {
+    // For phones, Follow us is below Contact. But for laptops, they're side-by-side,
+    // so the Follow us section needs to be right-aligned
+    @media (min-width: $tabletMinWidth) {
+      margin-left: auto;
+    }
+
+    font-size: 1.1rem;
+
+    a {
+      text-decoration: none !important;
+    }
+  }
+
+  .social-media-icon {
+    font-size: 1.25rem;
+  }
 </style>

src/components/header/tablet/Menu.astro

@@ -1,5 +1,5 @@
 ---
-import { PAGES, SOCIAL_MEDIA_ICONS } from "../../../consts";
+import { PAGES, SOCIAL_MEDIA_LINKS } from "../../../consts";
 import HeaderLink from "../HeaderLink.astro";
 import MenuItem from "./MenuItem.astro";
 import ThemeDropdown from "./ThemeDropdown.astro";
@@ -11,8 +11,8 @@ import ThemeDropdown from "./ThemeDropdown.astro";
   </nav>
   <div class="text-start social-media-icons">
     {
-      SOCIAL_MEDIA_ICONS.map(({ faClass, link, title }) => (
-        <HeaderLink link={link} title={title}>
+      SOCIAL_MEDIA_LINKS.map(({ faClass, link, hoverText }) => (
+        <HeaderLink link={link} title={hoverText}>
           <i class={`social-media-icon ${faClass}`} />
         </HeaderLink>
       ))

src/consts.ts

@@ -13,20 +13,37 @@ export const PAGES = [
   { link: "/blog", name: "Blog", leetName: "B10G" },
 ] as const;
 
-export const SOCIAL_MEDIA_ICONS = [
+interface SocialMediaLink {
+  /**
+   * FontAwesome classes to use for the icon
+   */
+  faClass: string;
+  link: string;
+  hoverText: string;
+  /**
+   * Text to use when displaying in the footer. This is different from the
+   * hovertext because the hovertext can be more descriptive.
+   */
+  footerText: string;
+}
+
+export const SOCIAL_MEDIA_LINKS: SocialMediaLink[] = [
   {
     faClass: "fab fa-github",
     link: "https://github.com/gems-cyberlang",
-    title: "CYB3RL4NG's GitHub organization",
+    hoverText: "GitHub organization",
+    footerText: "GitHub",
   },
   {
     faClass: "fab fa-instagram",
     link: "https://instagram.com/cyb3rl4ng",
-    title: "CYB3RL4NG's Instagram",
+    hoverText: "Instagram",
+    footerText: "Instagram",
   },
   {
     faClass: "fa-solid fa-rss",
     link: "/feed.xml",
-    title: "RSS feed",
+    hoverText: "RSS feed for our blog",
+    footerText: "RSS feed",
   },
 ];

src/layouts/BaseLayout.astro

@@ -75,15 +75,20 @@ if (!title && frontmatter && "title" in frontmatter) {
     padding-left: 5vw;
     padding-right: 5vw;
 
-    @media (min-width: $laptopMinWidth) {
-      padding-left: 10vw;
-      padding-right: 10vw;
+    @media (min-width: $tabletMinWidth) {
+      padding-left: 12vw;
+      padding-right: 12vw;
     }
 
-    @media (min-width: $bigLaptopWidth) {
+    @media (min-width: $laptopMinWidth) {
       padding-left: 15vw;
       padding-right: 15vw;
     }
+
+    @media (min-width: $bigLaptopWidth) {
+      padding-left: 24vw;
+      padding-right: 24vw;
+    }
   }
 
   :global(body > div) {