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-10-07 19:31:32 +08:00
parent 2f10574f8b
commit 0baddd241a
4 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/SideBar.js
View File

@@ -45,17 +45,17 @@ const SideBar = ({ tags, currentTag, post }) => {
className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none ') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
{/* Logo */}
<section className='px-5 pt-8 pb-2 flex-col pb-2 sticky top-0 bg-white dark:bg-gray-800 z-10'>
<section className='flex border-b px-5 pt-8 pb-5 flex-col sticky top-0 bg-white dark:bg-gray-800 z-10'>
<Link href='/'>
<a
className='text-3xl hover:scale-125 dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 duration-200 transform'>{BLOG.title}</a>
<div
className='mx-auto text-center cursor-pointer text-3xl dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
</Link>
<i className='fa fa-map-marker pl-2 dark:text-gray-300 mt-3' >&nbsp;Fuzhou, China</i>
<i className='mx-auto fa fa-map-marker pl-1 dark:text-gray-300 mt-5' >&nbsp;Fuzhou, China</i>
</section>
{/* 搜索框 */}
<section className={ (post ? ' ' : ' sticky top-0 ') + 'flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'}>
<section className={ (post ? ' ' : ' sticky top-0 ') + ' border-t border-b flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'}>
<input
type='text'
placeholder={
@@ -73,9 +73,9 @@ const SideBar = ({ tags, currentTag, post }) => {
<div className={ (post ? ' ' : ' sticky top-0 ') + 'px-6'}>
{/* 菜单 */}
<nav className='mt-4'>
<nav className='mt-6'>
<strong className='text-2xl text-gray-600 dark:text-gray-400'>菜单</strong>
<ul className='leading-8 text-gray-500 dark:text-gray-400'>
<ul className='mt-4 leading-8 text-gray-500 dark:text-gray-400'>
<li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
className='ml-2'>关于本站</span></a></li>
<li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
@@ -85,30 +85,32 @@ const SideBar = ({ tags, currentTag, post }) => {
</nav>
{/* 标签云 */}
<section className='mt-4'>
<section className='mt-6'>
<strong className='text-2xl text-gray-600 dark:text-gray-400'>标签</strong>
<Tags tags={tags} currentTag={currentTag} />
<div className='mt-4'>
<Tags tags={tags} currentTag={currentTag} />
</div>
</section>
{/* 联系 */}
<section>
<div className='mt-4'>
<div className='mt-6'>
<strong className='text-2xl text-gray-600 dark:text-gray-400'>联系我</strong>
<div className='py-2'>
<div className='mt-2 py-2'>
<SocialButton />
</div>
</div>
</section>
{/* 站点信息 */}
<section className='py-2'>
<section className='my-3'>
<Footer />
</section>
</div>
{post && (
<div className='sticky top-28'>
<div className='sticky top-32'>
<TocBar toc={post.toc} />
</div>
)}

22
components/SocialButton.js
View File

@@ -3,13 +3,21 @@ import React from 'react'
const SocialButton = () => {
return <>
<div className='space-x-3 text-2xl text-gray-500 dark:text-gray-400'>
<a className='fa fa-github' target='_blank' rel='noreferrer' title={'github'}
href={'https://github.com/tangly1024'} />
<a className='fa fa-twitter' target='_blank' rel='noreferrer' title={'twitter'}
href={'https://twitter.com/troy1024_1'} />
<a className='fa fa-telegram' href={'https://t.me/tangly_1024'} title={'telegram'} />
<a className='fa fa-weibo' target='_blank' rel='noreferrer' title={'weibo'}
href={'http://weibo.com/tangly1024'} />
<a target='_blank' rel='noreferrer' title={'github'}
href={'https://github.com/tangly1024'} >
<div className='fa fa-github transform hover:scale-125 duration-150'/>
</a>
<a target='_blank' rel='noreferrer' title={'twitter'}
href={'https://twitter.com/troy1024_1'} >
<div className='fa fa-twitter transform hover:scale-125 duration-150'/>
</a>
<a href={'https://t.me/tangly_1024'} title={'telegram'} >
<div className='fa fa-telegram transform hover:scale-125 duration-150'/>
</a>
<a target='_blank' rel='noreferrer' title={'weibo'}
href={'https://weibo.com/tangly1024'} >
<div className='fa fa-weibo transform hover:scale-125 duration-150'/>
</a>
</div>
</>
}

2
components/TocBar.js
View File

@@ -48,7 +48,7 @@ const TocBar = ({ toc }) => {
}, throttleMs)
return <div className='bg-white dark:bg-gray-800 pb-10'>
<div className='text-2xl bg-gray-100 font-bold text-black dark:text-white py-6 px-6'>
<div className='border-t border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
文章目录
</div>
<nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto overflow-x-hidden'>

4
layouts/ArticleLayout.js
View File

@@ -58,7 +58,7 @@ const ArticleLayout = ({
<div>
<header
className='mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
{/* 封面图 */}
{frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -68,7 +68,7 @@ const ArticleLayout = ({
<article
ref={targetRef}
className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
className='hover:shadow-2xl mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
{/* 文章标题 */}
<h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
{frontMatter.title}