Use of Flexbox for the Hugo documentation

@digitalcraftsman @jura Just now, I’ve implemented (here) the improvements you suggested.

Regarding two particular points:

In the image you captured, the “Getting Started” top level menu item is highlighted, because it includes the active document. (Strictly speaking, it includes its menu sub-item.)

This is desirable IMO.

And the “Content” top level menu item is highlighted because you opened it.

Another reason for highlighting “Content” is because it has the focus. Highlighting this enables people to navigate the menu visibly by using the keyboard—this is an accessibility issue.

Let’s say you explore the menu further, by clicking another top level menu item (such as “Themes”) without clicking any particular sub-item. Then the top level menu item you previously clicked (in this case, “Content”) doesn’t remain highlighted. Instead, since you’ve just opened “Themes”, it gets highlighted (in addition to “Getting Started”).

Regarding the image you captured, currently the redundant title text in that particular document is in its Markdown content, near the beginning. Presumably this bit of content should be removed. (That can happen later.)

Most of the documents don’t have this redundancy, and none need it.

cc @rdwatters

@digitalcraftsman Just now—on second thought—I’ve removed the highlighting from the top level menu item which contains the active document’s sub-item.

For example, regarding the image you captured, I’ve now removed the highlighting from “Getting Started.”

@jura Plus, just now—for the GitHub buttons—I’ve increased their vertical spacing when they wrap.

Also (just now), I’ve made the following, further improvements to the menu:

  • Increased the spacing (further);
  • Improved the font family; and
  • Increased the sub-item font size.

cc @rdwatters