fix: css tweaks

pmndrs · Aug 27, 2024 · 727e45a · 727e45a
1 parent 5b58312
commit 727e45a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -21,6 +21,13 @@ body {
 @tailwind utilities;
 /* Stop purging. */
 
+@layer utilities {
+  img,
+  .img {
+    @apply bg-surface-container inline-block rounded-lg;
+  }
+}
+
 /* Your own custom utilities */
 @supports (position: sticky) {
   @media (min-width: theme('screens.lg')) {
@@ -37,6 +44,10 @@ body {
   scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
 }
 
+details {
+  @apply my-4;
+}
+
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
  * Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs

diff --git a/src/components/mdx/Codesandbox/Codesandbox.tsx b/src/components/mdx/Codesandbox/Codesandbox.tsx
@@ -42,7 +42,6 @@ export function Codesandbox({
         >
           {screenshot_url && (
             <Image
-              className="bg-surface-container rounded-lg"
               src={screenshot_url}
               placeholder="empty"
               alt={title}

diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
@@ -84,16 +84,9 @@ export const a = ({ href, target, rel, ...props }: ComponentProps<'a'>) => {
   return <a {...props} href={href} target={target} rel={rel} className="text-primary" />
 }
 
-export const img = ({ src, alt, className, ...rest }: ComponentProps<'img'>) => (
+export const img = ({ src, alt = '', ...props }: ComponentProps<'img'>) => (
   // eslint-disable-next-line @next/next/no-img-element
-  <img
-    src={src}
-    decoding="async"
-    loading="lazy"
-    alt={alt}
-    className={cn('bg-surface-container inline-block', className)}
-    {...rest}
-  />
+  <img src={src} decoding="async" loading="lazy" alt={alt} {...props} />
 )
 
 export const code = (props: ComponentProps<'code'>) => (