Rethink the location of page metadata elements

[eric-schneider]

Original Basecamp task: https://3.basecamp.com/5214332/buckets/27604022/card_tables/cards/6687556414 Original reporter: @djsauble

The :page-colab-link:, :page-time-commitment:, :page-skill-level:, and # steps UI components contain useful information, but they're using a lot of valuable real estate right now. There's a ~100px high strip of screen under the title that's occupied by this information right now. Let's find a more efficient way to display it.

Some ideas:

• Shrink the space requirements (e.g. from ~100px to ~40px)
• Move these components inline with the page title
  • Consider pushing the right nav down so the page title can take up the entire width of the screen (minus the primary nav). Then, put the time commitment, skill level, and # steps to the immediate right of the page title, and float the Colab link to the right of the page (inline with the page title).

[eric-schneider]

We should avoid putting anything in-line with the page title, principally because it will negatively affect the legibility of the title (distracting). In addition, page titles can technically span multiple lines, which will likely become a rabbit hole design-wise.

I think we should try reducing the side of these elements and play with the spacing first. This will likely give us the most flexibility across screen sizes, and will more easily afford additional elements should we add them in the future. You can't rely on the presence of the right-nav because the right-nav is not present on smaller screen sizes. I guess if you put them in the right column, you could just collapse them to where they currently are on small screens. But it's a lot to consider. Pinecone attempted to do something across the right column, and they are clearly running into these very same issues: https://docs.pinecone.io/docs/openai