hexo主题微调

components/NotionPage.js

@@ -2,7 +2,6 @@ import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
 import mediumZoom from 'medium-zoom'
 import React from 'react'
-import anime from 'animejs'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false }
@@ -34,17 +33,6 @@ const NotionPage = ({ post }) => {
   })
 
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
-  React.useEffect(() => {
-    anime({
-      targets: 'div:not(.notion-viewport)', // 动效不能加载图片缩放遮罩上。
-      keyframes: [
-        { translateY: 40 },
-        { translateY: 0 }
-      ],
-      duration: 3000,
-      easing: 'easeInOutSine'
-    })
-  }, [])
 
   setTimeout(() => {
     if (typeof document !== 'undefined') {

styles/globals.css

@@ -151,6 +151,6 @@ nav {
     position: fixed;
     left: 0;
     top: 0;
-    z-index: 50;
+    z-index: 1000;
     pointer-events: none;
 }

themes/hexo/LayoutBase.js

@@ -59,10 +59,10 @@ const LayoutBase = props => {
 
       {headerSlot}
 
-      <main id="wrapper" className="w-full py-8 md:px-8 xl:px-24 min-h-screen">
+      <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen">
         <div
           id="container-inner"
-          className="pt-14 w-full mx-auto xl:flex xl:space-x-4 justify-center"
+          className="pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center"
         >
           <div className="w-full max-w-4xl">
             {onLoading ? <LoadingCover /> : children}

themes/hexo/components/MenuList.js

@@ -21,7 +21,7 @@ const MenuList = (props) => {
     links = links.concat(customNav)
   }
 
-  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 font-sans'>
     {links.map(link => {
       if (link && link.show) {
         const selected = (router.pathname === link.to) || (router.asPath === link.to)

themes/hexo/components/SideRight.js

@@ -13,7 +13,7 @@ export default function SideRight(props) {
   } = props
 
   return (
-    <div className={'space-y-4 xl:w-80 xl:pt-0 xl:px-2 pt-4'}>
+    <div className={'space-y-4 lg:w-80 lg:pt-0 lg:px-2 pt-4'}>
       <InfoCard {...props} />
       {CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}
 

themes/hexo/components/TopNav.js

@@ -87,7 +87,7 @@ const TopNav = props => {
     <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={'fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full top-0 z-20 transform duration-200 font-san border-transparent  dark:border-transparent'}>
+    <div id='sticky-nav' className={'top-0 shadow fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 font-san border-transparent  dark:border-transparent'}>
       <div className='w-full flex justify-between items-center px-4 py-2'>
         <div className='flex'>
          <Logo {...props}/>
@@ -103,7 +103,7 @@ const TopNav = props => {
       </div>
 
       <Collapse isOpen={isOpen} className='shadow-xl'>
-        <div className='bg-white pt-1 py-2 px-5 lg:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
           <MenuList {...props}/>
         </div>
       </Collapse>