[sticky otp/toc] Builds on elastic/docs #2478

[colleenmcginnis]

Targets elastic#2478

I couldn't help but spend some time tinkering! So far this PR includes:

• Refining the IntersectionObserver to highlight only one item at a time in the "On this page" list. (Current logic highlights the first heading that is visible on the page if there are multiple headings visible.)
• Widens the container using a new content-container class to better accommodate sticky content on both sides.
• Styles the table of contents to be more accessible with higher contrast between the text and the background (the blue on gray was difficult to read).
• Uses SVGs for the "+" icons for the table of contents so they look crisp on screens with any resolution.
• Simplifies the styling of the "Most popular" box.

clipped-shorter.mov

If you think this is a good direction (and not to controversial!) we can merge this into elastic#2478 and continue from there. There are a few things that definitely need to be taken care of still including:

• A full review of the layout at various screen size breaks and browser types.
• Applying the styling from the "Most popular" box to the generated "Recommended for you" box.
• Injecting the "{Book title}" into the table of contents.
• Testing on more pages outside the Observability guide.
• Style the landing page.
• I'm sure we'll find more!!

Let me know what you think about this direction!

[bmorelli25]

If we can, it wouldn't be done here. We'd need to prepend the book name to the TOC when it's built.

[bmorelli25]

I'll look at how we access the book title on index pages. Maybe we can use the same logic.

[bmorelli25]

On second thought, I think this is a non-issue. The title of the book and version selector are omitted when building locally. When doing a full build, the title and version appear at the top of the TOC:

The title uses the id book_title.

[colleenmcginnis]

First pass looks like:

[bmorelli25]

This looks great! I'm going to merge into the main PR so we can get a PR build up!