Improve consistency of type rendering weight across OSes (#1677)

Use normal/400 instead of light/300 in the sidebar if the UA string indicates a non-Apple OS.

Author: DavidOliver

assets/css/_html.css

@@ -1,4 +1,5 @@
 @import '@fontsource/lato/300.css';
+@import '@fontsource/lato/400.css';
 @import '@fontsource/lato/700.css';
 @import '@fontsource/merriweather/300.css';
 @import '@fontsource/merriweather/300-italic.css';

assets/css/settings.css

@@ -43,6 +43,7 @@
 
 #settings-modal-content .switch-button-container > div > p {
   font-size: 14px;
+  font-weight: 300;
   line-height: 1.4;
   margin: 0;
   padding-bottom: 6px;

assets/css/sidebar.css

@@ -80,6 +80,9 @@
   line-height: 20px;
   color: var(--sidebarMuted);
 }
+.non-apple-os .sidebar .sidebar-projectVersion {
+  font-weight: 400; /* Non-Apple OSes render small light type too thinly */
+}
 
 .sidebar .sidebar-projectVersionsDropdown {
   cursor: pointer;
@@ -128,6 +131,9 @@
   font-size: 14px;
   color: var(--sidebarMuted);
 }
+.non-apple-os .sidebar .sidebar-listNav :is(li, li a) {
+  font-weight: 400; /* Non-Apple OSes render small light type too thinly */
+}
 
 .sidebar .sidebar-listNav li {
   display: inline-block;
@@ -359,6 +365,9 @@
   margin-right: 0;
   color: var(--sidebarAccentMain);
 }
+.non-apple-os .sidebar #full-list ul li {
+  font-weight: 400; /* Non-Apple OSes render small light type too thinly */
+}
 
 .sidebar #full-list ul li.current-hash {
   color: var(--sidebarActiveItem);

assets/js/entry/html.js

@@ -16,6 +16,7 @@ import { initialize as initTooltips } from '../tooltips/tooltips'
 import { initialize as initHintsPage } from '../tooltips/hint-page'
 import { initialize as initCopyButton } from '../copy-button'
 import { initialize as initSettings } from '../settings'
+import { initialize as initOs } from '../os'
 
 onDocumentReady(() => {
   initTheme()
@@ -33,4 +34,5 @@ onDocumentReady(() => {
   initSearchPage()
   initCopyButton()
   initSettings()
+  initOs()
 })

assets/js/os.js

@@ -0,0 +1,6 @@
+export function initialize () {
+  const appleDeviceExpr = /(Macintosh|iPhone|iPad|iPod)/
+
+  const osClass = appleDeviceExpr.test(window.navigator.userAgent) ? 'apple-os' : 'non-apple-os'
+  document.documentElement.classList.add(osClass)
+}