mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
首页 按钮布局 毛玻璃
This commit is contained in:
@@ -124,7 +124,7 @@ nav {
|
||||
|
||||
|
||||
.glassmorphism{
|
||||
background: hsla(0, 0%, 100%, .75);
|
||||
background: hsla(0, 0%, 100%, .05);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ import Link from 'next/link'
|
||||
const NavButtonGroup = (props) => {
|
||||
const { categories } = props
|
||||
|
||||
return <nav id='home-nav-button' style={{ lineHeight: '100px' }} className={'md:h-52 md:mt-32 px-5 mt-12 flex flex-wrap m-0 md:max-w-5xl md:space-x-12 space-y-2 md:space-y-0 md:flex justify-center'}>
|
||||
return <nav id='home-nav-button' className={'md:h-52 md:mt-6 xl:mt-32 px-5 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
|
||||
{categories.map(category => {
|
||||
return <Link key={`${category.name}`} title={`${category.name}`} href={`/category/${category.name}`} passHref>
|
||||
<a className='text-center w-full md:w-40 md:h-20 h-14 justify-center items-center flex border-white border-2 cursor-pointer rounded-lg font-serif hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>{category.name}</a>
|
||||
<a className='text-center w-full md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism font-serif hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>{category.name}</a>
|
||||
</Link>
|
||||
})}
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user