Polish to OSS friends (#4648)

* Polish to OSS friends

* Additional polish

* Design polish

Author: karlcarstensen

docs-starlight/src/components/dv-OpenSourceCard.astro

@@ -5,26 +5,31 @@ import { Image } from 'astro:assets';
 const { icon, title, description, href } = Astro.props;
 ---
 
-<a href={href} 
-    class="group relative flex w-full items-center border border-dashed border-[var(--color-gray-3)] px-8 py-6 bg-[#FAFAFA] hover:bg-white hover:cursor-pointer transition-colors duration-200"
-    target="_blank"
-    rel="noopener noreferrer"
+<a
     aria-label={`Learn more about ${title}`}
+    class="opensourcecard group relative flex w-full items-start border border-dashed border-[var(--color-gray-3)] px-4 py-4 lg:px-8 lg:py-8 bg-[#FAFAFA] no-underline hover:bg-white hover:cursor-pointer transition-colors duration-200"
+    href={href}
+    rel="noopener noreferrer"
+    target="_blank"
 >
-    <div class="flex flex-col items-start gap-3">
-        <div class="flex gap-1.5 items-center">
-            <Image 
-                src={icon}
-                alt={`${title} Icon`}
-                class="w-6 h-6"
-            />
-            <p class="text-lg font-semibold text-[var(--color-dark-blue-1)]">{title}</p>
-        </div>
-        <p class="text-sm font-sans text-[var(--color-gray-1)]">{description}</p>
-    </div>
-    <div class="absolute right-8 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transform transition-opacity duration-200">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
-        </svg>
+    <div class="grid grid-cols-[1fr_24px] gap-1 w-full">
+      <div class="flex flex-col gap-4 items-start">
+          <div class="flex gap-1.5 items-center">
+              <Image
+                  alt={`${title} Icon`}
+                  class="w-6 h-6"
+                  src={icon}
+              />
+              <p class="text-lg font-semibold text-[var(--color-dark-blue-1)] m-0">{title}</p>
+          </div>
+          <p class="text-sm font-sans text-[var(--color-gray-1)] m-0">{description}</p>
+      </div>
+      <div class="flex items-center justify-end">
+          <div class="opacity-0 group-hover:opacity-100 transform transition-opacity duration-200">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
+              </svg>
+          </div>
+      </div>
     </div>
 </a>

docs-starlight/src/styles/global.css

@@ -444,15 +444,23 @@ p code {
 }
 
 #starlight__sidebar ul li {
-  margin: 0;    
+  margin: 0;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
 }
 
 #starlight__sidebar ul li ul li {
-  padding-left: 1em; 
+  padding-left: 1em;
 }
 
 #starlight__sidebar details summary {
   padding-left: 0;
-}
+}
+
+.opensourcecard {
+  border-left: 0;
+}
+
+.opensourcecard:last-child {
+  border-right: 0;
+}