vanilla-framework Table of contents: mobile, other improvements

Table of contents: mobile, other improvements

Open juanruitina opened this issue 1 year ago • 2 comments

The is some tweaks we could apply to the table of contents on mobile:

The table of contents looks rather misaligned due to x-padding.
When placed in a column on the right on desktop, it shows up after the main content on mobile, becoming unaccessible. We could place it above the content, but in some cases there might be many links. Should we consider another toggle for this? How would it play with the sidebar toggle?
Touch surface for links seems small.

Beyond mobile:

When a link label wraps, it looks like two different links. Some margin beyond line height could work.
In most cases, the heading should be a H2. When that's the case, it inherits weight 100, it really looks too thin. It wouldn't pass the APCA test (WIP).

How it is:

vanillaframework io_docs_examples_patterns_table-of-contents

Some initial style suggestions:

vanillaframework io_docs_examples_patterns_table-of-contents (1)

Jun 02 '23 15:06 juanruitina