fix(site): shrink Aside and Blockquote child margins

site/TODO.md

@@ -7,6 +7,6 @@ not comprehensive. just the things I'm worried about forgetting
 - a11y audit. some of those colors are sus.
 - animations
 - docs features
-  - copy code blocks
+  - /docs/[slug] redirect ("share this guide")
 - search
-- update docs following dev
+- update READMEs following dev

site/src/components/Aside.astro

@@ -58,8 +58,8 @@ const renderTitle = title ?? defaultTitles[type];
       />
     </div>
     <div class="flex-1 min-w-0">
-      <p class="text-md font-semibold mb-2 text-black dark:text-white">{renderTitle}</p>
-      <div class="prose prose-sm max-w-none text-black dark:text-white [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+      <p class="text-md font-semibold mb-2">{renderTitle}</p>
+      <div class="[&>.my-6]:my-2 [&>.my-12]:my-4 [&>*:last-child]:!mb-0">
         <slot />
       </div>
     </div>

site/src/components/typography/Blockquote.astro

@@ -12,7 +12,14 @@ const { as: Tag = 'blockquote', maxWidth = true, class: className, ...props } =
 ---
 
 <Tag
-  class={twMerge(clsx('border-l border-light-40 pl-5 my-10', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(
+    clsx(
+      'border-l border-light-40 pl-6 my-12',
+      '[&>.my-6]:my-2 [&>.my-12]:my-4 [&>*:last-child]:!mb-0',
+      maxWidth && 'max-w-3xl mx-auto',
+    ),
+    className,
+  )}
   {...props}
 >
   <slot />

site/src/content/docs/how-to/write-guides.mdx

@@ -275,7 +275,9 @@ Your content. You can use **markdown** in here, too.
 </Aside>
 
 <Aside type="danger">
-Your content. You can use **markdown** in here, too.
+Of course it works with longer content as well. Even things that have multiple elements!
+
+The elements have a gross Tailwind class that manages their margins which makes them tighter in this context. Neat!
 </Aside>
 
 ## Code and Code Frames