Skip to content

Improve website navigation: 2025 edition

sajolidarequested to merge
20766-navigation-bundle into stable

Closes #20393 (closed) #20065 (closed) #17665 (closed) #20805 (closed) #16188 (closed) #7506 (closed) #7507 (closed) #20835 (closed)

This is a huge merge request that solves the most important issues of #20766 (closed).

I'm grouping so many issues in a single merge request because editing the structure of the website is really slow and painful when ikiwiki refresh many pages, so grouping speeded up development. Also, the various typography and design issues are really interrelated.

I'm interested in reviews from 4 angles:

  • @donuts: I'm adding screenshots below so that you can comment on the final look.

  • @jawlensky: I'm interested in hearing from you about the pure-CSS tricks, as the idea was yours originally.

  • @foundations-team: Someone knowledgeable about ikiwiki in the Tails Team should also have a look because I'm touching so many things, there are definitely bugs in there.

  • @groente and @zen: We might have to coordinate when merging because this branch touches ikiwiki.setup.

I plan to merge this during the week of May 12 is there aren't many bugs. Otherwise, week of May 19.

Notes and screenshots about the different issues

Have a secondary navigation in our documentation (#20393 - closed)

That was the biggest chunk of work. It's pretty impressive what can be achieved with CSS only these days with all these fancy pseudo-selectors.

It also forced me to move some pages around so that the secondary navigation matches the index on /doc.

Being pure CSS, it doesn't implement all possible interactions with the menu itself, but I think that's enough to be usable. Please test hard!

menu_1600

menu_1200

I'm not very happy with how it behaves on the left at 1200 px, but I couldn't figure out anything better.

menu_600

menu_accordions

Use a hamburger menu to navigate the website on... (#20065 - closed)

Based on @jawlensky's pure CSS prototype.

menu_600_hamburger

Use a bigger font everywhere on our website (#17665 - closed)

I went from DejaVu 16px to Source Sans 3 18px in the page body.

The difference doesn't seem so big because Source Sans 3 looks smaller than DejaVu at the same size.

It also brings us a tad closer to the Tor Project website by replacing the stripped background with white margins.

It also allowed me to make the fonts on /index and /about consistent with the rest of the website. Yay!

The new look is on the left. The current website is on the right.

font_size_on_doc

font_size_on_index

Use a variable font on our website (#16188 - closed)

So stylish! I could use a slightly less bold and a slightly thiner font on the subsections of documentation index, all that with a single download.

H1 and H2 headings are hard to differentiate (#20805 - closed)

I reworked all the headings and made them use a Major Third scale and more subtle font weights.

headings

Add H1 heading at the beginning of page content (#7506 - closed)

I reworked many aspects of our main template to be pure HTML 5 and match the WCAG recommendations. For example, <header> is not for the title or headings of a page, like ikiwiki does, but for elements that are not part of the main content like the banner and top navigation.

I documented the use and style of headings in /contribute/how/documentation/style_guide.

Add WCAG "skip to main content" quick link (#7507 - closed)

I didn't know about this recommendation but it sounds like a very useful practice. The skip link is invisible by default but appear on the first press of the Tab key and links to the page content.

skip_link

Move Contribute from our top navigation to the ... (#20835 - closed)

Done!

Edited by sajolida

Merge request reports