From db7099b44ac9e58597564cd6ef9b42e9350eaff5 Mon Sep 17 00:00:00 2001
From: iokarkan <iokarkan@github.com>
Date: Fri, 21 Jul 2023 18:39:31 +0300
Subject: [PATCH] fixed links width with flex in nav bar

---
 _includes/nav.html      | 94 +++++++++++++++++++++--------------------
 assets/css/tailwind.css | 81 +++++++++++++++++++++++++++++++++++
 2 files changed, 129 insertions(+), 46 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index 8bc86d23..b5456051 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,12 +1,12 @@
 {% if page.url == "/" %} <!-- don't show in menu for Homepage -->
 <nav class="flex flex-wrap items-center justify-center px-2 mb-4">
-{% endif %}
-{% if page.url != "/" %} <!-- don't show in menu for Homepage -->
-<nav class="flex flex-wrap items-center justify-center px-2 mb-12">
-{% endif %}
-    <div class="container px-2 mx-auto flex flex-wrap items-center justify-center">
+    {% endif %}
+    {% if page.url != "/" %} <!-- don't show in menu for Homepage -->
+    <nav class="flex flex-wrap items-center justify-center px-2 mb-12">
+        {% endif %}
+        <div class="container px-2 mx-auto flex flex-wrap items-center justify-center">
 
-        <!-- <div class="w-full relative flex justify-center">
+            <!-- <div class="w-full relative flex justify-center">
             <button type="button" onclick="toggleNavbar('navbar')"
                 class="rounded-md inline-flex items-center justify-center text-gray-500 hidden" aria-expanded="false">
                 <span class="sr-only">Open menu</span>
@@ -18,55 +18,57 @@
             </button>
         </div> -->
 
-        <!-- https://github.com/mathjax/MathJax/issues/277 -->
-        <!--also, note the liquid hack used here without closing the div -->
-        {% if page.url != "/" %} <!-- don't show in menu for Homepage -->
-        <div class="z-20 bg-white shadow-lg rounded-b-xl py-5 px-2 fixed flex md:block space-x-1 sm:space-x-2" id="navbar">
-        {% endif %}
-        {% if page.url == "/" %} <!-- show in menu for Homepage -->
-        <div class="z-20 bg-white rounded-b-xl flex md:block space-x-1 sm:space-x-2" id="navbar">
-        {% endif %}
-
-                <div>
-
-
-                    {% if page.url != "/" %} <!-- don't show in menu for Homepage -->
-                    <div class="flex flex-row w-42 pb-2">
-                        <img class="m-auto object-cover h-6 w-6 rounded-full"
-                            src="{{site.baseurl}}/assets/img/{{site.author-image}}" alt="author profile image">
-                        <div class="absolute w-6 h-6 backdrop-filter backdrop-contrast-200 bg-white/30"></div>
-                        <h1 class="grow font-mono text-slate-400 text-xs my-auto ml-1 px-1 py-1">{{site.author}}</h1>
-                    </div>
+            <!-- https://github.com/mathjax/MathJax/issues/277 -->
+            <!--also, note the liquid hack used here without closing the div -->
+            {% if page.url != "/" %} <!-- don't show in menu for Homepage -->
+            <div class="z-20 bg-white shadow-lg rounded-b-xl py-5 px-2 fixed flex md:block space-x-1 sm:space-x-2"
+                id="navbar">
+                {% endif %}
+                {% if page.url == "/" %} <!-- show in menu for Homepage -->
+                <div class="z-20 bg-white rounded-b-xl flex md:block space-x-1 sm:space-x-2" id="navbar">
                     {% endif %}
 
                     <div>
 
-                        {% if page.url != "/" %} <!-- don't show Home in menu for Homepage -->
-                        <a class="font-mono mx-auto " href="{{site.baseurl}}/">
-                            <button
-                                class="uppercase text-gray-500 hover:text-gray-900 sm:w-36 w-18 text-xs sm:text-sm bg-white hover:bg-gray-100 px-2 py-1 sm:py-2 border border-gray-400 rounded shadow">
-                                Home
-                            </button>
-                        </a>
+
+                        {% if page.url != "/" %} <!-- don't show in menu for Homepage -->
+                        <div class="flex flex-row w-42 pb-2">
+                            <img class="m-auto object-cover h-6 w-6 rounded-full"
+                                src="{{site.baseurl}}/assets/img/{{site.author-image}}" alt="author profile image">
+                            <div class="absolute w-6 h-6 backdrop-filter backdrop-contrast-200 bg-white/30"></div>
+                            <h1 class="grow font-mono text-slate-400 text-xs my-auto ml-1 px-1 py-1">{{site.author}}
+                            </h1>
+                        </div>
                         {% endif %}
 
+                        <div class="flex flex-row gap-1">
 
+                            {% if page.url != "/" %} <!-- don't show Home in menu for Homepage -->
+                            <a class="font-mono lg:py-1" href="{{site.baseurl}}/">
+                                <button
+                                    class="uppercase text-gray-500 hover:text-gray-900 sm:w-36 w-18 text-xs sm:text-sm bg-white hover:bg-gray-100 px-2 py-1 sm:py-2 border border-gray-400 rounded shadow">
+                                    Home
+                                </button>
+                            </a>
+                            {% endif %}
 
-                        <!-- dynamic menu based on navigation info in _config.yml -->
-                        {% for link in site.nav-menu %}
-                        {% if page.permalink != {{link.permalink}} %} <!-- don't show current page in menu -->
-                        <a class="font-mono   lg:py-1 mx-auto " href="{{site.baseurl}}/{{link.permalink}}">
-                            <button
-                                class="text-gray-500 hover:text-gray-900 uppercase sm:w-36 w-18 text-xs sm:text-sm bg-white hover:bg-gray-100 px-2 py-1 sm:py-2 border border-gray-400 rounded shadow">
-                                {{link.text}}
-                            </button>
-                        </a>
-                        {% endif %}
-                        {% endfor %}
+
+                            <!-- dynamic menu based on navigation info in _config.yml -->
+                            {% for link in site.nav-menu %}
+                            {% if page.permalink != {{link.permalink}} %} <!-- don't show current page in menu -->
+
+                            <a class="font-mono   lg:py-1" href="{{site.baseurl}}/{{link.permalink}}">
+                                <button
+                                    class="text-gray-500 hover:text-gray-900 uppercase sm:w-36 w-18 text-xs sm:text-sm bg-white hover:bg-gray-100 px-2 py-1 sm:py-2 border border-gray-400 rounded shadow">
+                                    {{link.text}}
+                                </button>
+                            </a>
+                            {% endif %}
+                            {% endfor %}
+                        </div>
                     </div>
                 </div>
-            </div>
 
+            </div>
         </div>
-    </div>
-</nav>
\ No newline at end of file
+    </nav>
\ No newline at end of file
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index e9b2fd32..688c4510 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -584,6 +584,10 @@ video {
   right: -1rem;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -724,6 +728,14 @@ video {
   margin-bottom: auto;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -875,6 +887,18 @@ video {
   width: 90%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
 .max-w-max {
   max-width: -moz-max-content;
   max-width: max-content;
@@ -1000,6 +1024,10 @@ video {
   list-style-type: none;
 }
 
+.list-decimal {
+  list-style-type: decimal;
+}
+
 .grid-flow-dense {
   grid-auto-flow: dense;
 }
@@ -1080,6 +1108,10 @@ video {
   gap: 1rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -1327,6 +1359,16 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-indigo-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 180 252 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1727,6 +1769,41 @@ video {
   color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
+.text-blue-50 {
+  --tw-text-opacity: 1;
+  color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity));
+}
+
+.text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
+.text-indigo-300 {
+  --tw-text-opacity: 1;
+  color: rgb(165 180 252 / var(--tw-text-opacity));
+}
+
+.text-indigo-200 {
+  --tw-text-opacity: 1;
+  color: rgb(199 210 254 / var(--tw-text-opacity));
+}
+
+.text-indigo-100 {
+  --tw-text-opacity: 1;
+  color: rgb(224 231 255 / var(--tw-text-opacity));
+}
+
+.text-indigo-50 {
+  --tw-text-opacity: 1;
+  color: rgb(238 242 255 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1735,6 +1812,10 @@ video {
   text-decoration-line: none !important;
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .mix-blend-plus-lighter {
   mix-blend-mode: plus-lighter;
 }