Complete UI redesign suggestion

[sleepy-evelyn]

Relating to #55 the more I look into the design of the wiki the more issues I can find so I figured i'd suggest a redesign with the changes I would make.

p.s. I know there has already been one redesign so I understand if this is rejected but for the long term it would be very useful. Especially since with the current design after adding only a couple more articles it's likely to break down into a bit of a mess. I'll explain why below.

The Top Navigation Bar

The wiki is a single separate site and so doesn't need navigation to other distinct pages under the same domain. Removing it entirely would save space. It would also fit better with the rest of the design described below. External links such as the Github repo are fine at the top right however because they don't need to be prominent on the webpage and act as a one-way passage.

Example Image

Notice the search bar can very easily be placed on the left side. A dropdown for changing wiki versions is also a good idea. By placing all these important navigation elements in a similar area it makes them more noticeable and easy to navigate. When I first loaded the old wiki for e.g. I didn't even notice u could switch between wiki versions until about the 4th time I visited. Personally I think this is really bad design.

Excessive padding

The only time padding is used for a navigation bar that spans the entire screen either vertically or horizontally is when a designer does it for the sake of it. There is no need for it and it wastes an excessive amount of space: see #55.

Similarly, every single site on the internet has a navigation bar stuck to the top or left side of the screen with no additional padding for the surrounding box. I'll provide some examples...

Distinct drop-down categories with a unique visual icon

Icons are only ever excluded from a navigation bar when it is impossible to find ones distinct enough for each category. For e.g. with a book, when the software used to write a site doesn't know about the contents of the navigation (see fabric wiki). This is not a problem for people to add to the wiki at all and there are some decent icons that can easily be used. See the comments on #55 for an example of this.

Without drowndown categories, u get the absolute mess that is the Fabric Wiki navigation bar. It's virtually impossible to navigate to something quickly now with the amount of info and for the quilt wiki this is even worse because the font size and padding for navigation links are much larger

Get rid of the vertical line separator for markdown headings

Bold + larger font size = category title. It's as simple as that. Adding a line separate again wastes a lot of space horizontally and doesn't add much to the design.

[sleepy-evelyn]

Padding issue partially fixed with #58