update variable convention

* use underscore for state modifier (e.g., _hover)
* use double hyphen for media modifier (e.g. --mobile)

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

diff --git a/src/css/doc.css b/src/css/doc.css
index efab3b3..e518ebf 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,9 +1,9 @@
 .doc {
   color: var(--doc-font-color);
-  font-size: var(--doc-mobile-font-size);
+  font-size: var(--doc-font-size--mobile);
   line-height: var(--doc-line-height);
   margin: 0 auto;
-  max-width: var(--doc-mobile-max-width);
+  max-width: var(--doc-max-width--mobile);
   padding: 0 1rem 4rem;
 }
 
@@ -107,7 +107,7 @@
 }
 
 .doc a:hover {
-  color: var(--link-hover-font-color);
+  color: var(--link_hover-font-color);
 }
 
 .doc i.fa {

diff --git a/src/css/header.css b/src/css/header.css
index fabd2f0..c919f83 100644 (file)
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -40,7 +40,7 @@ body {
 
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover {
-    background: var(--navbar-hover-background);
+    background: var(--navbar_hover-background);
     color: var(--navbar-font-color);
   }
 
@@ -49,7 +49,7 @@ body {
   }
 
   .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar-hover-background);
+    background: var(--navbar_hover-background);
     color: var(--navbar-font-color);
   }
 }
@@ -177,7 +177,7 @@ body {
 
   .navbar-menu a.navbar-item:hover,
   .navbar-menu .navbar-link:hover {
-    background-color: var(--navbar-menu-hover-background);
+    background-color: var(--navbar-menu_hover-background);
   }
 }
 
@@ -262,7 +262,7 @@ body {
   }
 
   .navbar-dropdown a.navbar-item:hover {
-    background-color: var(--navbar-menu-hover-background);
+    background-color: var(--navbar-menu_hover-background);
   }
 }
 

diff --git a/src/css/nav.css b/src/css/nav.css
index fd17d0e..038bba6 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-mobile-height);
+  height: var(--nav-height--mobile);
 }
 
 @media screen and (min-width: 769px) {
@@ -64,7 +64,7 @@ html.is-clipped--nav {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  height: var(--nav-panel-mobile-height);
+  height: var(--nav-panel-height--mobile);
 }
 
 @media screen and (min-width: 1024px) {

diff --git a/src/css/print.css b/src/css/print.css
index b6817a4..d709131 100644 (file)
--- a/src/css/print.css
+++ b/src/css/print.css
@@ -8,7 +8,7 @@
   }
 
   html {
-    font-size: var(--body-print-font-size);
+    font-size: var(--body-font-size--print);
   }
 
   a {

diff --git a/src/css/vars.css b/src/css/vars.css
index 81d698f..48a205b 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -19,8 +19,8 @@
   /* 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-font-size--mobile: 1.0625em; /* 17px */
+  --body-font-size--print: 0.9375em; /* 15px */
   --body-line-height: 1.15;
   --body-font-color: var(--color-jet-70);
   --body-font-family: "Roboto", sans-serif;
@@ -33,15 +33,15 @@
   --panel-border-color: var(--color-smoke-90);
   /* navbar */
   --navbar-background: var(--color-jet-80);
-  --navbar-hover-background: var(--color-black);
   --navbar-font-color: var(--color-white);
+  --navbar_hover-background: var(--color-black);
   --navbar-button-background: var(--color-white);
   --navbar-button-border-color: var(--panel-border-color);
   --navbar-button-font-color: var(--body-font-color);
   --navbar-menu-border-color: var(--panel-border-color);
   --navbar-menu-background: var(--color-white);
-  --navbar-menu-hover-background: var(--color-smoke-50);
   --navbar-menu-font-color: var(--body-font-color);
+  --navbar-menu_hover-background: var(--color-smoke-50);
   /* nav */
   --nav-background: var(--panel-background);
   --nav-border-color: var(--color-gray-10);
@@ -71,14 +71,14 @@
   /* doc */
   --doc-font-color: var(--color-jet-50);
   --doc-font-size: calc(17 / var(--rem-base) * 1rem);
-  --doc-mobile-font-size: inherit;
+  --doc-font-size--mobile: inherit;
   --doc-line-height: 1.6;
   --heading-font-color: var(--color-jet-80);
   --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);
   --link-font-color: #1565c0;
-  --link-hover-font-color: #104d92;
+  --link_hover-font-color: #104d92;
   --abstract-background: var(--color-smoke-70);
   --abstract-font-color: var(--color-jet-20);
   --abstract-border-color: var(--panel-border-color);
@@ -113,12 +113,12 @@
   --body-top: var(--navbar-height);
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: var(--body-min-height);
-  --nav-mobile-height: calc(var(--body-min-height) - var(--toolbar-height));
+  --nav-height--mobile: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
-  --nav-panel-mobile-height: calc(var(--nav-mobile-height) - var(--drawer-height));
+  --nav-panel-height--mobile: calc(var(--nav-height--mobile) - 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);
+  --doc-max-width--mobile: calc(720 / var(--rem-base) * 1rem);
   /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 2;