Improve consistency of type rendering weight across OSes (elixir-lang…

…#1677) Use normal/400 instead of light/300 in the sidebar if the UA string indicates a non-Apple OS.
moogle19 · Mar 11, 2023 · 8d9cf7c · 8d9cf7c
1 parent a07443e
commit 8d9cf7c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 0 deletions.
diff --git a/assets/css/_html.css b/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';

diff --git a/assets/css/settings.css b/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;

diff --git a/assets/css/sidebar.css b/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);

diff --git a/assets/js/entry/html.js b/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()
 })
diff --git a/assets/js/os.js b/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)
 }