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

Improve header for mobile

Browse Source
This commit is contained in:
prototypa
2022-08-14 19:12:52 -04:00
parent 0ef72dbe65
commit 73b2853b18
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/astro/headers/BasicHeader.astro
View File

@ -4,7 +4,7 @@ const {} = Astro.props;
---
<header
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-transparent backdrop-blur-sm border-b dark:border-b-0"
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
>
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
<div class="flex justify-between">
@ -36,7 +36,7 @@ const {} = Astro.props;
aria-label="Main navigation"
id="menu"
>
<ul class="flex flex-col py-2 md:py-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed">
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base">
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@ -58,6 +58,14 @@ const {} = Astro.props;
>Blog
</a>
</li>
<li class="md:hidden">
<a
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="https://github.com/onwidget/astrowind"
>
Github
</a>
</li>
</ul>
<div class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed">
<div class="hidden items-center mr-3 md:flex">