Use default OS font for content whenever possible

This makes it loader faster and gives a more unified experience.
elixir-lang · Mar 28, 2024 · a99e026 · a99e026
1 parent 4be053c
commit a99e026
Show file tree

Hide file tree

Showing 28 changed files with 113 additions and 121 deletions.
diff --git a/assets/css/_html.css b/assets/css/_html.css
@@ -1,44 +1,42 @@
-@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';
-@import '@fontsource/inconsolata/400.css';
-@import '@fontsource/inconsolata/700.css';
+@import "@fontsource/lato/300.css";
+@import "@fontsource/lato/400.css";
+@import "@fontsource/lato/700.css";
+@import "@fontsource/inconsolata/400.css";
+@import "@fontsource/inconsolata/700.css";
 
-@import 'custom-props/common.css';
-@import 'custom-props/theme-light.css';
-@import 'custom-props/theme-dark.css';
+@import "custom-props/common.css";
+@import "custom-props/theme-light.css";
+@import "custom-props/theme-dark.css";
 
-@import 'normalize.css/normalize.css';
+@import "normalize.css/normalize.css";
 
-@import 'icons.css';
-@import 'layout.css';
-@import 'sidebar.css';
-@import 'search-bar.css';
-@import 'focus.css';
-@import 'content/general.css';
-@import 'content/admonition.css';
-@import 'content/summary.css';
-@import 'content/code.css';
-@import 'content/functions.css';
-@import 'content/footer.css';
-@import 'content/bottom-actions.css';
-@import 'content/cheatsheet.css';
-@import 'search.css';
-@import 'modal.css';
-@import 'keyboard-shortcuts.css';
-@import 'quick-switch.css';
-@import 'autocomplete.css';
-@import 'tooltips.css';
-@import 'copy-button.css';
-@import 'settings.css';
-@import 'toast.css';
-@import 'screen-reader.css';
-@import 'print.css';
-@import 'print-cheatsheet.css';
-@import 'makeup.css';
-@import 'tabset.css';
+@import "icons.css";
+@import "layout.css";
+@import "sidebar.css";
+@import "search-bar.css";
+@import "focus.css";
+@import "content/general.css";
+@import "content/admonition.css";
+@import "content/summary.css";
+@import "content/code.css";
+@import "content/functions.css";
+@import "content/footer.css";
+@import "content/bottom-actions.css";
+@import "content/cheatsheet.css";
+@import "search.css";
+@import "modal.css";
+@import "keyboard-shortcuts.css";
+@import "quick-switch.css";
+@import "autocomplete.css";
+@import "tooltips.css";
+@import "copy-button.css";
+@import "settings.css";
+@import "toast.css";
+@import "screen-reader.css";
+@import "print.css";
+@import "print-cheatsheet.css";
+@import "makeup.css";
+@import "tabset.css";
 
 body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
 body.dark .content-inner img[src*="#gh-light-mode-only"] {

diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
@@ -198,6 +198,7 @@
   vertical-align: middle;
   background-color: var(--codeBackground);
   border-bottom: 1px solid var(--codeBorder);
+  margin-top: 0;
 }
 
 .page-cheatmd .content-inner .h2 :is(ul, ol) + pre code {

diff --git a/assets/css/content/general.css b/assets/css/content/general.css
@@ -1,5 +1,5 @@
 .content-inner {
-  font-family: var(--serifFontFamily);
+  font-family: var(--defaultFontFamily);
   font-size: 1em;
   line-height: 1.6875em;
   position: relative;
@@ -17,15 +17,15 @@
 
 .content-inner h1 {
   font-size: 2em;
-  margin: .8em 0 .5em;
+  margin: 0.8em 0 0.5em;
 }
 
 .content-inner h1.signature {
   margin: 0;
 }
 
 .content-inner h1.section-heading {
-  margin: 1.5em 0 .5em;
+  margin: 1.5em 0 0.5em;
 }
 
 .content-inner h1 small {
@@ -39,16 +39,20 @@
 
 .content-inner h2 {
   font-size: 1.6em;
-  margin: 1em 0 .5em;
+  margin: 1em 0 0.5em;
   font-weight: 700;
 }
 
 .content-inner h3 {
   font-size: 1.375em;
-  margin: 1em 0 .5em;
+  margin: 1em 0 0.5em;
   font-weight: 700;
 }
 
+.content-inner li + li {
+  margin-top: 0.25em;
+}
+
 .content-inner :is(a, .a-main) {
   color: var(--links);
   text-decoration: underline;
@@ -64,7 +68,7 @@
   color: var(--iconAction);
   text-decoration: none;
   border: none;
-  transition: color .3s ease-in-out;
+  transition: color 0.3s ease-in-out;
   background-color: transparent;
   cursor: pointer;
 }
@@ -117,7 +121,7 @@
   font-family: var(--sansFontFamily);
   text-transform: uppercase;
   font-weight: 700;
-  padding-bottom: .5em;
+  padding-bottom: 0.5em;
 }
 
 .content-inner thead tr {
@@ -129,7 +133,7 @@
 }
 
 .content-inner tbody tr:last-child {
-  border-bottom: none
+  border-bottom: none;
 }
 
 .content-inner tr {
@@ -162,7 +166,7 @@
 
 .content-inner .section-heading i {
   font-size: var(--icon-size);
-  margin-top: .1em;
+  margin-top: 0.1em;
   margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
   padding-right: var(--icon-spacing); /* Avoids gap in hover area */
   opacity: 0;
@@ -192,7 +196,7 @@
 
 .content-inner .app-vsn {
   display: none !important;
-  font-size: .6em;
+  font-size: 0.6em;
   line-height: 1.5em;
 }
 

diff --git a/assets/css/content/summary.css b/assets/css/content/summary.css
@@ -24,10 +24,10 @@
 }
 
 .content-inner .summary .summary-row .summary-synopsis {
-  font-family: var(--serifFontFamily);
+  font-family: var(--defaultFontFamily);
   font-style: italic;
   padding: 0 1.2em;
-  margin: 0 0 .5em;
+  margin: 0 0 0.5em;
 }
 
 .content-inner .summary .summary-row .summary-synopsis p {

diff --git a/assets/css/copy-button.css b/assets/css/copy-button.css
@@ -2,7 +2,8 @@ pre {
   position: relative;
 }
 
-pre:hover .copy-button, pre .copy-button:focus {
+pre:hover .copy-button,
+pre .copy-button:focus {
   opacity: 1;
 }
 
@@ -17,18 +18,19 @@ pre:hover .copy-button, pre .copy-button:focus {
   border: none;
   cursor: pointer;
   transition: all 150ms;
-  font-family: var(--serifFontFamily);
+  font-family: var(--defaultFontFamily);
   font-size: 14px;
   line-height: 24px;
   color: currentColor;
 }
 
 .copy-button svg {
-  opacity: .5;
+  opacity: 0.5;
   transition: all 150ms;
 }
 
-pre .copy-button:hover svg, pre .copy-button:focus-visible svg {
+pre .copy-button:hover svg,
+pre .copy-button:focus-visible svg {
   opacity: 1;
 }
 

diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
@@ -6,51 +6,52 @@
   --navTabBorderWidth: 4px;
 
   /* Font Families */
-  --serifFontFamily: 'Merriweather', 'Book Antiqua', Georgia, 'Century Schoolbook', serif;
-  --sansFontFamily: 'Lato', sans-serif;
-  --monoFontFamily: 'Inconsolata', Menlo, Courier, monospace;
+  --defaultFontFamily: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  --sansFontFamily: "Lato", sans-serif;
+  --monoFontFamily: "Inconsolata", Menlo, Courier, monospace;
 
   /* Typography */
   --baseFontSize: 18px;
   --baseLineHeight: 1.5em;
 
   /* Colours */
-  --gray25:                  hsl(207,  43%,  98%      );
-  --gray50:                  hsl(207,  43%,  96%      );
-  --gray100:                 hsl(212,  33%,  91%      );
-  --gray200:                 hsl(210,  29%,  88%      );
-  --gray300:                 hsl(210,  26%,  84%      );
-  --gray400:                 hsl(210,  21%,  64%      );
-  --gray450:                 hsl(210,  21%,  49%      );
-  --gray500:                 hsl(210,  21%,  34%      );
-  --gray600:                 hsl(210,  27%,  26%      );
-  --gray700:                 hsl(212,  35%,  17%      );
-  --gray750:                 hsl(214,  46%,  14%      );
-  --gray800:                 hsl(216,  52%,  11%      );
-  --gray800-opacity-0:      hsla(216,  52%,  11%,   0%);
-  --gray850:                 hsl(216,  63%,   8%      );
-  --gray900:                 hsl(218,  73%,   4%      );
-  --gray900-opacity-50:     hsla(218,  73%,   4%,  50%);
-  --gray900-opacity-0:      hsla(218,  73%,   4%,   0%);
-  --coldGrayFaint:           hsl(240,   5%,  97%      );
-  --coldGrayLight:           hsl(240,   5%,  88%      );
-  --coldGray-lightened-10:   hsl(240,   5%,  56%      );
-  --coldGray:                hsl(240,   5%,  46%      );
-  --coldGray-opacity-10:    hsla(240,   5%,  46%,  10%);
-  --coldGrayDark:            hsl(240,   5%,  28%      );
-  --coldGrayDim:             hsl(240,   5%,  18%      );
-  --yellowLight:             hsl( 60, 100%,  81%      );
-  --yellowDark:              hsl( 60, 100%,  43%,  62%);
-  --yellow:                  hsl( 60, 100%,  43%      );
-  --green-lightened-10:      hsl( 90, 100%,  45%      );
-  --green:                   hsl( 90, 100%,  35%      );
-  --white:                   hsl(  0,   0%, 100%      );
-  --white-opacity-50:       hsla(  0,   0%, 100%,  50%);
-  --white-opacity-10:       hsla(  0,   0%, 100%,  10%);
-  --white-opacity-0:        hsla(  0,   0%, 100%,   0%);
-  --black:                   hsl(  0,   0%,   0%      );
-  --black-opacity-10:       hsla(  0,   0%,   0%,  10%);
-  --black-opacity-50:       hsla(  0,   0%,   0%,  50%);
+  --gray25: hsl(207, 43%, 98%);
+  --gray50: hsl(207, 43%, 96%);
+  --gray100: hsl(212, 33%, 91%);
+  --gray200: hsl(210, 29%, 88%);
+  --gray300: hsl(210, 26%, 84%);
+  --gray400: hsl(210, 21%, 64%);
+  --gray450: hsl(210, 21%, 49%);
+  --gray500: hsl(210, 21%, 34%);
+  --gray600: hsl(210, 27%, 26%);
+  --gray700: hsl(212, 35%, 17%);
+  --gray750: hsl(214, 46%, 14%);
+  --gray800: hsl(216, 52%, 11%);
+  --gray800-opacity-0: hsla(216, 52%, 11%, 0%);
+  --gray850: hsl(216, 63%, 8%);
+  --gray900: hsl(218, 73%, 4%);
+  --gray900-opacity-50: hsla(218, 73%, 4%, 50%);
+  --gray900-opacity-0: hsla(218, 73%, 4%, 0%);
+  --coldGrayFaint: hsl(240, 5%, 97%);
+  --coldGrayLight: hsl(240, 5%, 88%);
+  --coldGray-lightened-10: hsl(240, 5%, 56%);
+  --coldGray: hsl(240, 5%, 46%);
+  --coldGray-opacity-10: hsla(240, 5%, 46%, 10%);
+  --coldGrayDark: hsl(240, 5%, 28%);
+  --coldGrayDim: hsl(240, 5%, 18%);
+  --yellowLight: hsl(60, 100%, 81%);
+  --yellowDark: hsl(60, 100%, 43%, 62%);
+  --yellow: hsl(60, 100%, 43%);
+  --green-lightened-10: hsl(90, 100%, 45%);
+  --green: hsl(90, 100%, 35%);
+  --white: hsl(0, 0%, 100%);
+  --white-opacity-50: hsla(0, 0%, 100%, 50%);
+  --white-opacity-10: hsla(0, 0%, 100%, 10%);
+  --white-opacity-0: hsla(0, 0%, 100%, 0%);
+  --black: hsl(0, 0%, 0%);
+  --black-opacity-10: hsla(0, 0%, 0%, 10%);
+  --black-opacity-50: hsla(0, 0%, 0%, 50%);
 }
 
 @media screen and (max-width: 768px) {

diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -29,7 +29,6 @@
   "devDependencies": {
     "@fontsource/inconsolata": "^4.5.9",
     "@fontsource/lato": "^4.5.10",
-    "@fontsource/merriweather": "^4.5.14",
     "esbuild": "^0.16.16",
     "eslint": "^8.31.0",
     "eslint-config-standard": "^17.0.0",