Misc fixes

DaniGuardiola · Jun 20, 2024 · a8e13e4 · a8e13e4
1 parent 2811ff9
commit a8e13e4
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/src/components/MDXContent/code.sass b/src/components/MDXContent/code.sass
@@ -4,9 +4,12 @@
     @apply font-fira-code px-[.4em] py-[.2em] text-[85%] rounded-md bg-black/10 dark:bg-white/20
 
   // code block (```code```)
+  & blockquote pre
+    @apply dark:bg-white dark:bg-opacity-[.03]
+
   & pre
     @apply article-rounded
-    @apply flex font-fira-code -mx-4 my-[1.25em] px-4 py-6 bg-neutral-800 text-black overflow-x-auto
+    @apply flex font-fira-code -mx-4 my-[1.25em] px-4 py-6 bg-neutral-800 text-subtle-white
 
     & .code-container
       @apply grow

diff --git a/src/components/MDXContent/styles.sass b/src/components/MDXContent/styles.sass
@@ -53,7 +53,7 @@
     @apply relative overflow-hidden bg-gray-200 dark:bg-neutral-800 font-roboto-slab -mx-4 py-4 px-8 my-[1.25em]
 
     &::before
-      @apply content-[""] absolute inset-y-0 left-0 w-2 bg-gray-500 dark:bg-neutral-800
+      @apply content-[""] absolute inset-y-0 left-0 w-2 bg-gray-500 dark:bg-neutral-700
 
     & > *
       @apply first:mt-0 last:mb-0

diff --git a/src/root.tsx b/src/root.tsx
@@ -76,7 +76,7 @@ function Header() {
     <header
       class="fixed z-20 inset-x-0 top-0 select-none transition-[height,background-color] flex items-center overflow-hidden"
       classList={{
-        "h-[5rem] sm:h-[11.25rem] bg-white/95 dark:bg-neutral-900":
+        "h-[5rem] sm:h-[11.25rem] bg-white/95 dark:bg-neutral-900/95":
           !headerScrolled(),
         "h-[3.5rem] sm:h-[4.5rem] bg-white/80 dark:bg-neutral-900/80":
           headerScrolled(),

diff --git a/src/routes/article/the-open-closed-component-part-1/index.mdx b/src/routes/article/the-open-closed-component-part-1/index.mdx
@@ -315,7 +315,7 @@ Not only that but since both libraries follow the same principles, you can mix a
 
 Below, I've rewritten the example replacing the Radix tooltip and the custom button with Ariakit components.
 
-```jsx {2-6}
+```jsx {2-8}
 <RadixDialog.Root>
   <Ariakit.TooltipProvider>
     <Ariakit.TooltipAnchor
@@ -324,7 +324,7 @@ Below, I've rewritten the example replacing the Radix tooltip and the custom but
           <Ariakit.Button>Open dialog</Ariakit.Button>
         </RadixDialog.Trigger>
       }
-    ></Ariakit.TooltipAnchor>
+    />
     <Tooltip.Portal>...</Tooltip.Portal>
   </Ariakit.TooltipProvider>