Move coronavirus views into header

This is a little awkward on mobile, but it doesn't take up any more
vertical space than the previous version did, and is much better on
desktop.

tildes/scss/modules/_site-header.scss

@@ -16,6 +16,18 @@
 
     margin-left: auto;
   }
+
+  .toast {
+    width: auto;
+    margin: 0 0.2rem 0 0;
+    padding: 0.2rem 0.4rem 0.2rem 1.4rem;
+    text-indent: -1rem;
+    overflow: hidden;
+
+    a {
+      white-space: nowrap;
+    }
+  }
 }
 
 .site-header-context {
@@ -57,6 +69,7 @@
   }
 
   margin-left: auto;
+  flex-shrink: 0;
 
   &.badge {
     margin-right: 0.6rem;

tildes/tildes/templates/home.jinja2

@@ -12,7 +12,11 @@
   <meta property="og:description" content="Tildes is a non-profit community site with no advertising or investors. It respects its users and their privacy, and prioritizes high-quality content and discussions.">
 {% endblock %}
 
-{% block header_context_link %}{% endblock %}
+{% block header_context_link %}
+  {% if not view %}
+    <div class="toast toast-minor" id="coronavirus-views">Specialized views: <a href="/?view=coronavirus-filtered">No coronavirus topics</a> / <a href="/?view=coronavirus-only">Only coronavirus topics</a></div>
+  {% endif %}
+{% endblock %}
 
 {% block filter_info %}
   {% if view %}
@@ -29,10 +33,6 @@
 {% endblock %}
 
 {% block content %}
-  {% if not view %}
-    <div class="toast toast-minor" id="coronavirus-views">Specialized views: <a href="/?view=coronavirus-filtered">No coronavirus topics</a> / <a href="/?view=coronavirus-only">Only coronavirus topics</a></div>
-  {% endif %}
-
   {% if request.user %}
     {% if request.user.subscriptions %}
       {{ super() }}