From 32ba9bdbd4ac08626f38cbb5c5e5a2cd697457bc Mon Sep 17 00:00:00 2001
From: Joshua Melville <joshua.melville@northwestern.edu>
Date: Wed, 14 Aug 2024 13:08:27 +0200
Subject: [PATCH 1/3] add styles for code blocks

---
 apps/documentation/components/PopoutBox.tsx            | 8 +++++---
 apps/documentation/components/customComponents/Pre.tsx | 6 ++++--
 apps/documentation/styles/globals.css                  | 5 ++++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/documentation/components/PopoutBox.tsx b/apps/documentation/components/PopoutBox.tsx
index 2b497fbd..1a1a815c 100644
--- a/apps/documentation/components/PopoutBox.tsx
+++ b/apps/documentation/components/PopoutBox.tsx
@@ -20,15 +20,17 @@ 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',
+        'my-5',
+        'md:mt-10', // additional margin when icon is shown
+        'mx-0 flex items-center gap-2 rounded-lg bg-card p-4 text-base-sm',
+        'md:relative md:mx-8 md:gap-0 md:px-10 md:py-8',
         className,
       )}
     >
       {icon && (
         <div
           className={cn(
-            'flex h-12 w-12 shrink-0 scale-75 items-center justify-center rounded-full bg-foreground shadow-md',
+            'hidden h-12 w-12 shrink-0 scale-75 items-center justify-center rounded-full bg-foreground shadow-md md:flex',
             'md:absolute md:-left-6 md:-top-4 md:scale-100',
             iconClassName,
           )}
diff --git a/apps/documentation/components/customComponents/Pre.tsx b/apps/documentation/components/customComponents/Pre.tsx
index 480c352a..1e39fba3 100644
--- a/apps/documentation/components/customComponents/Pre.tsx
+++ b/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">
+      <pre {...props} className="[&_code]:bg-transparent">
+        {children}
+      </pre>
       {raw && <CodeCopyButton code={raw} />}
     </div>
   );
diff --git a/apps/documentation/styles/globals.css b/apps/documentation/styles/globals.css
index c5ffbb5e..e41ad16b 100644
--- a/apps/documentation/styles/globals.css
+++ b/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;
   }
 }
 

From 4d05a68a30175381b10fa999b0176e8a98a0cb3c Mon Sep 17 00:00:00 2001
From: Joshua Melville <joshua.melville@northwestern.edu>
Date: Wed, 14 Aug 2024 13:35:25 +0200
Subject: [PATCH 2/3] use container queries to better handle show/hide of tip
 box icon

---
 apps/documentation/components/PopoutBox.tsx   | 27 +++++++++----------
 .../components/TableOfContents.tsx            |  2 +-
 apps/documentation/components/article.tsx     |  2 +-
 .../components/customComponents/Pre.tsx       |  2 +-
 apps/documentation/package.json               |  1 +
 apps/documentation/tailwind.config.ts         |  3 ++-
 pnpm-lock.yaml                                | 11 ++++++++
 7 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/apps/documentation/components/PopoutBox.tsx b/apps/documentation/components/PopoutBox.tsx
index 1a1a815c..189e11f3 100644
--- a/apps/documentation/components/PopoutBox.tsx
+++ b/apps/documentation/components/PopoutBox.tsx
@@ -20,32 +20,31 @@ const PopoutBox = ({
   return (
     <aside
       className={cn(
-        'my-5',
-        'md:mt-10', // additional margin when icon is shown
-        'mx-0 flex items-center gap-2 rounded-lg bg-card p-4 text-base-sm',
-        'md:relative md:mx-8 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:mt-10', // additional margin when icon is shown
+        '@2xl/article:mx-8 @2xl/article:px-8 @2xl/article:py-6',
         className,
       )}
     >
       {icon && (
         <div
           className={cn(
-            'hidden h-12 w-12 shrink-0 scale-75 items-center justify-center rounded-full bg-foreground shadow-md md:flex',
-            '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>
   );
 };
diff --git a/apps/documentation/components/TableOfContents.tsx b/apps/documentation/components/TableOfContents.tsx
index d8ddd296..aa46e8d3 100644
--- a/apps/documentation/components/TableOfContents.tsx
+++ b/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',
diff --git a/apps/documentation/components/article.tsx b/apps/documentation/components/article.tsx
index 7e674768..91d624a3 100644
--- a/apps/documentation/components/article.tsx
+++ b/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}</>}
diff --git a/apps/documentation/components/customComponents/Pre.tsx b/apps/documentation/components/customComponents/Pre.tsx
index 1e39fba3..e00c550f 100644
--- a/apps/documentation/components/customComponents/Pre.tsx
+++ b/apps/documentation/components/customComponents/Pre.tsx
@@ -7,7 +7,7 @@ type PreProps = React.HTMLAttributes<HTMLPreElement> & {
 
 const Pre = ({ raw, children, ...props }: PreProps) => {
   return (
-    <div className="group relative my-5 overflow-hidden rounded-xl bg-rich-black">
+    <div className="group relative my-5 overflow-hidden rounded-xl bg-rich-black last:mb-0">
       <pre {...props} className="[&_code]:bg-transparent">
         {children}
       </pre>
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
index 34e13cbd..b4317994 100644
--- a/apps/documentation/package.json
+++ b/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",
diff --git a/apps/documentation/tailwind.config.ts b/apps/documentation/tailwind.config.ts
index 86481fe9..c8121580 100644
--- a/apps/documentation/tailwind.config.ts
+++ b/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;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 013ab65f..811a67af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,6 +195,9 @@ importers:
       '@t3-oss/env-nextjs':
         specifier: ^0.10.1
         version: 0.10.1(typescript@5.5.4)(zod@3.23.8)
+      '@tailwindcss/container-queries':
+        specifier: ^0.1.1
+        version: 0.1.1(tailwindcss@3.4.10)
       '@vercel/analytics':
         specifier: ^1.3.1
         version: 1.3.1(next@14.2.5)(react@18.3.1)
@@ -3890,6 +3893,14 @@ packages:
       zod: 3.23.8
     dev: false
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.10):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.4.10
+    dev: false
+
   /@tailwindcss/typography@0.5.14(tailwindcss@3.4.10):
     resolution: {integrity: sha512-ZvOCjUbsJBjL9CxQBn+VEnFpouzuKhxh2dH8xMIWHILL+HfOYtlAkWcyoon8LlzE53d2Yo6YO6pahKKNW3q1YQ==}
     peerDependencies:

From 002694dca41f2d012ee0a90ed7e53ca6ec6f199c Mon Sep 17 00:00:00 2001
From: Joshua Melville <joshua.melville@northwestern.edu>
Date: Wed, 14 Aug 2024 13:36:22 +0200
Subject: [PATCH 3/3] merge styles

---
 apps/documentation/components/PopoutBox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/documentation/components/PopoutBox.tsx b/apps/documentation/components/PopoutBox.tsx
index 189e11f3..f353cd24 100644
--- a/apps/documentation/components/PopoutBox.tsx
+++ b/apps/documentation/components/PopoutBox.tsx
@@ -21,8 +21,8 @@ const PopoutBox = ({
     <aside
       className={cn(
         'relative mx-0 my-5 max-w-full rounded-lg bg-card px-8 py-6 text-base-sm',
-        '@2xl/article:mt-10', // additional margin when icon is shown
-        '@2xl/article:mx-8 @2xl/article:px-8 @2xl/article:py-6',
+        '@2xl/article:mx-8 @2xl/article:mt-10', // additional margin when icon is shown
+        '@2xl/article:px-8 @2xl/article:py-6',
         className,
       )}
     >