mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Header with white background on mobile dark

Browse Source
This commit is contained in:
prototypa
2023-07-28 09:12:47 -04:00
parent d6f3055e31
commit bd781b925f
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/tailwind.css
View File

@ -42,12 +42,12 @@
}
#header.scroll > div:first-child {
@apply bg-white md:bg-white/90 md:backdrop-blur-md;
@apply bg-page md:bg-white/90 md:backdrop-blur-md;
box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
}
.dark #header.scroll > div:first-child,
#header.scroll.dark > div:first-child {
@apply bg-white md:bg-[#030621e6] border-b border-gray-500/20;
@apply bg-page md:bg-[#030621e6] border-b border-gray-500/20;
box-shadow: none;
}
/* #header.scroll > div:last-child {

2
src/components/widgets/Header.astro
View File

@ -53,7 +53,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
<header
class:list={[
{ sticky: isSticky, relative: !isSticky, dark: isDark },
"top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
"top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out bg-page",
]}
{...id ? { id } : {}}
>