Modify top-nav styles for board name and version

src/app/top-nav/top-nav.template.html

@@ -1,5 +1,13 @@
 <nav class="nav-top">
-    <h1>TaskBoard<span><small>- {{ pageName }} <small class="dark">({{ version }})</small></small></span></h1>
+    <h1>
+        TaskBoard
+        <span>
+            <small>
+                - {{ pageName }}
+                <small class="dark small">({{ version }})</small>
+            </small>
+        </span>
+    </h1>
 
     <div class="buttons">
         <button class="flat active">Boards</button>

src/scss/_nav-top.scss

@@ -4,12 +4,21 @@
 
     h1 {
         margin-top: 3px;
+
+        span {
+            padding: 0;
+        }
     }
 
     .dark {
         color: $color-text;
     }
 
+    .small {
+        font-size: .655555em;
+        font-weight: 500;
+    }
+
     .buttons {
         float: right;
         margin-top: -2.2em;
@@ -17,7 +26,7 @@
         .flat {
             background-color: lighten($color-background, 3%);
             color: $color-primary;
-            transition: background-color 0.5s;
+            transition: background-color .5s;
 
             &:hover {
                 background-color: lighten($color-background, 7%);