fix: fix some styling (#1201)

unionlabs · Jan 25, 2024 · a61c8af · a61c8af
2 parents af954cd + e0bbe78
commit a61c8af
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/site/src/components/CodeSnippet.svelte b/site/src/components/CodeSnippet.svelte
@@ -16,17 +16,13 @@
   onMount(async () => (highlightedCode = await highlightCode(code)))
 </script>
 
-<div class="">
+<div class="code-snippet">
   {@html highlightedCode}
 </div>
 
 <style>
-  :global(.container > figure[data-rehype-pretty-code-figure] span[data-line]) {
-    overflow-x: scroll;
-    max-width: 100%;
-    width: 100%;
-    font-size: 0.75rem; /* 12px */
-    line-height: 1rem; /* 16px */
+  :global(.code-snippet > figure[data-rehype-pretty-code-figure] > pre) {
+    background-color: black !important;
   }
 
   @media (max-width: 400px) {

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -110,7 +110,7 @@ publishedBlogPosts.reverse()
               {
                 codeSnippets.map(snippet => (
                   <TabItem label={snippet.title}>
-                    <div class='px-1 w-full'>
+                    <div class='pl-1 w-full'>
                       <CodeSnippet
                         code={snippet.code}
                         client:load
@@ -122,7 +122,7 @@ publishedBlogPosts.reverse()
             </Tabs>
           </div>
           <div
-            class='antialiased bg-[#1f1f1f] hidden md:show md:h-px'
+            class='antialiased bg-[#1f1f1f] sm: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'>
@@ -311,6 +311,7 @@ publishedBlogPosts.reverse()
   }
 
   a[role='tab'] {
+    border-bottom-width: 1px !important;
     border-color: transparent !important;
     padding-bottom: 5px !important;
     padding-top: 5px !important;