Mobile logo

_sass/_chaospott.scss

@@ -107,6 +107,24 @@ ul.nav > li > a {
   color: $nav-link-color;
 }
 
+@media (min-width: 768px) and (max-width: 1200px) {
+  .navbar > .container {
+    width: auto;
+    margin-right: 15px;
+    margin-left: 15px;
+  }
+
+  .navbar .divider-vertical {
+    margin-right: clamp(1px, calc(1.16vw - 7.92px), 6px);
+    margin-left: clamp(1px, calc(1.16vw - 7.92px), 6px);
+  }
+
+  ul.navbar-nav li a {
+    padding-right: clamp(5px, calc(2.32vw - 12.84px), 15px);
+    padding-left: clamp(5px, calc(2.32vw - 12.84px), 15px);
+  }
+}
+
 .post-content img {
   display: block;
   margin: auto;
@@ -154,27 +172,45 @@ ul.nav > li > a {
   border-left-color: #111111;
 }
 
-@media (max-width: 767px) {
+.navbar-brand {
+  display: none;
+}
+
+@media (max-width: 768px) {
   #large-header {
     display: none;
   }
+  #large-header.mobile-large-logo {
+    display: block;
+    height: 160px;
+    margin-bottom: 96px;
+
+    img {
+      top: 16px;
+      height: 220px;
+      max-width: calc(100vw - 30px);
+    }
+  }
   .navbar-header {
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
   }
   .navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 50px;
+    padding: 8px 15px;
+  }
+  .navbar-brand-logo {
     display: block;
+    width: auto;
+    height: 34px;
   }
   .navbar-collapse .nav > .divider-vertical {
     display: none;
   }
 }
 
-@media (min-width: 768px) {
-  .navbar-brand {
-    display: none;
-  }
-}
-
 rect.bordered {
   stroke: $background-color;
   stroke-width: 1px;