样式微调

This commit is contained in:
tangly1024
2022-04-12 13:27:31 +08:00
parent e3ebc004d1
commit 4c9e84e11d
3 changed files with 8 additions and 8 deletions

View File

@@ -13,7 +13,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
*/ */
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE) const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const showPagination = posts.length === BLOG.POSTS_PER_PAGE const showPagination = postCount >= BLOG.POSTS_PER_PAGE
if (!posts || posts.length === 0) { if (!posts || posts.length === 0) {
return <BlogPostListEmpty /> return <BlogPostListEmpty />
@@ -26,7 +26,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
<BlogPostCard key={post.id} post={post} /> <BlogPostCard key={post.id} post={post} />
))} ))}
</div> </div>
{showPagination && <PaginationNumber page={page} totalPage={totalPage} /> } {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
</div> </div>
) )
} }

View File

@@ -25,7 +25,7 @@ export default function ArticleDetail(props) {
return (<div id="container" className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full "> return (<div id="container" className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
<div itemScope itemType="https://schema.org/Movie" <div itemScope itemType="https://schema.org/Movie"
className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-gray-800" className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
> >
{showArticleInfo && <header className='animate__slideInDown animate__animated'> {showArticleInfo && <header className='animate__slideInDown animate__animated'>

View File

@@ -60,10 +60,10 @@ const Toc = ({ toc }) => {
return <div className='px-3'> return <div className='px-3'>
<div className='w-full pb-1'> <div className='w-full pb-1'>
<Progress/> <Progress />
</div> </div>
<div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}> <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
<nav className='h-full font-sans text-black'> <nav className='h-full font-sans text-black dark:text-gray-300'>
{toc.map((tocItem) => { {toc.map((tocItem) => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)
tocIds.push(id) tocIds.push(id)
@@ -74,9 +74,9 @@ const Toc = ({ toc }) => {
className={`notion-table-of-contents-item duration-300 transform font-light className={`notion-table-of-contents-item duration-300 transform font-light
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `} notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
> >
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`${activeSection === id && ' font-bold text-red-400 underline'}`}> <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`${activeSection === id && ' font-bold text-red-400 underline'}`}>
{tocItem.text} {tocItem.text}
</span> </span>
</a> </a>
) )
})} })}