Issue #60: Improvements to FooterOS: links, icons, layout, and responsive design

Author: ALRubinger

src/components/blockopensource/FooterBlockOS.astro

@@ -11,33 +11,40 @@ const currentYear = new Date().getFullYear();
 const copyrightText = footerBlockOSData.copyright || `© ${currentYear} ${footerBlockOSData.companyName}. All rights reserved.`;
 ---
 
-<footer class="site-footer variant-default">
-  <div class="container mx-auto px-6">
-    <div class="footer-main">
-      <div class="footer-brand-section">
+<footer class="bg-background border-t border-border mt-auto py-16 md:py-12 sm:py-8 pb-8 md:pb-6 sm:pb-6">
+  <div class="container mx-4 sm:mx-6 md:mx-2 lg:mx-auto" style="max-width: min(100%, 100ch);">
+    <div class="flex flex-col lg:flex-row lg:items-start gap-8 lg:gap-0 mb-12 md:mb-8">
+      <!-- Block Logo and Name - Left Side -->
+      <div class="flex-shrink-0 lg:pl-0">
         {footerBlockOSData.logo && (
-          <div class="footer-logo w-16 h-16">
-            <Icon name={footerBlockOSData.logo}/>
-            <div class="mx-2.5">{footerBlockOSData.companyName}</div>
+          <div class="flex items-center gap-2.5">
+            <div class="w-24 h-24">
+              <Icon name={footerBlockOSData.logo}/>
+            </div>
+            <div class="text-xl font-semibold text-foreground">{footerBlockOSData.companyName}</div>
           </div>
         )}
       </div>
 
+      <!-- Flex spacer to push navigation to the right -->
+      <div class="hidden lg:flex lg:flex-1"></div>
+      
+      <!-- Navigation Sections - Better responsive layout -->
       {footerBlockOSData.sections.length > 0 && (
-        <div class="footer-sections">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-6 lg:flex lg:gap-6 lg:flex-row ml-28 sm:ml-28 lg:ml-0">
           {footerBlockOSData.sections.map((section) => (
-            <div class="footer-section">
-              <h4 class="section-title">{section.title}</h4>
-              <ul class="section-links">
+            <div class="flex flex-col gap-4 lg:max-w-32 lg:flex-shrink lg:flex-grow-0">
+              <h4 class="text-sm font-semibold text-foreground m-0 whitespace-nowrap">{section.title}</h4>
+              <ul class="list-none p-0 m-0 flex flex-col gap-3">
                 {section.links.map((link) => (
                   <li>
                     <a 
                       href={link.href}
                       {...(link.external && { target: '_blank', rel: 'noopener noreferrer' })}
-                      class="footer-link"
+                      class="text-sm text-muted-foreground no-underline transition-colors duration-200 flex items-center gap-2 hover:text-foreground whitespace-nowrap"
                     >
                       {link.icon && (
-                        <Icon name={link.icon} class="footer-link-icon" />
+                        <Icon name={link.icon} class="w-5 h-5 flex-shrink-0" />
                       )}
                       <span>{link.title}</span>
                     </a>
@@ -51,178 +58,13 @@ const copyrightText = footerBlockOSData.copyright || `© ${currentYear} ${footer
     </div>
 
     <!-- Footer Bottom -->
-    <div class="footer-bottom">
-      <div class="footer-separator"></div>
-      <div class="footer-bottom-content">
-        <div class="copyright">
+    <div class="mt-8">
+      <div class="h-px bg-border mb-8"></div>
+      <div class="flex justify-between items-center gap-4 md:flex-col md:text-center md:gap-6">
+        <div class="text-sm text-muted-foreground">
           {copyrightText}
         </div>
       </div>
     </div>
   </div>
-</footer>
-
-<style>
-  .site-footer {
-    background: hsl(var(--background));
-    border-top: 1px solid hsl(var(--border));
-    margin-top: auto;
-  }
-  
-  .site-footer.variant-default {
-    padding: 4rem 0 2rem;
-  }
-  
-  /* Main Footer Content */
-  .footer-main {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 4rem;
-    margin-bottom: 3rem;
-  }
-  
-  /* Company Section */
-  .footer-brand-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-  
-  .footer-logo img {
-    height: 96px;
-    width: 96px;
-  }
-  
-  .company-name {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: hsl(var(--foreground));
-    margin: 0;
-  }
-  
-  .company-description {
-    font-size: 0.875rem;
-    color: hsl(var(--muted-foreground));
-    line-height: 1.5;
-    margin: 0;
-  }
-  
-  /* Navigation Sections */
-  .footer-sections {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 2rem;
-  }
-  
-  .footer-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .section-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: hsl(var(--foreground));
-    margin: 0;
-  }
-  
-  .section-links {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  
-  .footer-link {
-    font-size: 0.875rem;
-    color: hsl(var(--muted-foreground));
-    text-decoration: none;
-    transition: color 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  
-  .footer-link:hover {
-    color: hsl(var(--foreground));
-  }
-  
-  .footer-link-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
-  }
-  
-  /* Footer Bottom */
-  .footer-bottom {
-    margin-top: 2rem;
-  }
-  
-  .footer-separator {
-    height: 1px;
-    background: hsl(var(--border));
-    margin-bottom: 2rem;
-  }
-  
-  .footer-bottom-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
-  }
-  
-  .copyright {
-    font-size: 0.875rem;
-    color: hsl(var(--muted-foreground));
-  }
-  
-  /* Responsive Design */
-  @media (max-width: 1024px) {
-    .footer-main {
-      grid-template-columns: 1fr;
-      gap: 3rem;
-    }
-    
-    .footer-sections {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-  
-  @media (max-width: 768px) {
-    .site-footer.variant-default {
-      padding: 3rem 0 1.5rem;
-    }
-    
-    .footer-main {
-      gap: 2rem;
-      margin-bottom: 2rem;
-    }
-    
-    .footer-sections {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
-    
-    .footer-bottom-content {
-      flex-direction: column;
-      text-align: center;
-      gap: 1.5rem;
-    }
-    
-
-  }
-  
-  @media (max-width: 640px) {
-    .container {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    
-    .footer-brand-section {
-      text-align: center;
-    }
-  }
-</style>
+</footer>

src/components/blockopensource/footer-blockos.ts

@@ -26,32 +26,33 @@ export const footerBlockOSData: FooterBlockOSData = {
     {
       title: "Company",
       links: [
-        { title: "News", href: "https://block.xyz/news" },
-        { title: "Careers", href: "https://block.xyz/careers/jobs" },
-        { title: "Open Source", href: "https://block.xyz/open-source" },
-        { title: "Investors", href: "https://investors.block.xyz/overview/default.aspx?_gl=1*1ho038u*_ga*MTcxNDUxMjk5Ni4xNzU1NjI2MzM1*_ga_EM11G73CS9*czE3NTU2NDU2MTAkbzMkZzEkdDE3NTU2NDU4NDYkajYwJGwwJGgw"},
-        { title: "Media Kit", href: "https://block.xyz/mediakit"},
-        { title: "Legal", href: "https://block.xyz/legal"},
-        { title: "Privacy", href: "https://block.xyz/legal/privacy-notice"},
+        { title: "News", external: true, href: "https://block.xyz/news" },
+        { title: "Careers", external: true, href: "https://block.xyz/careers/jobs" },
+        { title: "Open Source", external: true, href: "https://block.xyz/open-source" },
+        { title: "Investors", external: true, href: "https://investors.block.xyz/overview/default.aspx?_gl=1*1ho038u*_ga*MTcxNDUxMjk5Ni4xNzU1NjI2MzM1*_ga_EM11G73CS9*czE3NTU2NDU2MTAkbzMkZzEkdDE3NTU2NDU4NDYkajYwJGwwJGgw"},
+        { title: "Media Kit", external: true, href: "https://block.xyz/mediakit"},
+        { title: "Legal", external: true, href: "https://block.xyz/legal"},
+        { title: "Privacy", external: true, href: "https://block.xyz/legal/privacy-notice"},
       ]
     },
     {
       title: "Brands",
       links: [
-        { title: "Square", href: "javascript:void(null);", icon: "block-open-source/brands/square" },
-        { title: "Cash App", href: "javascript:void(null);", icon: "block-open-source/brands/cash-app" },
-        { title: "Afterpay", href: "javascript:void(null);", icon: "block-open-source/brands/afterpay" },
-        { title: "Tidal", href: "javascript:void(null);", icon: "block-open-source/brands/tidal" },
-        { title: "Bitkey", href: "javascript:void(null);", icon: "block-open-source/brands/bitkey" },
-        { title: "Proto", href: "javascript:void(null);", icon: "block-open-source/proto" },
+        { title: "Square", href: "https://squareup.com/", external: true, icon: "block-open-source/brands/square" },
+        { title: "Cash App", href: "https://cash.app/", external: true, icon: "block-open-source/brands/cash-app" },
+        { title: "Afterpay", href: "https://afterpay.com/", external: true, icon: "block-open-source/brands/afterpay" },
+        { title: "Tidal", href: "https://tidal.com/", external: true, icon: "block-open-source/brands/tidal" },
+        { title: "Bitkey", href: "https://bitkey.world/", external: true, icon: "block-open-source/brands/bitkey" },
+        { title: "Proto", href: "https://proto.xyz/", external: true, icon: "block-open-source/brands/proto" },
       ]
     },
     {
       title: "Social",
       links: [
-        { title: "X (Twitter)", href: "https://twitter.com/block", external: true, icon: "block-open-source/x-twitter" },
+        { title: "X (Twitter)", href: "https://x.com/blockopensource", external: true, icon: "x-twitter" },
         { title: "GitHub", href: "https://github.com/block", external: true, icon: "octicon-github" },
-        { title: "LinkedIn", href: "https://linkedin.com/company/block", external: true, icon: "block-open-source/linkedin" },
+        { title: "LinkedIn", href: "https://www.linkedin.com/company/block-opensource", external: true, icon: "linkedin" },
+        { title: "Discord", href: "https://discord.gg/block-opensource", external: true, icon: "discord" },
       ]
     }
   ],

src/icons/block-open-source/brands/proto.svg

@@ -21,8 +21,6 @@
 
 
 import BaseLayout from "./BaseLayout.astro";
-import ContentSectionOpen from "@/components/block/ContentSectionOpen.astro";
-import ContentSectionClose from "@/components/block/ContentSectionClose.astro";
 import type { MarkdownHeading } from 'astro';
 import TableOfContents from "@/components/docs/TableOfContents.astro";
 import { Breadcrumbs } from "astro-breadcrumbs";
@@ -73,7 +71,7 @@ const { title, description, headings, showTitleAsH1 = true, showBreadcrumbs = tr
       )}
 
       <main class="min-w-0 py-8 px-10 xl:px-6 lg:px-6 md:px-4">
-        <div class="prose prose-slate dark:prose-invert mx-auto"style="max-width: min(100%, 100ch);">
+        <div id="mainContent" class="prose prose-slate dark:prose-invert mx-auto" style="max-width: min(100%, 100ch);">
 
           {/** Breadcrumbs */}
           {showBreadcrumbs && (

src/icons/block-open-source/brands/tbd.svg

@@ -8,8 +8,6 @@ import FeaturedProjects from "@/components/blockopensource/FeaturedProjects.astr
 import OpenSourceContributions from "@/components/blockopensource/OpenSourceContributions.astro";
 import GovernanceAndStandards from "@/components/blockopensource/GovernanceAndStandards.astro";
 import Participate from "@/components/blockopensource/Participate.astro";
-import FooterBlockOS from "@/components/blockopensource/FooterBlockOS.astro";
-
 
 const pageTitle = "Block - Open Source";
 const title = "Our Vision for Open Source";