fix(css): reduce mobile header height

- disable line break for site title
- remove menu button label
- increase size of menu button

themes/chameleon/layout/_partial/header.ejs

@@ -24,9 +24,9 @@
   </nav>
   <%/* Nav menu for mobile */%>
   <nav class="mobile-nav">
-    <h1><a href="<%- url_for(theme.menu['Home']) %>"><%= config.title %></a></h1>
+    <h1 class="site-title"><a href="<%- url_for(theme.menu['Home']) %>"><%= config.title %></a></h1>
     <ul class="mobile-nav-menu">
-    <label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label>
+    <label for="mobile-menu-toggle"><a class="menu-button no-underline">&#9776;</a></label>
     <input id="mobile-menu-toggle" type="checkbox"/>
     <ul class="mobile-nav-link">
       <div class="searchContainer">

themes/chameleon/source/css/chameleon.css

@@ -59,6 +59,11 @@ h1 {
   margin: 0.5em 0;
 }
 
+/* Disable line break for site title */
+h1.site-title {
+  white-space: nowrap;
+}
+
 h2 {
   font-size: 1.3em;
 }
@@ -638,6 +643,10 @@ td {
   text-align: center;
 }
 
+.menu-button {
+  font-size: 2em;
+}
+
 /* search bar */
 .searchContainer {
   border-radius: 5px;
@@ -732,6 +741,8 @@ svg#link {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    /* reduce height of mobile header */
+    height: 1.5em;
   }
 
   /* display links when menu button is clicked */