Fix images, fix diagram invert on dark mode, remove Cantina docs

.serena/memories/diagram-image-styling.md

@@ -0,0 +1,20 @@
+# Diagram Image Styling in Fern
+
+## Usage
+```jsx
+<Frame caption="Title">
+  <img class="diagram" src="/assets/images/path/diagram.webp" alt="Alt" />
+</Frame>
+```
+
+## How It Works
+- **Unzoomed light**: white background
+- **Unzoomed dark**: transparent background + `invert(1) hue-rotate(180deg)`
+- **Zoomed light**: white background on img
+- **Zoomed dark**: `#0c1624` background on modal container + transparent img + inversion
+
+## Key Constraints
+- **rmiz strips classes** when cloning images, so zoomed diagrams use `img[src*="diagram"]` path selector
+- **CSS filters apply to backgrounds too** - can't put bg on same element as filter without it being inverted
+- **No wrapper element** between `[data-rmiz-modal-content]` and img, so dark bg must go on full-screen container
+- **Diagram images must have "diagram" in filename** for zoom styling to work

CLAUDE.md

@@ -20,8 +20,12 @@ Once installed, you can use Serena tools like `list_memories` and `read_memory`
 ```
 fern/
 ├── docs.yml           # Main docs configuration
+├── styles.css         # Custom CSS styles
+├── assets/            # Static assets (logos, favicon, images)
+│   ├── images/        # All documentation images (use /assets/images/ paths)
+│   └── *.svg, *.png   # Logo and favicon files
 ├── docs/              # Shared documentation components
-├── images/            # All images (use /images/ paths)
+│   └── fonts/         # Custom fonts
 ├── openapi-specs/     # OpenAPI specifications
 └── products/          # Product-specific documentation
     ├── home/
@@ -42,7 +46,7 @@ apply these conversions:
 
 | Docusaurus | Fern |
 |------------|------|
-| `className=` | `class=` |
+| `className=` | `class=` (but `className` also works and is preferred for Frame) |
 | `<Tooltips>` | `<Tooltip>` |
 
 ### Remove Docusaurus Imports
@@ -100,26 +104,26 @@ Delete all import lines for:
 
 ### Image Paths
 
-Images from the old Docusaurus site were bulk migrated to `/fern/images/`.
+Images from the old Docusaurus site were bulk migrated to `/fern/assets/images/`.
 
 In Docusaurus, images could be referenced via:
 - `@image/` shorthand (pointed to the images directory)
 - `/img/` paths (pointed to Docusaurus' `/static/img/` directory, rarely used)
 
-In Fern, all images live in `/fern/images/` and are referenced via `/images/...`:
+In Fern, all images live in `/fern/assets/images/` and are referenced via `/assets/images/...`:
 
 ```md
 // BEFORE (Docusaurus)
 ![Alt text](@image/diagram.png)
 ![Alt text](/img/screenshot.webp)
 
 // AFTER (Fern)
-![Alt text](/images/diagram.png)
-![Alt text](/images/img/screenshot.webp)
+![Alt text](/assets/images/diagram.png)
+![Alt text](/assets/images/img/screenshot.webp)
 ```
 
 When migrating new content,
-ensure the referenced images exist in `/fern/images/`.
+ensure the referenced images exist in `/fern/assets/images/`.
 If not, copy them from the source and update paths accordingly.
 
 ### Admonition / Callout Syntax
@@ -366,7 +370,15 @@ Container for images with optional captions and backgrounds.
 </Frame>
 ```
 
-Props: `caption` (string), `background` (`"subtle"` | `"default"`)
+Props: `caption` (string), `background` (`"subtle"` | `"default"`), `className` (string)
+
+**Diagram images (dark mode support):**
+For diagrams that need color inversion in dark mode, add `class="diagram"` to the `<img>` element and ensure "diagram" is in the filename (required for zoom inversion since rmiz strips classes):
+```jsx
+<Frame caption="Architecture diagram">
+  <img class="diagram" src="/assets/images/my_diagram.webp" alt="Diagram" />
+</Frame>
+```
 
 ### Code Blocks