use variables for line heights

diff --git a/src/css/base.css b/src/css/base.css
index b28cab5..1c70236 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -12,7 +12,6 @@ body {
 html {
   box-sizing: border-box;
   font-size: var(--body-mobile-font-size);
-  line-height: var(--body-line-height);
   -webkit-text-size-adjust: 100%;
 }
 

diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css
index bf8992b..be11140 100644 (file)
--- a/src/css/breadcrumbs.css
+++ b/src/css/breadcrumbs.css
@@ -2,7 +2,7 @@
   display: none;
   flex: 1 1;
   padding: 0 0.5rem 0 0.75rem;
-  line-height: 1.35;
+  line-height: var(--nav-line-height);
 }
 
 @media screen and (min-width: 1024px) {

diff --git a/src/css/header.css b/src/css/header.css
index 9062489..fabd2f0 100644 (file)
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -122,7 +122,7 @@ body {
 .navbar-link {
   color: var(--navbar-menu-font-color);
   display: block;
-  line-height: 1.5;
+  line-height: var(--doc-line-height);
   padding: 0.5rem 1rem;
   position: relative;
 }

diff --git a/src/css/nav.css b/src/css/nav.css
index 6e31a04..fd17d0e 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -154,7 +154,7 @@ html.is-clipped--nav {
   position: absolute;
   height: calc(var(--nav-line-height) * 1em);
   width: calc(var(--nav-line-height) * 1em);
-  margin-top: -0.5px;
+  margin-top: -0.05em;
   margin-left: calc(var(--nav-line-height) * -1em);
 }
 
@@ -201,7 +201,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .components {
-  line-height: 1.6;
+  line-height: var(--doc-line-height);
   flex-grow: 1;
   box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
   background: var(--nav-secondary-background);