Truing Netlify.com

To start with, for whatever beyond-the-look improvement I need to make, I had to: maintain the style in any color mode, maintain the responsiveness to any device width.

Since components on the page have a maximum of two adaptive breakpoints, a choice of iPhone 17 Pro and iPad Pro devices is sufficient to test for the responsiveness of the page to any device width. In any color mode.

If you look closely, you'd see it's definitely not a perfect match.

In some cases, better. Most noticeably are the alignments.

In other cases, subjective. For example, the re-ordering of sections of the document.

I re-ordered because the sub-section for "Start your way" focuses on deployment. Since deployment trails a dev workflow, it makes sense for the section focusing on deployment, to trail the stages that comes before it in the workflow.

Now, the parent Workflow Section, and its sibling Use-cases Section, both sell Netlify, which becomes the parent Section (as well as, the root section). Simple. This is the crux of the document, and there should be no other headings creating sections.

The other headings in the legacy site — some duplicates, some orphaned, some misplaced — are best represented as: titles in labelled landmarks, subheadings of a heading (not headings of a subsection), or, simply, phrases in a paragraph.

The result of this improved outline, along with content modifications, is a readable document for users using the Reader View. This smooth document powered the style of the refactored site.

---

This refactored Reader View, by itself, out-of-the-box, is fully responsive to document attributes:

This flexibility in personalizing the Reader View doesn't stop here.

While style views manage their multi-column layout, making the line height and the line length custom to the style view, the page, which is already responsive to device width, and and supports dark mode, should still be responsive to text size, typeface, and color hue.

The primary view of the legacy site starts to break when users use a large text size. It gets worse as the font goes larger.

On the refactored Primary View, the page responds smoothly to text size like it does to page zoom. Above 16px, the view adapts appropriately to the screen size as text size increases. Below 16px, the view scales out as text size decreases.

Users can, as well, use any typeface installed on their system.

Side note

Today's typefaces are singletons. They contain only one class of glyphs. When a singleton typeface is selected on a multi-type page, like Netlify.com that uses 3 typefaces, content are forces to use only that single font, not three.

A way around, until Typeface Designers adopt this new way to package fonts, is to manually package multiple typefaces as one. I made a script that makes n-in-1 fonts. I also package some for the site. You can access them if you use the Typeface selector of the Elo Extension.

In both light and dark modes, users can theme netlify.com to their choice.