recalibrate font sizes

- reduce scaling on body
- don't scale font size of paragraphs in document
- extract body font sizes as variables
- use rem calc to reverse compute rem value from desired pixel value
- adjust font sizes in nav
- slightly reduce width of nav
- fix position of component versions in explore menu

diff --git a/src/css/base.css b/src/css/base.css
index d18d5db..adade49 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -12,14 +12,14 @@ body {
 html {
   box-sizing: border-box;
   font-family: "Roboto", sans-serif;
-  font-size: 1.1em;
-  line-height: 1.15;
+  font-size: var(--body-mobile-font-size);
+  line-height: var(--body-line-height);
   -webkit-text-size-adjust: 100%;
 }
 
 @media screen and (min-width: 1024px) {
   html {
-    font-size: 1.2em;
+    font-size: var(--body-font-size);
   }
 }
 
@@ -62,7 +62,7 @@ button {
   cursor: pointer;
   font-family: inherit;
   font-size: 1em;
-  line-height: 1.15;
+  line-height: var(--body-line-height);
   margin: 0;
 }
 

diff --git a/src/css/doc.css b/src/css/doc.css
index 6382160..fb8c79a 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,13 +1,15 @@
 .doc {
   color: var(--doc-font-color);
-  line-height: 1.6;
+  font-size: var(--doc-mobile-font-size);
+  line-height: var(--doc-line-height);
   margin: 0 auto;
-  max-width: var(--doc-max-width-mobile);
+  max-width: var(--doc-mobile-max-width);
   padding: 0 1rem 4rem;
 }
 
 @media screen and (min-width: 1024px) {
   .doc {
+    font-size: var(--doc-font-size);
     margin: 0 2rem;
     max-width: var(--doc-max-width);
   }
@@ -26,13 +28,19 @@
 }
 
 .doc > h1.page:first-child {
-  font-size: 2rem;
-  margin: 2rem 0 1.5rem;
+  font-size: calc(36 / var(--rem-base) * 1rem);
+  margin: 1.5rem 0;
+}
+
+@media screen and (min-width: 769px) {
+  .doc > h1.page:first-child {
+    margin-top: 2.5rem;
+  }
 }
 
 #preamble + .sect1,
 .doc .sect1 + .sect1 {
-  margin-top: 2.5rem;
+  margin-top: 2rem;
 }
 
 .doc h2:not(.discrete) {
@@ -81,7 +89,6 @@
 }
 
 .doc p {
-  font-size: 0.95rem;
   margin: 0;
 }
 
@@ -112,12 +119,12 @@
   color: var(--code-font-color);
   background: var(--code-background);
   border-radius: 0.2rem;
-  font-size: 0.9em;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   padding: 0.075rem 0.25rem 0.125rem;
 }
 
 .doc pre {
-  font-size: 0.9rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   line-height: 1.5;
   margin: 0;
 }
@@ -154,7 +161,7 @@
 
 .doc table.tableblock {
   border-collapse: collapse;
-  font-size: 0.8em;
+  font-size: calc(15 / var(--rem-base) * 1rem);
   margin: 2rem 0;
   /* enable table-layout: fixed if you want the table width to be enforced strictly */
   /* alternative is to wrap table in div and set overflow-x: auto on the wrapper */
@@ -209,7 +216,7 @@
 
 .doc .admonitionblock p,
 .doc .admonitionblock td.content {
-  font-size: 0.9rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
 }
 
 .doc .admonitionblock td.content > :first-child {
@@ -217,7 +224,7 @@
 }
 
 .doc .admonitionblock pre {
-  font-size: 0.85rem;
+  font-size: calc(15 / var(--rem-base) * 1rem);
 }
 
 .doc .admonitionblock > table {
@@ -237,7 +244,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  font-size: 0.75rem;
+  font-size: calc(15 / var(--rem-base) * 1rem);
   padding: 0 0.5rem;
   height: 1.25rem;
   line-height: 1;
@@ -304,7 +311,7 @@
   background: var(--abstract-background);
   border-left: 5px solid var(--abstract-border-color);
   color: var(--abstract-font-color);
-  font-size: 0.9em;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   padding: 0.75em 1em;
 }
 
@@ -317,7 +324,7 @@
 
 .doc .quoteblock .attribution {
   color: var(--quote-attribution-font-color);
-  font-size: 0.8rem;
+  font-size: calc(15 / var(--rem-base) * 1rem);
   margin-top: 0.75rem;
 }
 
@@ -429,7 +436,7 @@
 .doc .openblock .title,
 .doc .tableblock caption {
   color: var(--caption-font-color);
-  font-size: 0.925rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 500;
   font-style: italic;
   letter-spacing: 0.01em;
@@ -464,7 +471,7 @@
 }
 
 .doc .sidebarblock > .content > .title {
-  font-size: 1.2rem;
+  font-size: calc(22.5 / var(--rem-base) * 1rem);
   font-weight: 500;
   line-height: 1.3;
   margin-bottom: -0.3em;
@@ -499,7 +506,7 @@
   content: attr(data-lang);
   display: none;
   color: var(--pre-annotation-font-color);
-  font-size: 0.75em;
+  font-size: calc(13.5 / var(--rem-base) * 1rem);
   letter-spacing: 0.05em;
   line-height: 1;
   text-transform: uppercase;
@@ -521,7 +528,7 @@
 }
 
 .doc .colist {
-  font-size: 0.95rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   margin-top: 0.5rem;
 }
 
@@ -535,7 +542,7 @@
   border-radius: 100%;
   display: inline-block;
   font-family: "Roboto", sans-serif;
-  font-size: 0.75rem;
+  font-size: calc(13.5 / var(--rem-base) * 1rem);
   font-style: normal;
   height: 1.25em;
   line-height: 1.2;
@@ -569,7 +576,7 @@ b.button::after {
 
 kbd {
   display: inline-block;
-  font-size: 0.7rem;
+  font-size: calc(12 / var(--rem-base) * 1rem);
   background: var(--kbd-background);
   border: 1px solid var(--kbd-border-color);
   border-radius: 0.25em;
@@ -585,7 +592,7 @@ kbd,
 }
 
 .keyseq {
-  font-size: 0.9em;
+  font-size: calc(16 / var(--rem-base) * 1rem);
 }
 
 .keyseq kbd {

diff --git a/src/css/footer.css b/src/css/footer.css
index dc675ef..6521947 100644 (file)
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,8 +1,8 @@
 footer.footer {
   background-color: var(--footer-background);
   color: var(--footer-font-color);
-  font-size: 0.75rem;
-  line-height: 1.6;
+  font-size: calc(15 / var(--rem-base) * 1rem);
+  line-height: var(--footer-line-height);
   padding: 1.5rem;
 }
 

diff --git a/src/css/header.css b/src/css/header.css
index 134b47a..9062489 100644 (file)
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -9,7 +9,7 @@ body {
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);
-  font-size: 0.83333rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   height: var(--navbar-height);
   position: fixed;
   top: 0;
@@ -25,7 +25,7 @@ body {
 .navbar-brand .navbar-item:first-child,
 .navbar-brand .navbar-item:first-child a {
   color: var(--navbar-font-color);
-  font-size: 1.15rem;
+  font-size: calc(22 / var(--rem-base) * 1rem);
 }
 
 .navbar-brand .separator {

diff --git a/src/css/nav.css b/src/css/nav.css
index 9ffa5b4..62780f0 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -3,7 +3,7 @@
   top: var(--navbar-height);
   left: 0;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: calc(17 / var(--rem-base) * 1rem);
   z-index: var(--z-index-nav);
   visibility: hidden;
 }
@@ -11,13 +11,12 @@
 @media screen and (min-width: 769px) {
   .nav-container {
     width: var(--nav-width);
-    font-size: 0.875rem;
   }
 }
 
 @media screen and (min-width: 1024px) {
   .nav-container {
-    font-size: 0.8125rem;
+    font-size: calc(15.5 / var(--rem-base) * 1rem);
     flex: none;
     position: static;
     top: 0;
@@ -33,7 +32,7 @@
   background: var(--nav-background);
   position: relative;
   top: var(--toolbar-height);
-  height: var(--nav-height-mobile);
+  height: var(--nav-mobile-height);
 }
 
 @media screen and (min-width: 769px) {
@@ -65,7 +64,7 @@ html.is-clipped--nav {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  height: var(--nav-panel-height-mobile);
+  height: var(--nav-panel-mobile-height);
 }
 
 @media screen and (min-width: 1024px) {
@@ -102,7 +101,7 @@ html.is-clipped--nav {
   min-height: 0;
   width: 100%;
   padding: 0.5rem 0.75rem;
-  line-height: 1.35;
+  line-height: var(--nav-line-height);
   position: relative;
 }
 
@@ -119,7 +118,7 @@ html.is-clipped--nav {
 }
 
 .nav-list {
-  margin: 0 0 0 0.8em;
+  margin: 0 0 0 0.75rem;
   padding: 0;
 }
 
@@ -148,15 +147,15 @@ html.is-clipped--nav {
 }
 
 .nav-item-toggle {
-  background: transparent url(../img/caret.svg) no-repeat center;
-  background-size: 55%;
+  background: transparent url(../img/caret.svg) no-repeat center / 50%;
   border: none;
   outline: none;
   line-height: inherit;
   position: absolute;
-  height: 1.4em; /* NOTE must match line-height of text; slightly tweaked for alignment */
-  width: 1.5em;
-  margin-left: -1.5em;
+  height: calc(var(--nav-line-height) * 1em);
+  width: calc(var(--nav-line-height) * 1em);
+  margin-top: -0.5px;
+  margin-left: calc(var(--nav-line-height) * -1em);
 }
 
 .nav-item.is-active > .nav-item-toggle {
@@ -180,6 +179,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .context {
+  font-size: calc(15 / var(--rem-base) * 1rem);
   flex-shrink: 0;
   color: var(--nav-muted-color);
   box-shadow: 0 -1px 0 var(--nav-panel-divider-color);
@@ -189,16 +189,9 @@ html.is-clipped--nav {
   justify-content: space-between;
   cursor: pointer;
   line-height: 1;
-  font-size: 0.8125rem;
   height: var(--drawer-height);
 }
 
-@media screen and (min-width: 1024px) {
-  .nav-panel-explore .context {
-    font-size: 0.75rem;
-  }
-}
-
 .nav-panel-explore .context .version {
   background-image: url(../img/chevron.svg);
   background-repeat: no-repeat;
@@ -212,17 +205,13 @@ html.is-clipped--nav {
   flex-grow: 1;
   box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
   background: var(--nav-secondary-background);
-  padding: 0.5rem 0.5rem 0 0.5rem;
+  padding: 0.5rem 0.75rem 0 0.75rem;
   margin: 0;
   overflow-y: auto;
   max-height: 100%;
   display: block;
 }
 
-.nav-panel-explore .component:last-child {
-  margin-bottom: 0.75rem;
-}
-
 .nav-panel-explore:not(.is-active) .components {
   display: none;
 }
@@ -235,6 +224,10 @@ html.is-clipped--nav {
   margin-top: 0.5rem;
 }
 
+.nav-panel-explore .component:last-child {
+  margin-bottom: 0.75rem;
+}
+
 .nav-panel-explore .component .title {
   font-weight: 500;
 }
@@ -243,21 +236,24 @@ html.is-clipped--nav {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  padding-left: 0.5rem;
+  padding-left: 0;
+  margin-top: -0.25rem;
+  line-height: 1;
 }
 
 .nav-panel-explore .component .version {
   display: block;
-  font-size: 0.9375em;
+  margin: 0.375rem 0.375rem 0 0;
 }
 
 .nav-panel-explore .component .version a {
   border: 1px solid var(--nav-border-color);
-  border-radius: 0.25em;
+  border-radius: 0.25rem;
   color: inherit;
   opacity: 0.75;
   white-space: nowrap;
-  padding: 0.05em 0.25em 0;
+  padding: 0.125em 0.25em;
+  display: inherit;
 }
 
 .nav-panel-explore .component .is-current a {
@@ -271,7 +267,3 @@ html.is-clipped--nav {
   content: " (latest)";
 }
 */
-
-.nav-panel-explore .component .version + .version {
-  padding-left: 0.375em;
-}

diff --git a/src/css/print.css b/src/css/print.css
index e67daf6..b6817a4 100644 (file)
--- a/src/css/print.css
+++ b/src/css/print.css
@@ -8,7 +8,7 @@
   }
 
   html {
-    font-size: 90%;
+    font-size: var(--body-print-font-size);
   }
 
   a {
@@ -73,7 +73,6 @@
     background: none;
     border-top: 1px solid var(--panel-border-color);
     color: var(--quote-attribution-font-color);
-    font-size: 0.9em;
     padding: 0.5rem;
   }
 

diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index cf39164..3d44448 100644 (file)
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -4,7 +4,7 @@
   background-color: var(--toolbar-background);
   box-shadow: 0 1px 0 var(--toolbar-border-color);
   display: flex;
-  font-size: 0.75rem;
+  font-size: calc(15 / var(--rem-base) * 1rem);
   height: var(--toolbar-height);
   justify-content: flex-start;
   position: sticky;

diff --git a/src/css/vars.css b/src/css/vars.css
index 09364c2..a5ad054 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -16,6 +16,12 @@
   --color-jet-70: #222;
   --color-jet-80: #191919;
   --color-black: #000;
+  /* fonts */
+  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
+  --body-font-size: 1.125em; /* 18px */
+  --body-mobile-font-size: 1.0625em; /* 17px */
+  --body-print-font-size: 0.9375em; /* 15px */
+  --body-line-height: 1.15;
   /* base */
   --body-background: var(--color-white);
   --body-font-color: var(--color-jet-70);
@@ -35,6 +41,7 @@
   /* nav */
   --nav-background: var(--panel-background);
   --nav-border-color: var(--color-gray-10);
+  --nav-line-height: 1.35;
   --nav-heading-font-color: var(--color-jet-30);
   --nav-muted-color: var(--color-gray-70);
   --nav-panel-divider-color: var(--color-smoke-90);
@@ -46,10 +53,6 @@
   --toolbar-muted-color: var(--color-gray-30);
   --page-version-menu-background: var(--color-smoke-70);
   --page-version-missing-font-color: var(--color-gray-30);
-  /* footer */
-  --footer-background: var(--color-smoke-90);
-  --footer-font-color: var(--color-gray-70);
-  --footer-link-font-color: var(--color-jet-80);
   /* admonitions */
   --caution-color: #a0439c;
   --caution-on-color: var(--color-white);
@@ -63,6 +66,9 @@
   --warning-on-color: var(--color-white);
   /* doc */
   --doc-font-color: var(--color-jet-50);
+  --doc-font-size: calc(17 / var(--rem-base) * 1rem);
+  --doc-mobile-font-size: inherit;
+  --doc-line-height: 1.6;
   --heading-font-color: var(--color-jet-80);
   --section-divider-color: var(--panel-border-color);
   --link-font-color: #1565c0;
@@ -87,19 +93,24 @@
   --quote-attribution-font-color: var(--color-gray-30);
   --sidebar-background: var(--color-smoke-90);
   --table-border-color: var(--panel-border-color);
+  /* footer */
+  --footer-background: var(--color-smoke-90);
+  --footer-font-color: var(--color-gray-70);
+  --footer-line-height: var(--doc-line-height);
+  --footer-link-font-color: var(--color-jet-80);
   /* dimensions */
-  --navbar-height: 3.25rem;
-  --drawer-height: 2.5rem;
-  --toolbar-height: 2.5rem;
+  --navbar-height: calc(63 / var(--rem-base) * 1rem);
+  --toolbar-height: calc(45 / var(--rem-base) * 1rem);
+  --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: var(--body-min-height);
-  --nav-height-mobile: calc(var(--body-min-height) - var(--toolbar-height));
+  --nav-mobile-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
-  --nav-panel-height-mobile: calc(var(--nav-height-mobile) - var(--drawer-height));
-  --nav-width: 16rem;
-  --doc-max-width: 54rem;
-  --doc-max-width-mobile: 40rem;
+  --nav-panel-mobile-height: calc(var(--nav-mobile-height) - var(--drawer-height));
+  --nav-width: calc(270 / var(--rem-base) * 1rem);
+  --doc-max-width: calc(828 / var(--rem-base) * 1rem);
+  --doc-mobile-max-width: calc(720 / var(--rem-base) * 1rem);
   /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 2;