From 1ef7868e7b65f0382bc68f8ff03cfa2b19140b8e Mon Sep 17 00:00:00 2001
From: T <T>
Date: Tue, 2 Jun 2026 00:39:26 +0200
Subject: [PATCH] Mobile logo

---
 _includes/header.html |  3 ++-
 _layouts/default.html |  2 +-
 _sass/_chaospott.scss | 50 +++++++++++++++++++++++++++++++++++++------
 blog/repaircafe.html  |  1 +
 index.html            |  1 +
 5 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 25ae96ea..27c85568 100644
--- a/_includes/header.html
+++ b/_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>
diff --git a/_layouts/default.html b/_layouts/default.html
index eec9767f..34c6cdaf 100644
--- a/_layouts/default.html
+++ b/_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" %}
diff --git a/_sass/_chaospott.scss b/_sass/_chaospott.scss
index dbf017d1..b40270a3 100644
--- a/_sass/_chaospott.scss
+++ b/_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;
diff --git a/blog/repaircafe.html b/blog/repaircafe.html
index c6226e61..b85f09c9 100644
--- a/blog/repaircafe.html
+++ b/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>
diff --git a/index.html b/index.html
index a4601728..fbf898d7 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 ---
 layout: default
+show_mobile_large_logo: true
 ---
 
 <div class="container" id="posts" style="margin-top: 2rem;">