Improve breakout CSS

[Rich-Harris]

There's lots of places where our CSS could be given a facelift, but one of the biggest wins is probably to improve the way our breakouts look — I find these a bit too jarring...

...and even more so in dark mode:

And our new 'legacy mode' details don't mesh with them very well:

We also don't have a way to distinguish between different kinds of note. I think it would be nice to have something like this in our system, and I think it would be great if the legacy mode details looked consistent with them (notwithstanding the fact that they're toggleable, unlike other notes).

Speaking of legacy mode details, authoring-wise I think we should replace this...

<details class="legacy">
<summary>Legacy mode</summary>

In Svelte 4, state was implicitly reactive if the variable was declared at the top level

```svelte
<script>
	let count = 0;
</script>

<button on:click={() => count++}>
	clicks: {count}
</button>
```

</details>

...with this:

> [!LEGACY]
> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
>
> ```svelte
> <script>
> 	let count = 0;
> </script>
>
> <button on:click={() => count++}>
> 	clicks: {count}
> </button>
> ```

[dummdidumm]

Regarding the syntax: I was wondering if it's worth it to investigate switching it around: Instead of using .md files and have chain of custom preprocessors in place, let's use .svelte files with preprocessors. A bit like (or maybe even using) this: https://www.samplekit.dev/

A file would then look a bit like this:

<Heading>Foo bar</Heading>

blabla

<SubHeading>Sub bar</SubHeading>

more stuff

<!-- codeblock
\`\`\`js
...
\`\`\`
--->

<Legacy>
  In Svelte 4 ...
</Legacy>

It would also open up the door for more unique elements, like adding interactive inline elements, playing around with images more, etc.

The one drawback I see is that it's harder to incorporate readmes like the ones from v-p-s, and the hardcore "I only read docs on github" people will have a harder time reading the docs.

[benmccann]

I think something like > [!LEGACY] would be a nice solution similar to https://github.com/orgs/community/discussions/16925

[Rich-Harris]

closed via #167