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
2021-09-28 13:29:47 +08:00
parent 82c32e1b6f
commit 9871d136bd
9 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BlogPost.js
View File

@@ -4,7 +4,7 @@ import TagItem from '@/components/TagItem'
const BlogPost = ({ post }) => {
return (
<article key={post.id}
className='inline-block border dark:border-gray-600 my-2 md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 rounded-3xl bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
className='inline-block border dark:border-gray-600 my-2 md:mx-2 w-full md:max-w-md duration-200 hover:shadow-2xl rounded-3xl bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
{/* 封面图 */}
{post.page_cover && post.page_cover.length > 1 && (
<a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>

6
components/DarkModeButton.js
View File

@@ -9,9 +9,9 @@ const DarkModeButton = () => {
localStorage.setItem('theme', newTheme)
}
return <div onClick={handleChangeDarkMode}
className=' justify-center align-middle font-bold text-xl rounded cursor-pointer text-gray-600 hover:scale-125 transform duration-200
dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
<span className={'fa px-1 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o')} />
className=' justify-center align-middle font-bold text-xl cursor-pointer hover:scale-125 transform duration-200
dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
<i className={'fa px-1 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o')} />
</div>
}
export default DarkModeButton

2
components/Footer.js
View File

@@ -8,7 +8,7 @@ const Footer = ({ fullWidth = true }) => {
const from = +BLOG.since
return (
<footer
className='p-5 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
className='p-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
>
<div className='py-2'>
<span className='text-xl border-b-2'>菜单</span>

4
components/RightAside.js
View File

@@ -5,8 +5,8 @@ const RightAside = ({ toc }) => {
// 无目录就直接返回空
if (toc.length < 1) return <></>
return <aside className='bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
<div className='sticky top-8 w-60 overflow-x-auto'>
return <aside className='bg-gray-100 dark:bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
<div className='sticky top-8 w-52 overflow-x-auto'>
<Toc toc={toc}/>
</div>
</aside>

2
components/ShareButton.js
View File

@@ -31,7 +31,7 @@ const ShareButton = ({ post }) => {
</div>
<div
ref={btnRef}
className='border dark:bg-black bg-white px-4 py-3 cursor-pointer text-md hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
className='border dark:border-gray-600 dark:bg-black bg-white px-4 py-3 cursor-pointer text-md hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
<div className='dark:text-gray-200 fa fa-share-alt' title='share' />
</div>
</div>

22
components/SideBar.js
View File

@@ -41,22 +41,23 @@ const SideBar = ({ tags, currentTag }) => {
className={(collapse ? '' : '') + ' z-10 duration-500 ease-in-out'}
>
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' hover:shadow-2xl dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
<section className='mx-5 pt-5 pb-2'>
<section className='mx-5 pt-6 pb-2'>
<Link href='/'>
<a
className='text-3xl hover:shadow-2xl text-black dark:bg-gray-900 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
</Link>
</section>
<section className='text-gray-500 text-sm px-6 pt-3 pb-5 dark:text-gray-300'>
<section className='text-gray-500 text-sm px-7 pt-3 pb-5 dark:text-gray-300'>
<i className='fa fa-map-marker mr-1' />
Fuzhou, China
</section>
{/* 搜索框 */}
<div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
<div className='hover:block hidden fixed left-0 top-0 w-screen h-screen bg-black z-20 opacity-40'/>
<input
type='text'
placeholder={
@@ -72,7 +73,7 @@ const SideBar = ({ tags, currentTag }) => {
{/* <hr className='my-5' /> */}
<div className='p-5'>
<div className='p-6'>
<span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
<Tags tags={tags} currentTag={currentTag} />
</div>
@@ -80,12 +81,15 @@ const SideBar = ({ tags, currentTag }) => {
<Footer />
</div>
<div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-1 duration-500 ease-in-out'}>
<div className='my-5 text-xl rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0
dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
<i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)} />
<div className={(collapse ? 'left-0' : 'left-72') + ' space-x-2 fixed md:fixed flex top-0 px-4 py-1 duration-500 ease-in-out'}>
<div className='my-4 bg-gray-100 dark:bg-gray-800 bg-opacity-50 p-1 rounded'>
<div className=' justify-center align-middle font-bold text-xl cursor-pointer hover:scale-125 transform duration-200
dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
<i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)}/>
</div>
</div>
<div className='my-4 bg-gray-100 bg-opacity-50 p-1 rounded md:bg-opacity-0'>
<div className='my-4 bg-gray-100 dark:bg-gray-800 bg-opacity-50 p-1 rounded'>
<DarkModeButton />
</div>
</div>

6
components/Toc.js
View File

@@ -49,10 +49,10 @@ const Toc = ({ toc }) => {
return (
<>
<div className='text-center font-bold text-white'>
<div className='text-center font-bold text-black dark:text-white'>
文章目录
</div>
<nav className='notion-table-of-contents text-gray-400 underline'>
<nav className='notion-table-of-contents text-gray-500 dark:text-gray-400 underline'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
@@ -63,7 +63,7 @@ const Toc = ({ toc }) => {
'notion-table-of-contents-item',
`notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
activeSection === id &&
' font-bold text-white'
' font-bold text-black dark:text-white'
)}
>
<span

2
components/TopJumper.js
View File

@@ -27,7 +27,7 @@ const TopJumper = () => {
<div
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
<div
className='border dark:bg-black bg-white cursor-pointer hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow-2xl hover:scale-125'
className='border dark:border-gray-600 dark:bg-black bg-white cursor-pointer hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow-2xl hover:scale-125'
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
<a className='dark:text-gray-200 fa fa-arrow-up p-4' title={locale.POST.TOP}/>
</div>

2
layouts/ArticleLayout.js
View File

@@ -67,7 +67,7 @@ const ArticleLayout = ({
<article
ref={targetRef}
className='overflow-x-auto px-10 py-10 max-w-3xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
className='overflow-x-auto px-10 py-10 max-w-4xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
{/* 文章标题 */}
<h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
{frontMatter.title}