From 3c73f6a3abcefdca6bae41879194bf0d248bca90 Mon Sep 17 00:00:00 2001
From: benluelo <git@luelo.dev>
Date: Thu, 25 Jan 2024 00:10:11 -0500
Subject: [PATCH] fix: fix

---
 .../graphs/AppleGraphContainer.svelte         |  4 +-
 site/src/pages/index.astro                    | 40 +++++++++++--------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/site/src/components/graphs/AppleGraphContainer.svelte b/site/src/components/graphs/AppleGraphContainer.svelte
index d41f2fa2bf..c8dc63e02b 100644
--- a/site/src/components/graphs/AppleGraphContainer.svelte
+++ b/site/src/components/graphs/AppleGraphContainer.svelte
@@ -20,11 +20,11 @@
 	<div class="grid grid-cols-1 gap-4">
 		<div class="flex flex-col items-center text-accent text-semibold">
 			<div class="text-4xl sm:text-6xl">60x</div>
-			<div class="text-2xl sm:text-3xl -mt-2">faster</div>
+			<div class="text-2xl sm:text-3xl text-gray-200 -mt-2">faster</div>
 		</div>
 		<div class="flex flex-col items-center text-accent-900 text-semibold">
 			<div class="text-4xl sm:text-6xl">150x</div>
-			<div class="text-2xl sm:text-3xl -mt-2">cheaper</div>
+			<div class="text-2xl sm:text-3xl text-gray-200 -mt-2">cheaper</div>
 		</div>
 	</div>
 </div>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 828f41687c..9c4e1e7942 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -104,7 +104,7 @@ publishedBlogPosts.reverse()
         >
           <div
             id='code-snippets'
-            class='antialiased bg-[#050505] text-left font-monospace text-[15px] w-full sm:w-1/2'
+            class='antialiased bg-black text-left font-monospace text-[15px] w-full sm:w-1/2'
           >
             <Tabs>
               {
@@ -121,9 +121,12 @@ publishedBlogPosts.reverse()
               }
             </Tabs>
           </div>
-          <div class='flex flex-col gap-4 sm:p-8 p-4 sm:gap-8 items-center justify-center text-xl md:text-2xl font-normal text-gray-400 w-full sm:w-1/2'>
+          <div
+            class='antialiased bg-[#1f1f1f] hidden md:show md:h-px'
+          >
+          </div>
+          <div class='flex flex-col gap-4 sm:p-8 p-4 sm:gap-8 items-center justify-center text-xl md:text-2xl font-normal text-gray-400 w-full sm:w-1/2 md:border-b-2'>
             <p><span class="text-white">Union</span> is the only interoperability layer that solves the <span class="text-white">sovereign bridging trilemma.</span></p>
-
             <p><span class="text-accent">Trustless</span>: Union implements proper <span class="text-white">consensus-verification</span> and does not compromise on IBC's security guarantees.</p>
             <p><span class="text-accent">Decentralized</span>: Through CometBLS' hyper-efficient prover, <span class="text-white">proofs can be generated by anyone</span> rather than relying on large institutions.</p>
             <p><span class="text-accent">Permissionless</span>: Union's infrastructure allows for anyone to set up <span class="text-white">sovereign connections</span> to new networks.</p>
@@ -287,10 +290,10 @@ publishedBlogPosts.reverse()
 
 <style lang="postcss" is:inline>
 
-[data-line-numbers] {
-  /* display: none !important; */
-}
-ul[role='tablist'] {
+  [data-line-numbers] {
+    /* display: none !important; */
+  }
+  ul[role='tablist'] {
     border-bottom-color: transparent;
     font-family: monospace !important;
     width: 100%;
@@ -299,27 +302,31 @@ ul[role='tablist'] {
     }
   }
 
-li[role="presentation"]{
-  width: 100%;
-}
+  ul[role='tablist'] > li:first-child > a {
+    border-left: none !important;
+  }
+
+  li[role="presentation"]{
+    width: 100%;
+  }
 
   a[role='tab'] {
-border-color: transparent !important;
+    border-color: transparent !important;
     padding-bottom: 5px !important;
     padding-top: 5px !important;
     text-align: center;
     width: 100% !important;
-    border-left:  2px solid #0f0f0f !important;
+    border-left:  1px solid #1f1f1f !important;
     border-right: none !important;
   }
 
   a[role="tab"][tabIndex='-1'] {
     padding-bottom: 5px !important;
-    border-bottom-color: #0f0f0f !important;
+    border-bottom: 1px solid #1f1f1f !important;
+    border-left: none !important;
+    /* border-right:  2px solid #1f1f1f !important; */
     border-left: none !important;
-    /* border-right:  2px solid #0f0f0f !important; */
-border-left: none !important;
-    border-left: 2px solid #0f0f0f !important;
+    border-left: 1px solid #1f1f1f !important;
   }
 
   a[role='tab']::before {
@@ -328,6 +335,7 @@ border-left: none !important;
     height: 7px;
     filter: invert(1);
   }
+
 	.main-text {
 		max-width: 72rem;
 		font-size: 26px;