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

feature:

Browse Source 
字体颜色微调
This commit is contained in:
tangly1024
2021-12-22 16:55:06 +08:00
parent 81b205f5f1
commit b83566e4f4
8 changed files with 18 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/ArticleDetail.js
View File

@@ -54,7 +54,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
</div>
)}
{/* 文章Title */}
<h2 className="font-bold text-2xl text-black dark:text-white font-serif pt-10">
<h2 className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
{' '}
{post.title}
</h2>
@@ -88,9 +88,9 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
</div>
</section>
<section className="px-1 py-2 my-1 text-sm font-light text-gray-600 dark:text-gray-400">
<h2 className="px-1 py-2 my-1 text-md font-light text-gray-600 dark:text-gray-400">
{post.summary}
</section>
</h2>
<section className='flex justify-end py-2 pl-1 dark:text-white items-center font-light italic text-sm'>
<WordCount/>
@@ -99,7 +99,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
</header>
{/* Notion文章主体 */}
<section id='notion-article' className='overflow-x-auto'>
<section id='notion-article' className='overflow-x-auto px-1'>
{blockMap && (
<NotionRenderer
className={`${BLOG.font}`}
@@ -164,11 +164,6 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
<TocDrawerButton onClick={() => { drawerRight.current.handleSwitchVisible() }} />
<TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
</div>
{/* 移动端顶部进度条 */}
{/* <div className='fixed left-0 top-0 w-full z-40 block md:hidden'>
<Progress targetRef={targetRef} />
</div> */}
</>)
}

6
components/BlogPostCard.js
View File

@@ -13,12 +13,12 @@ const BlogPostCard = ({ post, tags }) => {
<div className='p-8 flex flex-col justify-between w-full'>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<a className='cursor-pointer text-lg md:text-xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
<a className='cursor-pointer text-xl xl:text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
{post.title}
</a>
</Link>
<p className='my-4 text-gray-800 dark:text-gray-300 text-sm font-light'>{post.summary}</p>
<p className='my-4 text-gray-800 dark:text-gray-300 text-md font-light'>{post.summary}</p>
<div className='flex items-center justify-between flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
<div>
@@ -41,7 +41,7 @@ const BlogPostCard = ({ post, tags }) => {
{post?.page_cover && (
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className='h-60 w-full xl:max-w-sm relative rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
<div className='h-60 w-full xl:max-w-xs relative rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
<Image className='hover:scale-105 transform duration-500 rounded-t-xl xl:rounded-t-none xl:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
</div>
</Link>

6
components/CategoryGroup.js
View File

@@ -10,9 +10,9 @@ const CategoryGroup = ({ currentCategory, categories }) => {
const selected = currentCategory === category
return <Link key={category} href={`/category/${category}`} passHref>
<a className={(selected
? 'hover:text-white bg-blue-500 text-white '
: 'dark:text-gray-400 text-gray-500 hover:text-blue-500 ') +
' rounded-xl text-md w-full items-center duration-300 dark:hover:text-blue-400 hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}>
? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
: 'dark:text-gray-400 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400') +
' rounded-xl text-md w-full items-center duration-300 hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}>
<FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
</a>
</Link>

2
components/LatestPostsGroup.js
View File

@@ -32,7 +32,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
const selected = currentPath === `${BLOG.path}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
<a className={(selected ? 'text-white bg-blue-500 dark:bg-black ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
<a className={(selected ? 'text-white bg-blue-600 ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
<div className={ 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap overflow-hidden ' +
'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline ' }>
<FontAwesomeIcon icon={faFileAlt} className='mr-2'/>

4
components/MenuButtonGroup.js
View File

@@ -28,8 +28,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className={'py-1 my-1 px-5 mx-2 rounded-xl hover:bg-blue-400 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
(selected ? 'bg-blue-500 text-white ' : ' ')} >
<a className={'py-1 my-1 px-5 mx-2 rounded-xl hover:bg-blue-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
(selected ? 'bg-blue-600 text-white ' : ' ')} >
<div className='my-auto justify-center flex '>
<FontAwesomeIcon icon={link.icon} />
</div>

4
components/Progress.js
View File

@@ -23,9 +23,9 @@ const Progress = ({ targetRef }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-purple-400'>
return (<div className='h-4 w-full shadow-2xl bg-blue-400'>
<div className='text-center w-full absolute text-white text-xs'>{percent}%</div>
<div className='h-4 bg-purple-700 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
<div className='h-4 bg-blue-600 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
</div>)
}

4
components/Toc.js
View File

@@ -55,7 +55,7 @@ const Toc = ({ toc, targetRef }) => {
<div className='w-full'>
<Progress targetRef={targetRef}/>
</div>
<nav className=' dark:text-gray-100 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
<nav className=' dark:text-gray-300 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
@@ -64,7 +64,7 @@ const Toc = ({ toc, targetRef }) => {
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-mono
notion-table-of-contents-item-indent-level-${tocItem.indentLevel}
${activeSection === id && ' font-bold text-purple-500 dark:text-purple-400'}`}
${activeSection === id && ' font-bold text-blue-600 dark:text-blue-400'}`}
>
<span
style={{

2
styles/notion.css
View File

@@ -68,7 +68,7 @@
}
.notion {
font-size: 16px;
font-size: 17px;
line-height: 1.5;
color: var(--fg-color);
caret-color: var(--fg-color);