navbar improvement

openartcoded · Dec 15, 2023 · 1f406f9 · 1f406f9
1 parent 378cf8c
commit 1f406f9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/public/css/dist.css b/public/css/dist.css
@@ -1578,6 +1578,16 @@ select {
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
 
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .object-fill {
   -o-object-fit: fill;
      object-fit: fill;
@@ -1604,6 +1614,14 @@ select {
   padding-top: 0.5rem;
 }
 
+.ps-1 {
+  padding-inline-start: 0.25rem;
+}
+
+.pe-1 {
+  padding-inline-end: 0.25rem;
+}
+
 .text-right {
   text-align: right;
 }
@@ -1663,6 +1681,16 @@ select {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }

diff --git a/views/navbar.html b/views/navbar.html
@@ -1,24 +1,16 @@
 {% macro linkOrText(name, link, extraClasses='') %} {%if activePage == link %}
-<p
-  class="font-medium underline underline-offset-4 decoration-pink-500 {{extraClasses}}"
->
+<p class="underline underline-offset-4 decoration-pink-500 {{extraClasses}} font-bold">
   {{name | capitalize}}
 </p>
 {%else %}
-<a
-  class="font-medium hover:underline underline-offset-4 decoration-pink-500 {{extraClasses}}"
-  href="/{{link}}"
-  >{{name | capitalize}}</a
->
+<a class="hover:underline underline-offset-4 decoration-pink-500 {{extraClasses}} font-bold " href="/{{link}}">{{name |
+  capitalize}}</a>
 {%endif%} {% endmacro %}
-<nav
-  class="bg-slate-900 w-full border-b border-slate-700 p-2 text-white touch-none"
->
+<nav class="bg-slate-900 w-full border-b border-slate-700 p-2 text-slate-700 touch-none">
   <div class="md:flex md:justify-between">
-    <a class="hidden md:inline" href="/" data-href="/"
-      >{%block navTitle %}{{"artcoded" if not pageTitle else
-      pageTitle}}{%endblock%}</a
-    >
+    <a class="hidden md:inline font-bold bg-orange-500 rounded ps-1 pe-1" href="/" data-href="/">{%block navTitle
+      %}{{"artcoded" if not pageTitle else
+      pageTitle}}{%endblock%}</a>
     <div class="flex justify-evenly md:justify-end gap-1 lg:gap-8">
       {{linkOrText('home', '', 'visible md:hidden' )}} {{linkOrText('blog',
       'blog' )}} {{linkOrText('gallery', 'gallery' )}} {{linkOrText('sparql',