SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ upgrade to tailwind v4

Browse source
This commit is contained in:
Sebin Nyshkim 2025-01-30 18:27:37 +01:00
parent 6bacdd4a1c
commit 4a444614bc
8 changed files with 30 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/layouts/base.njk
View file

@ -33,7 +33,7 @@
</head>
<body class="bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
<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="flex min-h-16 max-w-(--breakpoint-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-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>
@ -44,7 +44,7 @@
eleventyNavigation |
eleventyNavigationToHtml({
listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
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",
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 dark:hover:bg-sky-800",
activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
activeKey: eleventyNavigation.key or page.url.split('/')[1]
}) |
@ -59,7 +59,7 @@
</main>
<footer class="pb-16">
<div class="mx-auto max-w-screen-xl divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
<div class="mx-auto max-w-(--breakpoint-xl) divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
<div class="flex flex-wrap gap-6 md:flex-nowrap md:gap-0"></div>
<div class="mt-16 flex flex-wrap justify-between gap-4 pt-10 sm:flex-nowrap">
<div class="basis-full space-y-4">