Accessibility issues

[JakobJingleheimer]

Loving the documentation so far (especially the emojis).

But the docs site clips in a lot of places when adhering to WCAG 2.x AA font-size criteria.

Also, the left sidebar/table of contents is HUGE: ⅓ the total viewport width, and about ½ of the sidebar is empty space (because its width is set to an explicit, arbitrary width of 20em). This could be resolved by simply setting width: fit-content (or not setting anything at all). The rest of the site doesn't automatically adapt to use that newly available space because of various position: fixeds. Flexbox would resolve this (in a much more accessible and responsive way, with much, much less code):

html,
body,
#app,
.theme-container
{
  height: 100%;
  overflow: hidden;
}

main {
  max-height: 100%;
  overflow-y: auto;
}

.theme-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.navbar {
  display: flex;
  flex: none;
  width: 100%;
}

.sidebar,
main
{
  max-height: 100%;
  overflow-y: auto;
}

main { flex: 1 }

The above styles assume the various position: fixed and related properties have been removed. Also, much of those styles should be wrapped in a screen media-query to avoid print issues.

Before:

After:

The flexbox approach is also generally favourable because switching from desktop to mobile is often little more than flex-direction: column → row.

I'd be happy to send a pull request.