doc: eliminate dead space in API section's sidebar

[Alhadis]

This PR adds some UX garnish to the API section's nav-menu by removing the non-clickable regions between each link.

Checklist

• make -j4 test (Unix), or vcbuild test (Windows) passes
• tests and/or benchmarks are included
• documentation is changed or added
• commit message follows commit guidelines

Description

Here's a before-and-after of the change — the interactive regions of each link are highlighted in red:

NB: The easiest way to preview these changes is to open an API page, pop the DevTools open, and run this snippet in the console:

Click to show

{
	const el = document.createElement("style");
	el.innerHTML = String.raw `
		@media only screen and (min-width: 1025px) {
			.apidoc #column2 > .line {
				pointer-events: none;
			}
			.apidoc #column2 > :first-child,
			.apidoc #column2 > ul,
			.apidoc #column2 > ul > li {
				margin: 0;
				padding: 0;
			}
			.apidoc #column2 > :first-child > a[href] {
				border-radius: 0;
				padding: 1.25rem 1.4375rem .625rem;
				display: block;
			}
			.apidoc #column2 > ul > li > a[href] {
				padding: .5rem 1.4375rem;
				padding-right: 0;
				display: block;
			}
			.apidoc #column2 > ul > :first-child > a[href] {
				padding-top: .625rem;
			}
			.apidoc #column2 > ul > :last-child > a[href] {
				padding-bottom: .625rem;
			}
			.apidoc #column2 > ul:first-of-type > :last-child  > a[href] {
				padding-bottom: 1rem;
			}
			.apidoc #column2 > ul:nth-of-type(2) > :first-child > a[href] {
				padding-top: .875rem;
			}
			.apidoc #column2 > ul:nth-of-type(2) > :last-child > a[href] {
				padding-bottom: .9375rem;
			}
			.apidoc #column2 > ul:last-of-type > :first-child > a[href] {
				padding-top: 1rem;
			}
			.apidoc #column2 > ul:last-of-type > :last-child > a[href] {
				padding-bottom: 1.75rem;
			}
		}
	`;
	
	// Enforce correct ruleset order
	const from = document.head.appendChild(el).sheet.cssRules;
	const to   = document.querySelector("link[href$='style.css']").sheet;
	let index  = [...to.cssRules].findIndex(rule => ".github_icon" === rule.selectorText);
	
	// Check that `@media` query's still being used; it might be refactored out later
	if(1 === from.length && from[0] instanceof CSSMediaRule)
		to.insertRule(from[0].cssText, to.cssRules.length);
	else for(const rule of from)
		to.insertRule(rule.cssText, ~index ? index++ : from.length);
	
	// Clean up
	el.remove();
}

Implementation details

This was a Q&D addition to my user stylesheet to address a pet UX peeve of mine (nav-menus that don't make ergonomic use of useful, perfectly-clickable empty space). Having said that, I'm in the dark as to what other pages on nodejs.org would be affected by these changes, so I exercised caution at the expense of weird-looking CSS like this:

.apidoc #column2 > :first-child > a[href] {
	border-radius: 0;
	padding: 1.25rem 1.4375rem .625rem;
	display: block;
}
.apidoc #column2 > ul:nth-of-type(2) > :last-child > a[href] {
	padding-bottom: .9375rem;
}

I can simplify this mess once I know which selectors and measurements I can mess with. Feedback welcome.

[BridgeAR]

LGTM. @Alhadis thank you very much for the helpful script! ❤️

[BridgeAR]

Landed in f14229e 🎉

[Alhadis]

@BridgeAR Do you know when this will take effect on nodejs.org? No rush or anything, I just assumed it would go live with the next release (which was v14.4.0).