微调样式

components/Container.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect } from 'react'
 import CommonHead from '@/components/CommonHead'
-import TopNav from '@/components/TopNav'
 import throttle from 'lodash.throttle'
 import BLOG from '@/blog.config'
 import { useTheme } from '@/lib/theme'
@@ -15,14 +14,14 @@ const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) =
     const tagsBar = document.querySelector('#tags-bar')
     const rightToc = document.querySelector('#right-toc')
     if (scrollS >= windowTop && scrollS > 10) {
-      nav && nav.classList.add('-mt-16')
-      tagsBar && tagsBar.classList.add('-mt-32')
+      nav && nav.classList.replace('top-0', '-top-16')
+      tagsBar && tagsBar.classList.replace('top-16', 'top-0')
       sidebar && sidebar.classList.replace('top-20', 'top-2')
       rightToc && rightToc.classList.replace('top-16', 'top-0')
       windowTop = scrollS
     } else {
-      nav && nav.classList.remove('-mt-16')
-      tagsBar && tagsBar.classList.remove('-mt-32')
+      nav && nav.classList.replace('-top-16', 'top-0')
+      tagsBar && tagsBar.classList.replace('top-0', 'top-16')
       sidebar && sidebar.classList.replace('top-2', 'top-20')
       rightToc && rightToc.classList.replace('top-0', 'top-16')
       windowTop = scrollS

components/JumpToTop.js

@@ -37,15 +37,17 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
       className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
       <div
         style={{ backgroundColor: 'rgb(56, 144, 255)' }}
-        className='rounded-full dark:bg-gray-600 bg-white cursor-pointer'
+        className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
         {showPercent && (
         <div style={{ backgroundColor: 'rgb(56, 144, 255)' }} className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
-          {percent}%
+          <span>{percent}%</span>
         </div>
         )}
-        <a className='text-gray-100 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
-           title={locale.POST.TOP} />
+        <div className='text-2xl'>
+          <a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 '
+             title={locale.POST.TOP} />
+        </div>
       </div>
     </div>
 

components/TagsBar.js

@@ -10,7 +10,7 @@ import Link from 'next/link'
 const TagsBar = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-    <div id='tags-bar' className='fixed xl:mt-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+    <div id='tags-bar' className='fixed  top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
       <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
       <div className='z-30 sticky left-0 flex'>
         <div className='px-2 bg-white dark:bg-gray-800'/>

components/TopNav.js

@@ -10,13 +10,13 @@ const TopNav = ({ tags, currentTag, post }) => {
   const drawer = useRef()
   const drawerRight = useRef()
 
-  return (<div className='fixed w-full top-0 z-20'>
+  return (<>
     {/* 侧面抽屉 */}
     <Drawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} />
     <DrawerRight post={post} cRef={drawerRight}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='transform duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
+    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
       <div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-md'>
         {/* 左侧LOGO */}
         <div className='flex ml-12'>
@@ -48,7 +48,7 @@ const TopNav = ({ tags, currentTag, post }) => {
       </div>
     </div>
 
-  </div>)
+  </>)
 }
 
 export default TopNav