use desktop media qualifier instead of mobile media qualifier for CSS vars

diff --git a/src/css/base.css b/src/css/base.css
index c11e98a..2c23963 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -11,13 +11,13 @@ body {
 
 html {
   box-sizing: border-box;
-  font-size: var(--body-font-size--mobile);
+  font-size: var(--body-font-size);
   -webkit-text-size-adjust: 100%;
 }
 
 @media screen and (min-width: 1024px) {
   html {
-    font-size: var(--body-font-size);
+    font-size: var(--body-font-size--desktop);
   }
 }
 

diff --git a/src/css/doc.css b/src/css/doc.css
index e518ebf..d30ba0d 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,17 +1,17 @@
 .doc {
   color: var(--doc-font-color);
-  font-size: var(--doc-font-size--mobile);
+  font-size: var(--doc-font-size);
   line-height: var(--doc-line-height);
   margin: 0 auto;
-  max-width: var(--doc-max-width--mobile);
+  max-width: var(--doc-max-width);
   padding: 0 1rem 4rem;
 }
 
 @media screen and (min-width: 1024px) {
   .doc {
-    font-size: var(--doc-font-size);
+    font-size: var(--doc-font-size--desktop);
     margin: 0 2rem;
-    max-width: var(--doc-max-width);
+    max-width: var(--doc-max-width--desktop);
   }
 }
 

diff --git a/src/css/nav.css b/src/css/nav.css
index 038bba6..8ecf7b5 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -32,7 +32,7 @@
   background: var(--nav-background);
   position: relative;
   top: var(--toolbar-height);
-  height: var(--nav-height--mobile);
+  height: var(--nav-height);
 }
 
 @media screen and (min-width: 769px) {
@@ -46,7 +46,7 @@
     top: var(--navbar-height);
     box-shadow: none;
     position: sticky;
-    height: var(--nav-height);
+    height: var(--nav-height--desktop);
   }
 }
 
@@ -64,12 +64,12 @@ html.is-clipped--nav {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  height: var(--nav-panel-height--mobile);
+  height: var(--nav-panel-height);
 }
 
 @media screen and (min-width: 1024px) {
   .nav-panel-menu {
-    height: var(--nav-panel-height);
+    height: var(--nav-panel-height--desktop);
   }
 }
 

diff --git a/src/css/vars.css b/src/css/vars.css
index 48a205b..dded350 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -18,8 +18,8 @@
   --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-font-size--mobile: 1.0625em; /* 17px */
+  --body-font-size: 1.0625em; /* 17px */
+  --body-font-size--desktop: 1.125em; /* 18px */
   --body-font-size--print: 0.9375em; /* 15px */
   --body-line-height: 1.15;
   --body-font-color: var(--color-jet-70);
@@ -70,8 +70,8 @@
   --warning-on-color: var(--color-white);
   /* doc */
   --doc-font-color: var(--color-jet-50);
-  --doc-font-size: calc(17 / var(--rem-base) * 1rem);
-  --doc-font-size--mobile: inherit;
+  --doc-font-size: inherit;
+  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
   --doc-line-height: 1.6;
   --heading-font-color: var(--color-jet-80);
   --heading-font-weight: normal;
@@ -112,13 +112,13 @@
   --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-height: calc(var(--body-min-height) - var(--toolbar-height));
+  --nav-height--desktop: var(--body-min-height);
   --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
-  --nav-panel-height--mobile: calc(var(--nav-height--mobile) - var(--drawer-height));
+  --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
-  --doc-max-width: calc(828 / var(--rem-base) * 1rem);
-  --doc-max-width--mobile: calc(720 / var(--rem-base) * 1rem);
+  --doc-max-width: calc(720 / var(--rem-base) * 1rem);
+  --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
   /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 2;