Header: make more responsive

src/components/Header.vue

@@ -4,7 +4,7 @@
       <b-container>
         <b-row class="header-branding">
           <b-col md="10">
-            <span class="header-title"><router-link to="home">autoradio/<b>dashboard</b></router-link></span>
+            <span class="header-title"><router-link to="home"><span class="d-none d-sm-inline">autoradio/</span><b>dashboard</b></router-link></span>
           </b-col>
           <b-col md="2" class="d-none d-sm-none d-md-block" align="right">
             <a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
@@ -14,7 +14,9 @@
     </div>
     <div>
       <b-container>
-        <b-navbar toggleable="md" type="dark" variant="dark">
+        <b-navbar toggleable="lg" type="dark" variant="dark">
+          <span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
+          <span class="d-sm-none menu-context-info">Hit menu button for more:</span>
           <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
           <b-collapse is-nav id="nav_collapse">
             <b-navbar-nav>
@@ -90,5 +92,8 @@ header > div:nth-child(2) {
   padding: 0;
   margin: 0;
 }
+.menu-context-info {
+  color: rgba(255, 255, 255, 0.5);
+}
 
 </style>