remove flowbite, implement custom js, remove unused if/else statement in navbar

This commit is contained in:
brooke 2024-06-10 19:31:59 -04:00
parent e86bfc4d49
commit 6a3a6f7dc7
4 changed files with 31 additions and 13 deletions

View file

@ -5,6 +5,5 @@
<body class="bg-black text-white min-h-screen flex flex-col"> <body class="bg-black text-white min-h-screen flex flex-col">
{{ partial "nav.html" . }} {{ block "main" . }}{{ end }} {{ partial {{ partial "nav.html" . }} {{ block "main" . }}{{ end }} {{ partial
"footer.html" . }} "footer.html" . }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
</body> </body>
</html> </html>

View file

@ -1,20 +1,13 @@
<div class="p-4 min-h-[40.27px] flex flex-row w-full justify-between bg-black"> <div class="p-4 min-h-[40.27px] flex flex-row w-full justify-between bg-black">
<a href="/"><img class="w-44 h-auto" src="{{ .Site.Params.logo }}" /></a> <a href="/"><img class="w-44 h-[40.2667px]" src="{{ .Site.Params.logo }}" /></a>
<nav class="place-self-center h-8 flex justify-end gap-2 text-white pr-6"> <nav class="place-self-center h-8 flex justify-end gap-2 text-white pr-6">
{{ range .Site.Menus.main }} {{ if $.IsMenuCurrent .Menu . }} {{ range .Site.Menus.main }}
<a
class="ml-2 underline underline-offset-0 decoration-2 decoration-transparent decoration-white underline-offset-2 place-self-center"
href="{{ .URL }}"
>
{{ $text := print .Name | safeHTML }} {{ $text }}
</a>
{{ else }}
<a <a
class="ml-2 underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center" class="ml-2 underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
href="{{ .URL }}" href="{{ .URL }}"
> >
{{ $text := print .Name | safeHTML }} {{ $text }} {{ $text := print .Name | safeHTML }} {{ $text }}
</a> </a>
{{ end }} {{ end }} {{ end }}
</nav> </nav>
</div> </div>

View file

@ -149,7 +149,7 @@
> >
<img <img
src="{{ .image }}" src="{{ .image }}"
class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" class="absolute block rounded-lg w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="" alt=""
/> />
</div> </div>
@ -341,4 +341,30 @@
} }
} }
}); });
const gallery = document.getElementById("gallery");
const carouselItems = gallery.querySelectorAll("[data-carousel-item]");
const prevButton = gallery.querySelector("[data-carousel-prev]");
const nextButton = gallery.querySelector("[data-carousel-next]");
let currentItemIndex = 0;
function showItem() {
carouselItems.forEach((item, index) => {
item.classList.add("hidden");
if (index === currentItemIndex) {
item.classList.remove("hidden");
}
});
}
function prevItem() {
currentItemIndex =
(currentItemIndex - 1 + carouselItems.length) % carouselItems.length;
showItem();
}
function nextItem() {
currentItemIndex = (currentItemIndex + 1) % carouselItems.length;
showItem();
}
prevButton.addEventListener("click", prevItem);
nextButton.addEventListener("click", nextItem);
showItem();
</script> </script>

File diff suppressed because one or more lines are too long