fix: off-centre logo on mobile

Fix #1436
Close #1437

assets/scss/academic/_nav.scss

@@ -102,21 +102,25 @@
   font-weight: bold;
 }
 
+// Dynamically fit logo image to space available.
+// No need to explicitly set a size for each breakpoint.
+// See https://caniuse.com/#feat=mdn-css_properties_width_stretch .
 .navbar-brand img {
-  max-height: 60px;
-  max-width: fit-content;  /* Otherwise logo disappears at some responsive sizes. */
+  width: auto;
+  height: -moz-available;
+  height: -webkit-fill-available;
+  height: -webkit-stretch;
+  height: stretch;
+  max-width: fit-content;  // Must override default responsive image style.
 }
 
 #navbar-main .main-menu-item ul li .nav-link {
   color: $sta-menu-text;
 }
 
 @include media-breakpoint-down(md) {
-  .navbar-brand img {
-    max-height: 40px;
-  }
   .navbar-brand {
-    max-width: 100px;
+    max-width: fit-content;
     margin: 0 auto;
     position: absolute;
     left: 0;