d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

样式动画微调

Browse Source
This commit is contained in:
tangly1024
2023-01-04 17:28:40 +08:00
parent 324dadbbd1
commit bf25721e84
11 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ThemeSwitch.js
View File

@@ -15,7 +15,7 @@ export function ThemeSwitch() {
return (<>
<Draggable>
<div id="draggableBox" className="fixed left-1 bottom-20 text-white bg-black z-50 rounded-lg shadow-card">
<div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
<div className="p-2 flex items-center">
<i className='fas fa-arrows cursor-move px-2' />
{/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}

6
themes/example/components/Nav.js
View File

@@ -23,7 +23,7 @@ export const Nav = (props) => {
return (
<nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
<div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
<div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
<div className="w-full text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
{links.map(link => {
return link && <Link
href={link.to}
@@ -32,7 +32,7 @@ export const Nav = (props) => {
{link.name}
</Link>;
</Link>
})}
</div>
<div className="w-full md:w-1/3 text-center md:text-right">
@@ -40,5 +40,5 @@ export const Nav = (props) => {
</div>
</div>
</nav>
);
)
}

2
themes/hexo/components/BlogPostCard.js
View File

@@ -103,7 +103,7 @@ const BlogPostCard = ({ post, showSummary }) => {
)}
</div>
</div>
);
)
}
export default BlogPostCard

6
themes/hexo/components/TopNav.js
View File

@@ -37,13 +37,13 @@ const TopNav = props => {
nav && nav.classList.replace('bg-white', 'bg-none')
nav && nav.classList.replace('text-black', 'text-white')
nav && nav.classList.replace('border', 'border-transparent')
nav && nav.classList.replace('shadow-md', 'shadow-none')
nav && nav.classList.replace('drop-shadow-md', 'shadow-none')
nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
} else {
nav && nav.classList.replace('bg-none', 'bg-white')
nav && nav.classList.replace('text-white', 'text-black')
nav && nav.classList.replace('border-transparent', 'border')
nav && nav.classList.replace('shadow-none', 'shadow-md')
nav && nav.classList.replace('shadow-none', 'drop-shadow-md')
nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
}
@@ -127,7 +127,7 @@ const TopNav = props => {
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
{/* 导航栏 */}
<div id='sticky-nav' className={'top-0 drop-shadow-md fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 border-transparent dark:border-transparent'}>
<div id='sticky-nav' className={'top-0 shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform transition-all duration-200 border-transparent dark:border-transparent'}>
<div className='w-full flex justify-between items-center px-4 py-2'>
<div className='flex'>
<Logo {...props}/>

5
themes/matery/LayoutArchive.js
View File

@@ -1,6 +1,7 @@
import { useEffect } from 'react'
import BlogPostArchive from './components/BlogPostArchive'
import Card from './components/Card'
import HeaderArticle from './components/HeaderArticle'
import LayoutBase from './LayoutBase'
export const LayoutArchive = (props) => {
@@ -17,8 +18,8 @@ export const LayoutArchive = (props) => {
}, 300)
}
}, [])
return <LayoutBase {...props} >
<Card className='w-full'>
return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
<Card className='w-full -mt-32'>
<div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
{Object.keys(archivePosts).map(archiveTitle => (
<BlogPostArchive

6
themes/matery/LayoutCategory.js
View File

@@ -10,7 +10,7 @@ export const LayoutCategory = props => {
return (
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
<div className='inner-wrapper'>
<div id='inner-wrapper' className='w-full'>
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
@@ -24,7 +24,7 @@ export const LayoutCategory = props => {
{e.name}({e.count})
</div>
</Link>
);
)
})}
</div>
</div>
@@ -34,5 +34,5 @@ export const LayoutCategory = props => {
</div>
</LayoutBase>
);
)
}

2
themes/matery/LayoutCategoryIndex.js
View File

@@ -8,7 +8,7 @@ export const LayoutCategoryIndex = props => {
return (
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
<div className='inner-wrapper'>
<div id='inner-wrapper' className='w-full'>
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">

2
themes/matery/LayoutSearch.js
View File

@@ -40,7 +40,7 @@ export const LayoutSearch = props => {
return (
<LayoutBase {...props} currentSearch={currentSearch}>
{!currentSearch && <>
<div className="my-6 px-2 mt-12">
<div className="my-6 px-2 mt-12 w-full">
<SearchInput cRef={cRef} {...props} />
{/* 分类 */}
<Card className="w-full mt-4">

2
themes/matery/LayoutTagIndex.js
View File

@@ -8,7 +8,7 @@ export const LayoutTagIndex = props => {
const { locale } = useGlobal()
return (
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
<div className='inner-wrapper drop-shadow-xl'>
<div id='inner-wrapper' className='w-full drop-shadow-xl'>
<div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">

6
themes/matery/components/BlogPostCard.js
View File

@@ -8,8 +8,8 @@ const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
return (
<div
data-aos="fade-up"
data-aos-duration="600"
data-aos="zoom-in"
data-aos-duration="300"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
@@ -83,7 +83,7 @@ const BlogPostCard = ({ post, showSummary }) => {
</div>
</div>
);
)
}
export default BlogPostCard

7
themes/matery/components/TopNav.js
View File

@@ -34,12 +34,12 @@ const TopNav = props => {
if (navTransparent) {
nav && nav.classList.replace('bg-indigo-700', 'bg-none')
nav && nav.classList.replace('text-black', 'text-white')
nav && nav.classList.replace('shadow-sm', 'shadow-none')
nav && nav.classList.replace('drop-shadow-xl', 'shadow-none')
nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
} else {
nav && nav.classList.replace('bg-none', 'bg-indigo-700')
nav && nav.classList.replace('text-white', 'text-black')
nav && nav.classList.replace('shadow-none', 'shadow-sm')
nav && nav.classList.replace('shadow-none', 'drop-shadow-xl')
nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
}
@@ -126,9 +126,8 @@ const TopNav = props => {
return (
<div id='top-nav'>
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
{/* 导航栏 */}
<div id='sticky-nav' className={'flex justify-center top-0 shadow-black shadow-sm fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform duration-200'}>
<div id='sticky-nav' className={'flex justify-center top-0 shadow-black shadow-none fixed bg-none dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform transition-all duration-200'}>
<div className='w-full max-w-6xl flex justify-between items-center px-4 py-2'>
{/* 左侧功能 */}
<div className='justify-start items-center block lg:hidden '>