博客列表顶部边距;
悬浮百分比负数异常;
标签文字不换行;
背景色不当;
This commit is contained in:
tangly
2021-11-07 09:21:34 +08:00
parent 60c3b652f9
commit e3423f9768
5 changed files with 13 additions and 11 deletions

View File

@@ -51,7 +51,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
if (!postsToShow || postsToShow.length === 0) {
return <BlogPostListEmpty currentSearch={currentSearch}/>
} else {
return <div id='post-list-wrapper' className='mt-20 mx-2 md:mx-20' ref={targetRef}>
return <div id='post-list-wrapper' className='mt-20 mx-2 pt-10 md:mx-20' ref={targetRef}>
{currentCategory && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>

View File

@@ -18,12 +18,14 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
const shouldShow = scrollY > 100
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
if (shouldShow !== show) {
switchShow(shouldShow)
}
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
if (per > 100) per = 100
changePercent(per)
}
useEffect(() => {

View File

@@ -4,7 +4,7 @@ const TagItem = ({ tag }) => (
<Link href={`/tag/${encodeURIComponent(tag)}`}>
<div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
<div> <i className='fa fa-tag mr-1 '/> {tag}</div>
<div className='whitespace-nowrap'> <i className='fa fa-tag mr-1 '/> {tag}</div>
</div>
</Link>
)

View File

@@ -50,9 +50,9 @@ const Toc = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs))
return <div className='dark:bg-gray-600 min-h-screen'>
return <div className='dark:bg-gray-800 min-h-screen'>
<div
className=' dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
className='dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
文章目录
</div>
<nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto scroll-hidden p-2'>

View File

@@ -62,12 +62,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
{post.title}
</h1>
<h2 className='text-gray-500 my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
<h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
{post.summary}
</h2>
{/* 文章作者等关联信息 */}
<div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-800 dark:text-white'>
<div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
<div className='flex-nowrap flex'>
<div className='py-2 opacity-50'>
发表于
@@ -136,8 +136,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
<section className='md:flex md:justify-between'>
{post.tags && (
<div className='flex flex-nowrap leading-8 p-1 py-4'>
<div className='hidden md:block dark:text-gray-300'>标签</div>
<div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
<div className='hidden md:block dark:text-gray-300'>标签</div>
{post.tags.map(tag => (
<TagItem key={tag} tag={tag} />
))}