Change style

Author: Joshua-Lester3

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -120,11 +120,11 @@
                         </div>
                     </div>
 
-                    <a v-if="chapterParentPage" :href="chapterParentPage.href" class="menu-chapter-title text-light">
+                    <a v-if="chapterParentPage" :href="chapterParentPage.href" class="menu menu-chapter-title text-light">
                         <span v-cloak>{{chapterParentPage.title}}</span>
                     </a>
-                    <div class="menu-chapter-title text-light" v-if="isContentPage">
-                        <span v-cloak>Progress: {{percentComplete}}%</span>
+                    <div class="menu menu-progress text-light" v-if="isContentPage">
+                        <span v-cloak>{{percentComplete}}%</span>
                     </div>
 
                     <div class="d-flex align-items-center">

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -207,25 +207,31 @@ a:hover {
   }
 }
 
+.menu {
+  white-space: nowrap;
+  overflow: hidden;
+  text-decoration: none;
+}
+
 .menu-brand {
   font-style: normal;
   font-weight: 400;
   font-size: 1.5rem;
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
   margin-left: 5px;
 }
 
 .menu-chapter-title {
   font-style: normal;
   font-weight: 300;
   font-size: 1.2rem;
-  text-decoration: none;
   text-overflow: ellipsis;
-  overflow: hidden;
   cursor: pointer;
-  white-space: nowrap;
+}
+
+.menu-progress {
+  font-style: normal;
+  font-weight: 200;
+  font-size: 1rem;
 }
 
 .has-tooltip {