From 197b5d1f0683240a5d91d227e34298f0a7a539bf Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sun, 24 Nov 2019 14:16:15 +0000
Subject: [PATCH] fix: off-centre logo on mobile

Fix #1436
Close #1437
---
 assets/scss/academic/_nav.scss | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/assets/scss/academic/_nav.scss b/assets/scss/academic/_nav.scss
index 30007f4d2..d70afa408 100644
--- a/assets/scss/academic/_nav.scss
+++ b/assets/scss/academic/_nav.scss
@@ -102,9 +102,16 @@
   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 {
@@ -112,11 +119,8 @@
 }
 
 @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;