fix header sizing

Author: hathix

_includes/header.html

@@ -51,8 +51,8 @@
   <div class="navbar fixed-top navbar-expand-md navbar-light bg-{{ navbar_bg }}" id="main-navbar">
     <a class="navbar-brand" href="{{ site.baseurl }}/">
       <img src="{{ site.baseurl }}/assets/img/logo-large.png" width="45" height="45"
-        class="d-inline-block align-top" alt="{{ site.name }}">
-      <span class="hidden-xs">{{ site.name }}</span>
+        class="d-none d-sm-inline-block align-top" alt="{{ site.name }}">
+      <span class="">{{ site.name }}</span>
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

assets/css/custom.scss

@@ -58,6 +58,12 @@ body {
   font-family: Nexa !important;
   font-weight: bold;
   font-size: 32px;
+  vertical-align: middle;
+
+  @media (max-width: 575.98px) {
+    // extra-small screens - like phone portrait mode
+    font-size: 20px;
+  }
 }
 
 .centered {