styling of navbar with logo + content offset; border-radius sharper

scss/_navbar.scss

@@ -25,6 +25,8 @@
   padding-left: $navbar-padding-x; // default: null
   @include gradient-bg();
 
+  margin-top: 1.5rem + $navbar-padding-y;
+
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.
   // The `flex-wrap` property is inherited to simplify the expanded navbars
@@ -52,6 +54,30 @@
 // Used for brand, project, or site names.
 
 .navbar-brand {
+  &.navbar-brand-logo {
+    margin-left: $navbar-brand-margin-end;
+    padding-left: 120px;
+
+    &::before {
+      content: ' ';
+      background-image: url('../img/hbbq_logo.png');
+      display: inline-block;
+      width: 120px;
+      height: 120px;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      position: absolute;
+      left: 0.5rem;
+      top: 50%;
+      transform: translate(0, -50%);
+      border-bottom-left-radius: 50%;
+      border-bottom-right-radius: 50%;
+      border-bottom-style: dotted;
+      border-color: $light;
+    }
+  }
+
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
   margin-right: $navbar-brand-margin-end;
@@ -63,12 +89,6 @@
   &:focus {
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
-
-  img.logo {
-    max-width: 50px;
-    max-height: 50px;
-    margin-right: 30px;
-  }
 }
 
 // Navbar nav