website: fix dynamic metrics page (css issue)

2 files changed, 15 insertions, 19 deletions

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index c3f80ca25..c41670358 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -69,13 +69,13 @@ endfor
 
     <div class="row menu">
       <ul class="menu">
-        <li class="home"><a href="{{url_root}}">Inter</a></li>
-        <li class="samples"><a href="{{url_root}}samples/" {% if page.url contains "/samples/" %}class="active"{% endif %}>Samples</a></li>
-        <li class="glyphs"><a href="{{url_root}}glyphs/" {% if page.url contains "/glyphs/" %}class="active"{% endif %}>Glyphs</a></li>
-        <li class="dynmetrics"><a href="{{url_root}}dynmetrics/" {% if page.url contains "/dynmetrics/" %}class="active"{% endif %}>Dynamic Metrics</a></li>
-        <li class="lab"><a href="{{url_root}}lab/" {% if page.url contains "/lab/" %}class="active"{% endif %}>Lab</a></li>
-        <li class="source"><a href="https://github.com/rsms/inter/">Source</a></li>
-        <li class="download"><a href="{{ download_url }}">Download &darr;</a></li>
+        <li class="nav-home"><a href="{{url_root}}">Inter</a></li>
+        <li class="nav-samples"><a href="{{url_root}}samples/" {% if page.url contains "/samples/" %}class="active"{% endif %}>Samples</a></li>
+        <li class="nav-glyphs"><a href="{{url_root}}glyphs/" {% if page.url contains "/glyphs/" %}class="active"{% endif %}>Glyphs</a></li>
+        <li class="nav-dynmetrics"><a href="{{url_root}}dynmetrics/" {% if page.url contains "/dynmetrics/" %}class="active"{% endif %}>Dynamic Metrics</a></li>
+        <li class="nav-lab"><a href="{{url_root}}lab/" {% if page.url contains "/lab/" %}class="active"{% endif %}>Lab</a></li>
+        <li class="nav-source"><a href="https://github.com/rsms/inter/">Source</a></li>
+        <li class="nav-download"><a href="{{ download_url }}">Download &darr;</a></li>
       </ul>
     </div>
 
diff --git a/docs/res/base.css b/docs/res/base.css
index 2105a3e3e..80aebcfde 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -388,7 +388,7 @@ h2.banner {
     .row.menu ul li:first-child > a:hover {
       text-decoration:underline;
     }
-  .row.menu ul li.home > a {
+  .row.menu ul li.nav-home > a {
     font-weight: 600;
     color: white;
     opacity: 1;
@@ -405,19 +405,19 @@ h2.banner {
     /*background:#666;*/
     padding: 10px 15px;
   }
-  .row.menu ul li.home {
+  .row.menu ul li.nav-home {
     text-align:center;
     margin: 0 0 -12px 0;
     width: 100%;
   }
-  .row.menu ul li.home > a {
+  .row.menu ul li.nav-home > a {
     border-bottom: none;
     padding: 0 1em;
     margin: 0.5em 0;
     line-height: 34px;
     border-radius: 90px;
   }
-  .row.menu ul li.home > a:hover {
+  .row.menu ul li.nav-home > a:hover {
     color: white;
     background-color: #222;
     text-decoration: none;
@@ -431,21 +431,17 @@ h2.banner {
   }
 }
 
-.glyphs {}
-.dynmetrics {}
-.download {}
-
 @media only screen and (max-width: 800px) {
-  .menu .dynmetrics { display: none; }
+  .menu .nav-dynmetrics { display: none; }
 }
 @media only screen and (max-width: 640px) {
-  .menu .download { display: none; }
+  .menu .nav-download { display: none; }
 }
 @media only screen and (max-width: 319px) {
-  .menu .source { display: none; }
+  .menu .nav-source { display: none; }
 }
 @media only screen and (max-width: 250px) {
-  .menu .lab { display: none; }
+  .menu .nav-lab { display: none; }
 }