reposition navbar item

content/collections/article/2024-03-18.cara-buat-artikel.md

@@ -0,0 +1,13 @@
+---
+id: 7bce7b42-aced-4fed-9f2b-66302232bcc4
+blueprint: article
+title: 'Cara Buat Artikel'
+image: 1663760968882.jpg
+article_date: '2024-03-18'
+article_featured: false
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710751574
+---
+cara 1
+cara2 
+cara 3

public/assets/.meta/1663760968882.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 140858
+last_modified: 1710751567
+width: 800
+height: 1000
+mime_type: image/jpeg
+duration: null

public/css/main.css

@@ -150,8 +150,7 @@ p {
 }
 
 .nav-logo-desktop {
-    width: 3.75rem;
-    height: 3.75rem;
+    width: 70%
 }
 
 .nav-logo-text {

resources/css/main.css

@@ -145,8 +145,7 @@ p {
 }
 
 .nav-logo-desktop {
-    width: 3.75rem;
-    height: 3.75rem;
+    width: 70%
 }
 
 .nav-logo-text {

resources/views/layout.antlers.html

@@ -19,7 +19,7 @@
 
         {{ partial:partials/navbar }}
 
-        <div class="mx-auto lg:min-h-screen flex flex-col items-center justify-center">
+        <div class="mx-auto justify-center pt-5">
             {{ template_content }}
         </div>
 

resources/views/partials/_navbar.antlers.html

@@ -1,35 +1,29 @@
 <header>
-    <nav id="main-nav" class="navbar navbar-expand-lg sticky-top" style="background-color: black;">
+    <nav id="main-nav" class="navbar navbar-expand-lg justify-content-end fixed-top" style="background-color: black;">
         <div class="container-fluid d-flex flex-wrap justify-between p-0">
-
             <div class="d-none d-lg-block mx-auto mx-xxl-0">
-                <a style="text-decoration: none;" href="/"><img src="/assets/logo_1.png" class="nav-logo-desktop">
-                    <span class="text-light text-highlight my-auto nav-logo-text">THEBOLA</span>
-                </img></a>
-
+                <a style="text-decoration: none;" href="/"><img src="/assets/image/dblogo.png" class="nav-logo-desktop"/></a>
+            </div>
+            <div class="d-inline d-lg-none position-absolute d-flex" style="left:0;top:20px;width:100%;">
+                <a class="mx-auto" style="text-decoration: none;" href="/"><img src="/assets/image/dblogo.png" class="nav-logo-desktop" style="width:150px"/></a>
             </div>
-            <div class="mx-0 mx-lg-auto mx-xxl-0">
+            <div class="ms-auto" style="z-index: 399;">
                 <div class="d-flex">
-                    <button class="navbar-toggler p-0" type="button" data-bs-toggle="collapse"
+                    <button class="ms-auto navbar-toggler p-0" type="button" data-bs-toggle="collapse"
                         data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                         aria-label="Toggle navigation">
                         <i class="text-light fa-solid fa-bars fa-xl"></i>
                     </button>
-                    <div class="d-inline d-lg-none mx-auto">
-                        <img src="/assets/logo_1.png" class="img-fluid" style="width:60px;">
-                            <span class="text-light text-highlight my-auto" style="font-size:20px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
-                        </img>
-                    </div>
                 </div>
 
                 <div class="collapse navbar-collapse my-auto" id="navbarNavDropdown">
-                    <ul class="navbar-nav">
+                    <ul class="navbar-nav text-end">
                         {{ nav:main_menu }}
-                            <li class="nav-item">
+                            <li class="nav-item my-1">
                                 <a href="{{ url }}" class="nav-link" aria-current="page"> {{ title }} </a>
                             </li>
                         {{ /nav:main_menu }}
-                        <li class="nav-item">
+                        <li class="nav-item my-1">
                             <a href="https://thebola.club/login" class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
                         </li>
                     </ul>