commit fa541a36259d8f7a1b9e5224d375f3a114ececb7
Author: Bùi Thành Nhân <hi@imnhan.com>
Date:   Sun Aug 30 19:49:02 2020 +0700

    somewhat ok navbar
    
    Doesn't cope well with long usernames though.

diff --git a/src/pytaku/static/js/layout.js b/src/pytaku/static/js/layout.js
index 7a566e5..aeca911 100644
--- a/src/pytaku/static/js/layout.js
+++ b/src/pytaku/static/js/layout.js
@@ -9,11 +9,12 @@ function Navbar(initialVNode) {
       let userLink;
       if (Auth.isLoggedIn()) {
         userLink = m("span.nav--greeting", [
-          m("span", ["Welcome, ", m("b", Auth.username)]),
+          m("span", ["Hi ", m("b", Auth.username)]),
           m(Button, {
             text: isLoggingOut ? " logging out" : " logout",
             icon: "log-out",
             color: "red",
+            title: "Log out",
             onclick: (ev) => {
               isLoggingOut = true;
               m.redraw();
@@ -40,6 +41,10 @@ function Navbar(initialVNode) {
           m.route.Link,
           { class: "nav--logo", href: Auth.isLoggedIn() ? "/f" : "/" },
           [
+            m("img.nav--logo--favicon", {
+              src: "/static/favicon.svg",
+              alt: "home",
+            }),
             m("img.nav--logo--img", {
               src: "/static/pytaku.svg",
               alt: "home",
diff --git a/src/pytaku/static/spa.css b/src/pytaku/static/spa.css
index 9e65918..0b81337 100644
--- a/src/pytaku/static/spa.css
+++ b/src/pytaku/static/spa.css
@@ -41,19 +41,22 @@ nav {
   background-color: var(--bg-black);
   padding: 0 var(--body-padding);
   display: flex;
-  flex-wrap: wrap;
 }
 nav > * {
   margin: var(--body-padding) 0;
 }
 .nav--logo {
-  width: 150px;
   margin-right: var(--body-padding);
+  flex: 0 0 150px;
 }
-.nav--logo--img {
+.nav--logo--img,
+.nav--logo--favicon {
   max-width: 100%;
   display: block;
 }
+.nav--logo--favicon {
+  display: none;
+}
 .nav--search-form {
   display: inline-flex;
   align-items: stretch;
@@ -73,6 +76,7 @@ .nav--greeting {
   margin-bottom: auto;
   display: flex;
   padding: 0.5rem 0 0.5rem 0.5rem;
+  text-align: right;
 }
 .nav--greeting > button {
   margin-left: 0.5rem;
@@ -97,6 +101,43 @@ .nav--link i {
   margin-right: 0.3rem;
 }
 
+@media (max-width: 679px) {
+  .nav--search-form > input {
+    width: 10rem;
+  }
+}
+
+@media (max-width: 539px) {
+  .nav--greeting > button > i {
+    margin: 0;
+  }
+  .nav--greeting > button > span {
+    display: none;
+  }
+  .nav--logo--img {
+    display: none;
+  }
+  .nav--logo--favicon {
+    display: inline;
+  }
+  .nav--logo {
+    flex: 0 0 43px;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  .nav--search-form {
+    flex-basis: 100%;
+  }
+  .nav--search-form > input {
+    width: 5rem;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .nav--link:last-child {
+    margin-left: 0.5rem;
+  }
+}
+
 /* Route content common styling */
 #spa-root {
   display: flex;