fix: 📱 update header nav styles to be more relaxed on tablets

This commit is contained in:
Sebin Nyshkim 2024-10-23 17:16:11 +02:00
parent 0ae8cc8992
commit c70ee60df9

View file

@ -27,8 +27,8 @@
<header class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
<div class="flex min-h-16 max-w-screen-xl items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto sm:justify-between sm:rounded-xl dark:bg-sky-950">
<div class="hidden sm:flex sm:items-center">
<img src="/img/sebin.png" alt="" class="m-4 max-w-14 rounded-full border-4 shadow-2xl">
<h1 class="text-3xl text-white">Sebin's Blog</h1>
<img src="/img/sebin.png" alt="" class="m-4 max-w-12 rounded-full border-4 shadow-2xl lg:max-w-14 lg:m-5">
<h1 class="text-2xl text-white lg:text-3xl">Sebin's Blog</h1>
</div>
<nav class="eleventy-navigation" aria-label="Main">
{{
@ -36,7 +36,7 @@
eleventyNavigation |
eleventyNavigationToHtml({
listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
anchorClass: "rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800",
anchorClass: "rounded-xl px-4 py-2 capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg sm:text-lg md:m-0 md:max-h-12 lg:text-xl hover:dark:bg-sky-800",
activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
activeKey: eleventyNavigation.key or page.url.split('/')[1]
}) |