From b87fd164ab4cf7c9185c18cd59ac9be3a2481893 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Sat, 23 Apr 2022 13:20:49 +0200
Subject: [PATCH] make header cleaner on mobile

---
 _includes/base/header.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/_includes/base/header.html b/_includes/base/header.html
index a9041ddb..7b2220f0 100644
--- a/_includes/base/header.html
+++ b/_includes/base/header.html
@@ -1,11 +1,13 @@
 <header class="cm-gray-2 body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary">
-    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
-      <a class="flex title-font font-medium items-center cm-gray-1 mb-4 md:mb-0" href="{{ '/' | relative_url }}">
+    <div class="container mx-auto flex flex-wrap p-5 flex-row items-center">
+      <a class="flex title-font font-medium items-center cm-gray-1 mb-0 mr-2" href="{{ '/' | relative_url }}">
         <img src="{{ '/assets/logo.png' | relative_url }}" alt="logo" height="32" width="32" class="h-8">
         <span class="ml-3 text-xl">{{ site.title }}</span>
       </a>
 
-      <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
+      <div class="flex-grow xs:flex-none"></div>
+
+      <nav class="md:mr-auto md:py-1 xs:ml-4 xs:pl-4 xs:border-l xs:border-gray-400	flex flex-wrap items-center text-base justify-center">
         <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.blog-link %}">Blog</a>
         <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.plugin-link %}">Plugins</a>
         <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.doc-link %}">Docs</a>
@@ -17,9 +19,9 @@
         <a class="mr-2 hover:cm-gray-1" href="#business">for <strong>business</strong></a>
         <a class="mr-2 hover:cm-gray-1" href="#edu">for <strong>edu</strong></a>
       </nav>
-      {% endif %}
       <a href="{{site.demo-link}}" class="inline-flex items-center bg-gray-100 ml-2 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
         Open demo
       </a>
+      {% endif %}
     </div>
 </header>
\ No newline at end of file