Working with an external design firm (The Brigade) and doing extensive user testing we have a set of recommendations to improve article page scanability. Here is more info from half way through the project: https://discourse.mozilla.org/t/mdn-redesign-improving-article-scanability/20048 We have a set of recommendations now and they need to be implemented, that means a bug! Implement: - rename quick-links menu "Related Topics" - make quick-links links blue - move the bread crumbs to the left column - transform the "in this article" table of contents to a slim sticky heading - tweak heading typography to communicate section hierarchy - collapse article sections into just headings for mobile users
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/1aab073d9b083861ea6bd6aa2da1ba029d3f4ab2 Bug 1414107: Make dark background a variable (#4500)
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/7a7120f12c9349415877eacb040bfb393099d6d1 Bug 1414107: Conform to ESLint (#4499) Editing to conform to ESLint in preparation for other changes.
There are some links to non-existing docs and to external links in the sidebars. With PR mozilla/kuma#4495 for bug 1413289, these links will get a class="new" (404 docs) and a rel="external" (external links). When they appear in the document body, class="new" turns links reddish brown, and rel="external" adds an external link icon. You may want to use body styling when these attributes appear in the sidebar, or force a consistent style for all sidebar links.
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/9439924f8d0608e0650ccdd994be1cd8f262ef55 Bug 1414107: New styles for quick-links (#4498) - tweak function adding intelligent breakpoints to long titles - add break before `[` - don't add break before first letter of title - don't run if there are child elements - remove background colour from `<code>` elements - brighten strike through items when hovered (to make them readable) - change heading to "related topics" - make links blue - group headings with their subcategories - tweak what's hidden while js loads
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/e1f9792afa693af1955857f7029c8752a17b025d Bug 1414107: Display tweaks for zone-parent (#4507) - remove large icon on landing page - keep zone parent text on separate line from document title until tablet breakpoint - make zone parent font size match document title font size
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/32dcb8e30cf412622aa36793b847107af9894cf1 Bug 1414107: Update typography hierarchy (#4504) - add separator variables - add separator to h2s - make hr match separator - collapse separator lines when appearing next to each other: - summaries, blockquotes, top of the page, hrs - move highlight to h3 and h5 - font size and margin changes to all headings - remove empty p and div tags from article bodies - adjust card-grid to appear better as full-width-content - tweaks to components that use headings in them to accommodate new margins and typography on headings
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/3bfc4ad36653dd405ef05497fc19f8a6e3b9f453 Bug 1414107: Waffle highlight changes https://github.com/mozilla/kuma/commit/4e6b510655118f0300ad34ccc0c5a56f84d5dfd3 Merge pull request #4508 from mozilla/1414107-highlight Bug 1414107: Waffle highlight changes
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/d17c00b678d439e09be248b0c0d5efb1b7f2a2ef Bug 1414107: Move breadcrumbs to left column (#4497) * Bug 1414107: Move breadcrumbs to left column - remove crumbs from document-head - add crumbs to left column - change from rdf to schema.org encoding on crumbs - add intelligent break points to long page titles - tweak flow of document-title and document-actions on mobile and tablet - update look of crumbs - including larger hit area on mobile and tablet * bug 1414107: Update breadcrumbs tests - No breadcrumbs if no left sidebar - No breadcrumbs if you are a root element
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/ec81ba031f0c112bf63cc0f738632897e5e760d7 Bug 1414107: Type adjustments for asides (#4513)
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/013c027e31d3d9d9f0dfa23d8b70f10f48608703 Fix Bug 1414107: Sticky TOC and mobile collapsed - Move TOC to below document title - Add sticky TOC styles - Add JS improve TOC user experience - Scrolling to anchor links accounts for height of TOC - Don't make TOC sticky if it's too big - Don't show TOC if the screen is too small - Collapse sections by default on mobile - open by default if user arrives via an anchor link - Change code block formatting to avoid FOUT on <pre> blocks (the page should jump around less when Prism loads now) https://github.com/mozilla/kuma/commit/5bbf91c2b38722c534e0aafbad0232c9898bd17d Merge pull request #4510 from mozilla/1414107-toc Fix Bug 1414107: Sticky TOC and mobile collapsed