fix(logo-text): long logo text breaks layout

* fix(logo-text): long logo text breaks layout
* chore(sass): add task to watch and recompile sass

close #26

package.json

@@ -25,7 +25,8 @@
     "compile:js": "webpack -p",
     "compile": "npm run compile:sass && npm run compile:js && node banner.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "prerelease": "npm run lint && npm run test && npm run compile && npm run changelog"
+    "prerelease": "npm run lint && npm run test && npm run compile && npm run changelog",
+    "watch:sass": "nodemon -e scss -x 'npm run compile:sass'"
   },
   "repository": {
     "type": "git",
@@ -74,6 +75,7 @@
     "jest": "^20.0.4",
     "jest-junit": "^2.1.0",
     "node-sass": "^4.5.3",
+    "nodemon": "^1.12.1",
     "promise-polyfill": "^6.0.2",
     "raf": "^3.4.0",
     "react-test-renderer": "^16.0.0",

source/style/_doc/navigation.scss

@@ -3,6 +3,7 @@
 //
 .doc-navbar {
   position: fixed;
+  display: flex;
   top: 0;
   right: 0;
   bottom: auto;
@@ -20,34 +21,40 @@
   }
 
   .doc-search-form {
-    float: right;
     margin-top: 0.7rem;
     margin-bottom: 0rem;
+    margin-left: auto;
 
     @media screen and (min-width: $doc-breakpoint) {
       display: none
     }
   }
 
   &__logo {
-    display: inline-block;
-    line-height: $doc-navbar-height - 4px;
-    vertical-align: middle;
+    flex-grow: 1;
+    display: flex;
     height: 100%;
+    align-items: center;
+
+    @media screen and (max-width: $doc-breakpoint) {
+      flex-grow: initial;
+    }
   }
 
   &__logo__img {
-    display: inline-block;
-    vertical-align: middle;
     width: 30px;
+    height: 30px;
     margin-right: 6px;
   }
 
   &__logo__text {
-    color: $doc-navbar-logo-text-color;
+    flex-grow: 1;
+    margin-right: 0.6rem;
+    line-height: 1.6rem;
     font-size: 14px;
     font-family: "Source Sans Pro", "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
     font-weight: 700;
+    color: $doc-navbar-logo-text-color;
 
     @media screen and (max-width: $doc-breakpoint) {
       display: none