Merge pull request #51 from complexdatacollective/fix/code-blocks

Fix/code blocks

apps/documentation/components/PopoutBox.tsx

@@ -20,30 +20,31 @@ const PopoutBox = ({
   return (
     <aside
       className={cn(
-        'mx-0 mb-8 mt-10 flex items-center gap-2 rounded-lg bg-card p-4 text-base-sm',
-        'md:relative md:mx-8 md:mb-8 md:mt-10 md:gap-0 md:px-10 md:py-8',
+        'relative mx-0 my-5 max-w-full rounded-lg bg-card px-8 py-6 text-base-sm',
+        '@2xl/article:mx-8 @2xl/article:mt-10', // additional margin when icon is shown
+        '@2xl/article:px-8 @2xl/article:py-6',
         className,
       )}
     >
       {icon && (
         <div
           className={cn(
-            'flex h-12 w-12 shrink-0 scale-75 items-center justify-center rounded-full bg-foreground shadow-md',
-            'md:absolute md:-left-6 md:-top-4 md:scale-100',
+            '@2xl/article:flex hidden', // use container query to show/hide
+            'h-12 w-12 shrink-0 items-center justify-center rounded-full bg-foreground shadow-md',
+            'absolute -left-6 -top-4',
             iconClassName,
           )}
         >
           {icon}
         </div>
       )}
-      <div className="max-w-full flex-auto">
-        {title && (
-          <Heading variant="h4" className="mb-2">
-            {title}
-          </Heading>
-        )}
-        {children}
-      </div>
+
+      {title && (
+        <Heading variant="h4" className="!mt-0">
+          {title}
+        </Heading>
+      )}
+      {children}
     </aside>
   );
 };

apps/documentation/components/TableOfContents.tsx

@@ -34,7 +34,7 @@ const TOCLink = ({
       ref={ref}
       href={`#${node.id}`}
       className={cn(
-        'focusable my-2 block text-base transition-colors hover:text-accent',
+        'focusable my-2 block text-base-sm transition-colors hover:text-accent',
         sideBar && 'm-2 text-sm',
         node.level === 3 && 'ml-6 font-normal',
         sideBar && highlighted && 'font-semibold text-accent',

apps/documentation/components/article.tsx

@@ -28,7 +28,7 @@ export default function Article({
 
   return (
     <>
-      <article className="mx-4 mb-5 w-full max-w-[75ch] flex-1 overflow-y-hidden lg:mx-8 xl:mx-10 2xl:mx-20">
+      <article className="@container/article mx-4 mb-5 w-full max-w-[75ch] flex-1 overflow-y-hidden lg:mx-8 xl:mx-10 2xl:mx-20">
         <header>
           <Heading variant="h4-all-caps" margin="none" className="text-accent">
             {project} {section && <>🠖 {section}</>}

apps/documentation/components/customComponents/Pre.tsx

@@ -7,8 +7,10 @@ type PreProps = React.HTMLAttributes<HTMLPreElement> & {
 
 const Pre = ({ raw, children, ...props }: PreProps) => {
   return (
-    <div className="relative my-5 overflow-hidden rounded-xl group">
-      <pre {...props}>{children}</pre>
+    <div className="group relative my-5 overflow-hidden rounded-xl bg-rich-black last:mb-0">
+      <pre {...props} className="[&_code]:bg-transparent">
+        {children}
+      </pre>
       {raw && <CodeCopyButton code={raw} />}
     </div>
   );

apps/documentation/package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@vercel/analytics": "^1.3.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

apps/documentation/styles/globals.css

@@ -112,7 +112,10 @@
   }
 
   code {
-    @apply text-sm;
+    @apply text-base-sm;
+    @apply bg-rich-black/10 dark:bg-white/5;
+    @apply p-[0.2rem];
+    @apply rounded-sm;
   }
 }
 

apps/documentation/tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss';
 import typography from '@tailwindcss/typography';
+import containers from '@tailwindcss/container-queries';
 import sharedConfig from '@codaco/tailwind-config/fresco';
 
 const config: Pick<
@@ -15,7 +16,7 @@ const config: Pick<
     '../../packages/ui/src/**/*.{ts,tsx}', // UI package
   ],
   presets: [sharedConfig],
-  plugins: [typography],
+  plugins: [typography, containers],
 };
 
 export default config;