Mobile logo

_includes/header.html

@@ -2,7 +2,8 @@
     <div class="container">
         <div class="navbar-header">
             <a class="navbar-brand" href="/">
-                chaospott
+                <img class="navbar-brand-logo" src="{{ "/images/logo.svg" | prepend: site.baseurl }}" alt="" />
+                <span>chaospott</span>
             </a>
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only">Toggle navigation</span>

_layouts/default.html

@@ -6,7 +6,7 @@
       {% include header.html %}
     </header>
     <main class="jumbotron">
-      <div class="container-fluid large-header" id="large-header">
+      <div class="container-fluid large-header{% if page.show_mobile_large_logo %} mobile-large-logo{% endif %}" id="large-header">
       <div class="row">
         <div class="col-xs-12 text-center">
           {% assign logo_url = page.logo_url | default: "/images/logo.svg" %}

_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;

blog/repaircafe.html

@@ -1,6 +1,7 @@
 ---
 layout: default
 logo_url: /images/logo-repaircafe.gif
+show_mobile_large_logo: true
 ---
 
 <script src="/js/elevator.js"></script>

index.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+show_mobile_large_logo: true
 ---
 
 <div class="container" id="posts" style="margin-top: 2rem;">