New docs template

[gamebox]

Just a prototype

This is now being merged in earnest.

Desktop (Light/Dark mode side-by-side):

Desktop w/ Search (Light/Dark side-by-side):

Mobile(Dark mode):

Mobile w/ Sidebar open (Dark mode):

Mobile w/ Search open (Dark mode):

Mobile (light mode):

Mobile w/ Sidebar open (Light mode):

Mobile w/ Search open (Light mode):

[Anton-4]

The difference in colors for syntax highlighting has reduced significantly, could we re-use the old colors here?

left is current version | right is new

[gamebox]

The old colors are not AAA compliant. Comment in CSS notwithstanding

[gamebox]

I can try playing with the saturation some more

[Anton-4]

I can try playing with the saturation some more

Yes, I do think that is worth it.

All the rest looks good :)

[gamebox]

My newest changes will move the Dark Mode syntax highlighting to this color palette.

[gamebox]

I think the light mode syntax highlighting is good to go already

Changes implemented as requested

[kukimik]

@gamebox This has broken the highlighting of the current (:target) entry-name, see #7299 and #7382.

In #7382 I used background-color: var(--violet-bg); to highlight the entry pointed at by the #fragment part of the URI. But now all entries have this background color:

https://github.com/roc-lang/roc/blame/eda4db05894dd027b023803f8c9ffbc559b6900a/crates/docs/src/static/styles.css#L74

If we want to use this background color for all entries, then perhaps the border style can be used to distinguish the current entry (have a look at the screenshots in #7382)?