refactor(website): only show search box on md and up

This commit is contained in:
iCrawl 2023-04-16 00:17:12 +02:00
parent a516d46f91
commit 3ea26cc1a6
No known key found for this signature in database
GPG key ID: 1AB888B16355FBB2
2 changed files with 9 additions and 2 deletions

View file

@ -10,7 +10,7 @@ export default function Page() {
return (
<div className="min-h-screen">
<Banner />
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-0">
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">

View file

@ -77,7 +77,7 @@ export default function Header() {
<div className="hidden lg:flex lg:grow lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
<Button
as="div"
className="w-56 grow rounded bg-white px-4 py-2.5 outline-0 sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
className="hidden w-56 grow rounded bg-white px-4 py-2.5 outline-0 md:block sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => dialog?.toggle()}
>
<div className="flex flex-row place-items-center gap-4 md:justify-between">
@ -89,6 +89,13 @@ export default function Header() {
</div>
</Button>
<div className="flex flex-row place-items-center gap-4">
<Button
as="div"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => dialog?.toggle()}
>
<VscSearch size={24} />
</Button>
<Button
aria-label="GitHub"
as="a"