Code cleanup:

* Moved new classes from global.css into their components to limit their impact and scope creep of the global styles
* Moved Block Open Source components from block to blockopensource as these are more part of the open source site and not the Kickstarter
* Replaced CSS classes with Tailwind equivalents

Author: ALRubinger

src/components/block/ExternalLinkCard.astro

@@ -1,7 +1,6 @@
 ---
 
 import ContentSection from '@/components/block/ContentSection.astro';
-import Icon from './Icon.astro';
 
 interface Props {
   title: string;
@@ -25,7 +24,7 @@ const {
                     href={href}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="external-link-title"
+                    class="text-current underline decoration-current transition-colors duration-200 hover:text-[var(--hover-text-color)]"
                 >
                     {title}
                 </a>
@@ -35,4 +34,5 @@ const {
             </p>
         </div>
     </div>
-</ContentSection>
+</ContentSection>
+

src/components/block/GovernanceCard.astro

@@ -1,6 +1,6 @@
 ---
 import { governanceLinks } from './governance-links';
-import GovernanceLinkSection from '@/components/block/GovernanceLinkSection.astro';
+import GovernanceLinkSection from '@/components/blockopensource/GovernanceLinkSection.astro';
 
 interface Props {
   className?: string;

src/components/blockopensource/GovernanceAndStandards.astro

@@ -0,0 +1,40 @@
+---
+
+import ContentSection from '@/components/block/ContentSection.astro';
+import Icon from '@/components/block/Icon.astro';
+
+interface Props {
+  title: string;
+  href: string;
+  description: string;
+}
+
+const { 
+  title,
+  href,
+  description
+} = Astro.props;
+---
+
+<ContentSection
+    hasDefaultInnerStyles={false}>
+    <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group h-full py-8 flex items-center justify-between no-underline transition-colors duration-200 cursor-pointer border-b border-[var(--default-color)] text-[var(--default-color)] hover:text-[var(--hover-border-color)]"
+    >
+        <div class="flex-1 mr-9 grid grid-cols-[200px_1fr] gap-10 items-center py-2">
+            <h4 class="text-left mt-0 mb-0 transition-colors duration-200 group-hover:text-[var(--hover-text-color)]">
+                {title}
+            </h4>
+            <h4 class="font-normal mt-0 mb-0 transition-colors duration-200 group-hover:text-[var(--hover-text-color)]">
+                {description}
+            </h4>
+        </div>
+        <div class="flex-shrink-0 transition-transform duration-200 group-hover:scale-120 group-hover:text-[var(--hover-text-color)]">
+            <Icon name="arrow-right" />
+        </div>
+    </a>
+</ContentSection>
+

src/components/blockopensource/GovernanceCard.astro

@@ -1,5 +1,5 @@
 ---
-import GovernanceCard from '@/components/block/GovernanceCard.astro';
+import GovernanceCard from '@/components/blockopensource/GovernanceCard.astro';
 
 export interface GovernanceLink {
   name: string;
@@ -28,7 +28,7 @@ const {
       <slot />
     </p>
     {subtitle && <h3 class="mt-15 mb-0">{subtitle}</h3>}
-    <div id="governance" class="mt-15 grid grid-cols-1 gap-y-0 pt-0 pb-6 md:pb-8">
+    <div class="mt-15 grid grid-cols-1 gap-y-0 pt-0 pb-6 md:pb-8 border-t border-[var(--default-color)]">
         {governanceLinks.map((governanceLink) => (
             <GovernanceCard 
               title={governanceLink.name}
@@ -38,3 +38,4 @@ const {
         ))}
     </div>
 </section>
+

…onents/block/GovernanceLinkSection.astro …ckopensource/GovernanceLinkSection.astrosrc/components/block/GovernanceLinkSection.astro renamed to src/components/blockopensource/GovernanceLinkSection.astro src/components/block/GovernanceLinkSection.astro renamed to src/components/blockopensource/GovernanceLinkSection.astro

@@ -72,3 +72,17 @@ const description = "At Block, we believe open source is at the heart of innovat
 
 </ContentPageLayout>
 
+<style>
+  /* Content width utility class */
+  .content-width-responsive {
+    @apply w-full;
+  }
+
+  @media (min-width: theme('screens.md')) {
+    .content-width-responsive {
+      width: var(--content-width-responsive); /* 4/5 on md+ */
+      background-color: blue;
+    }
+  }
+</style>
+

src/pages/block-open-source/index.astro

@@ -589,46 +589,4 @@
   .group:hover .group-hover\:text-black {
     color: black;
   }
-
-  /* Governance card styles */
-  #governance {
-    border-top: 1px solid var(--default-color);
-  }
-  
-  .governance-card {
-    border-bottom: 1px solid var(--default-color);
-    color: var(--default-color); 
-  }
-  
-  .governance-card:hover {
-    color: var(--hover-border-color);
-  }
-  
-  .governance-card:hover .governance-text,
-  .governance-card:hover .governance-icon {
-    color: var(--hover-text-color);
-  }
-
-  /* External link card title styles */
-  .external-link-title {
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: currentColor;
-    transition: color 0.2s ease;
-  }
-
-  .external-link-title:hover {
-    color: var(--hover-text-color);
-  }
-
-  /* Content width utility class */
-  .content-width-responsive {
-    width: 100%; /* Full width on mobile */
-  }
-
-  @media (width >= --theme(--breakpoint-md)) {
-    .content-width-responsive {
-      width: var(--content-width-responsive); /* 4/5 on md+ */
-    }
-  }
 }