diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js index 1f7138cb..dca7d326 100644 --- a/themes/example/LayoutBase.js +++ b/themes/example/LayoutBase.js @@ -29,7 +29,7 @@ const LayoutBase = props => { - <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' container mx-auto justify-center md:flex items-start py-8 px-2'}> + <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}> <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div> diff --git a/themes/example/components/Footer.js b/themes/example/components/Footer.js index 08b9d561..d4028f0d 100644 --- a/themes/example/components/Footer.js +++ b/themes/example/components/Footer.js @@ -11,7 +11,7 @@ export const Footer = (props) => { return currentYear })() - return <footer className="w-full bg-white px-6 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray "> + return <footer className="relative w-full bg-white px-6 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray "> <DarkModeButton className='text-center pt-4'/> <div className="container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm"> diff --git a/themes/fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js index 012cdb44..1ff54f01 100644 --- a/themes/fukasawa/LayoutBase.js +++ b/themes/fukasawa/LayoutBase.js @@ -30,7 +30,7 @@ const LayoutBase = (props) => { <TopNav {...props}/> <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}> <AsideLeft {...props} slot={leftAreaSlot}/> - <main id='wrapper' className='flex w-full py-8 justify-center'> + <main id='wrapper' className='relative flex w-full py-8 justify-center'> <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full'> <div> {headerSlot} </div> <div>{children}</div> diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js index d020ee1e..a97ac8bd 100644 --- a/themes/fukasawa/components/AsideLeft.js +++ b/themes/fukasawa/components/AsideLeft.js @@ -11,7 +11,7 @@ import DarkModeButton from '@/components/DarkModeButton' function AsideLeft (props) { const { tags, currentTag, categories, currentCategory, post, slot, siteInfo } = props const router = useRouter() - return <div className='w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block'> + return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block'> <Logo {...props}/> <section className='flex flex-col text-gray-600'> diff --git a/themes/fukasawa/components/SiteInfo.js b/themes/fukasawa/components/SiteInfo.js index 59a071a0..20cb50c0 100644 --- a/themes/fukasawa/components/SiteInfo.js +++ b/themes/fukasawa/components/SiteInfo.js @@ -12,7 +12,7 @@ function SiteInfo ({ title }) { return ( <footer - className='leading-6 justify-start w-full text-gray-400 text-xs font-sans' + className='relative leading-6 justify-start w-full text-gray-400 text-xs font-sans' > <span> © {`${copyrightDate}`} <span> <a href={BLOG.LINK} className='text-gray-500 dark:text-gray-300 '> <i className='mx-1 animate-pulse fas fa-heart'/> {BLOG.AUTHOR}</a>. <br /></span> diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js index 8c0ecac0..9bbe0d5a 100644 --- a/themes/hexo/LayoutBase.js +++ b/themes/hexo/LayoutBase.js @@ -73,7 +73,7 @@ const LayoutBase = props => { {headerSlot} - <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen"> + <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen relative"> <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center'} diff --git a/themes/hexo/components/Footer.js b/themes/hexo/components/Footer.js index a753f929..3fc42d36 100644 --- a/themes/hexo/components/Footer.js +++ b/themes/hexo/components/Footer.js @@ -14,7 +14,7 @@ const Footer = ({ title }) => { return ( <footer - className=' dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm p-6' + className='relative dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm p-6' > <DarkModeButton/> diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js index fded7106..fc2b6a77 100644 --- a/themes/matery/LayoutBase.js +++ b/themes/matery/LayoutBase.js @@ -58,7 +58,7 @@ const LayoutBase = props => { {headerSlot} - <main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24"> + <main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24 relative"> <div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center"> {onLoading ? <LoadingCover /> : children} </div> diff --git a/themes/matery/components/Footer.js b/themes/matery/components/Footer.js index 2f8f55ae..f91c90aa 100644 --- a/themes/matery/components/Footer.js +++ b/themes/matery/components/Footer.js @@ -14,7 +14,7 @@ const Footer = ({ title }) => { return ( <footer - className=' dark:bg-black flex-shrink-0 bg-indigo-700 text-gray-300 justify-center text-center m-auto w-full leading-6 dark:text-gray-100 text-sm p-6' + className='relative dark:bg-black flex-shrink-0 bg-indigo-700 text-gray-300 justify-center text-center m-auto w-full leading-6 dark:text-gray-100 text-sm p-6' > <DarkModeButton/> diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js index 10f2d196..ca5ef1d9 100644 --- a/themes/medium/LayoutBase.js +++ b/themes/medium/LayoutBase.js @@ -27,7 +27,7 @@ const LayoutBase = props => { return ( <div className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'> <CommonHead meta={meta} /> - <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex justify-between w-full h-full mx-auto'}> + <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}> {/* 桌面端左侧菜单 */} {/* <LeftMenuBar/> */} diff --git a/themes/next/LayoutBase.js b/themes/next/LayoutBase.js index fb70957c..e5fb2261 100644 --- a/themes/next/LayoutBase.js +++ b/themes/next/LayoutBase.js @@ -76,7 +76,7 @@ const LayoutBase = (props) => { <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'/> - <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex justify-center flex-1 pb-12'}> + <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-center flex-1 pb-12'}> {/* 左侧栏样式 */} <SideAreaLeft slot={leftAreaSlot} targetRef={targetRef} {...props}/> <section id='container-inner' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}> diff --git a/themes/next/components/Footer.js b/themes/next/components/Footer.js index 3e90a5f5..5551a116 100644 --- a/themes/next/components/Footer.js +++ b/themes/next/components/Footer.js @@ -14,7 +14,7 @@ const Footer = ({ title }) => { return ( <footer - className='dark:bg-gray-800 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 bg-white dark:text-gray-400' + className='relative dark:bg-gray-800 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 bg-white dark:text-gray-400' > <DarkModeButton/> <span> diff --git a/themes/nobelium/LayoutBase.js b/themes/nobelium/LayoutBase.js index 88f9b9c5..7e6ec817 100644 --- a/themes/nobelium/LayoutBase.js +++ b/themes/nobelium/LayoutBase.js @@ -22,7 +22,7 @@ const LayoutBase = props => { {/* 顶部导航栏 */} <Nav {...props} /> - <main className={`m-auto flex-grow w-full transition-all ${ + <main className={`relative m-auto flex-grow w-full transition-all ${ !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24' }`}> diff --git a/themes/nobelium/components/Footer.js b/themes/nobelium/components/Footer.js index 3ba3d2c9..6adc5d52 100644 --- a/themes/nobelium/components/Footer.js +++ b/themes/nobelium/components/Footer.js @@ -16,7 +16,7 @@ export const Footer = (props) => { })() return <footer - className={`mt-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 transition-all ${ + className={`relative mt-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 transition-all ${ !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24' }`} >