Skip to content

Commit

Permalink
fixed links width with flex in nav bar
Browse files Browse the repository at this point in the history
  • Loading branch information
iokarkan committed Jul 21, 2023
1 parent cf37f00 commit db7099b
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 46 deletions.
94 changes: 48 additions & 46 deletions _includes/nav.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
</nav>
81 changes: 81 additions & 0 deletions assets/css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -584,6 +584,10 @@ video {
right: -1rem;
}

.isolate {
isolation: isolate;
}

.z-20 {
z-index: 20;
}
Expand Down Expand Up @@ -724,6 +728,14 @@ video {
margin-bottom: auto;
}

.ml-4 {
margin-left: 1rem;
}

.ml-6 {
margin-left: 1.5rem;
}

.block {
display: block;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1000,6 +1024,10 @@ video {
list-style-type: none;
}

.list-decimal {
list-style-type: decimal;
}

.grid-flow-dense {
grid-auto-flow: dense;
}
Expand Down Expand Up @@ -1080,6 +1108,10 @@ video {
gap: 1rem;
}

.gap-2 {
gap: 0.5rem;
}

.gap-y-5 {
row-gap: 1.25rem;
}
Expand Down Expand Up @@ -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));
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down

0 comments on commit db7099b

Please sign in to comment.