标签滚动条加侧边遮罩，表格越界,导航条加高，夜间模式适配，按钮样式调整

2026-05-14 07:26:52 +00:00 · 2021-10-12 17:37:57 +08:00
parent c759e87b61
commit 259f7035e1
11 changed files with 71 additions and 27 deletions
--- a/components/BlogPostMini.js
+++ b/components/BlogPostMini.js
@@ -3,7 +3,7 @@ import BLOG from '@/blog.config'
 const BlogPostMini = ({ post }) => {
  return (
    <a key={post.id} href={`${BLOG.path}/article/${post.slug}`}
-             className='sm:flex w-full border dark:border-gray-500 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
+             className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
        {/*  封面图 */}
        {post.page_cover && post.page_cover.length > 1 && (
            <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -8,7 +8,7 @@ const DarkModeButton = () => {
    changeTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }
-  return <div className='z-10 p-1 duration-200 mr-2 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 text-xl cursor-pointer dark:text-gray-300 '>
+  return <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
    <i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o') } onClick={handleChangeDarkMode} />
  </div>
 }
--- a/components/Drawer.js
+++ b/components/Drawer.js
@@ -19,14 +19,14 @@ const Drawer = ({ post, currentTag }) => {
  return <div>
    {/* 触发抽屉按钮 */}
    <div onClick={handleMenuClick}
-      className='fixed top-1 left-0 z-30 py-1 px-5 duration-200 bg-white dark:bg-gray-600 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
+      className='fixed top-3 left-0 z-30 py-1 px-5 duration-200 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
      <i className='fa hover:scale-125 transform duration-200 fa-bars '
          />
    </div>
    <div className='fixed top-0 left-0 z-30 h-full'>
      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
        {/* LOGO */}
-        <div className='sticky top-0 z-20 bg-white w-72  flex space-x-4 px-5 py-1 dark:border-gray-500 border-b dark:bg-gray-600 '>
+        <div className='sticky top-0 z-20 bg-white w-72  flex space-x-4 px-5 py-3.5 dark:border-gray-500 border-b dark:bg-gray-600 '>
          <div className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
            <i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
          </div>
@@ -38,8 +38,9 @@ const Drawer = ({ post, currentTag }) => {
          </Link>
        </div>
      </div>
+
      {/* 侧边菜单 */}
-      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-12 overflow-y-auto'}>
+      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-20 overflow-y-auto'}>
        <div className='z-20'>
          <div className='px-5 my-3 block md:hidden'>
            <SearchInput currentTag={currentTag}/>
@@ -55,7 +56,7 @@ const Drawer = ({ post, currentTag }) => {
      </div>
    </div>
    {/* 背景蒙版 */}
-    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-40' } onClick={handleMenuClick}/>
+    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-50' } onClick={handleMenuClick}/>
  </div>
 }
 export default Drawer
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -16,7 +16,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
    { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true },
    { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
  ]
-  return <nav className='max-w-sm'>
+  return <nav id='nav'>
    <ul className='leading-8 text-gray-700 dark:text-gray-400'>
      {links.map(
        link =>
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -27,7 +27,7 @@ const SearchInput = ({ currentTag }) => {
    <input
      type='text'
      placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
+      className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
      onKeyUp={handleKeyUp}
      onChange={e => setSearchValue(e.target.value)}
      defaultValue={router.query.s ?? ''}
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -3,9 +3,9 @@ import TocBar from '@/components/TocBar'
 import MenuButtonGroup from '@/components/MenuButtonGroup'

 const SideBar = ({ tags, currentTag, post }) => {
-  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden lg:block'>
+  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 hidden lg:block'>
    <div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
-      <div className='hidden md:block sticky top-12'>
+      <div className='hidden md:block sticky top-16'>
        <div className={post ? 'hidden xl:block' : 'block'}>
          <MenuButtonGroup allowCollapse={true}/>
        </div>
--- a/components/Tags.js
+++ b/components/Tags.js
@@ -10,7 +10,11 @@ import Link from 'next/link'
 const Tags = ({ tags, currentTag }) => {
  if (!tags) return <></>
  return (<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
-      <ul id='tag-container' className='px-10 flex py-1 space-x-3'>
+      <div className='z-30 sticky left-0 flex'>
+        <div className='px-2 bg-white dark:bg-gray-800'/>
+        <div className='px-5 -line-x-opacity bg-black'/>
+      </div>
+      <ul id='tag-container' className='flex py-1 space-x-3'>
        <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
        {Object.keys(tags).map(key => {
          const selected = key === currentTag
@@ -29,6 +33,10 @@ const Tags = ({ tags, currentTag }) => {
          )
        })}
      </ul>
+      <div className='z-30 sticky right-0 flex'>
+        <div className='px-5 line-x-opacity'/>
+        <div className='px-2 bg-white dark:bg-gray-800'/>
+      </div>
    </div>
  )
 }
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -8,7 +8,7 @@ import Drawer from '@/components/Drawer'

 const TopNav = ({ tags, currentTag, post }) => {
  return (
-    <div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 '>
+    <div className='bg-white dark:bg-gray-800 border-b dark:border-gray-700'>

      {/* 侧面抽屉 */}
      <Drawer post={post} currentTag={currentTag} />
@@ -16,12 +16,12 @@ const TopNav = ({ tags, currentTag, post }) => {
      {/* 导航栏 */}
      <div
        id='sticky-nav'
-        className='text-sm m-auto w-full flex flex-row justify-between items-center px-2 md:px-4'
+        className='text-sm m-auto w-full flex flex-row justify-between items-center p-2 md:px-4'
      >
        <div className='flex ml-12'>
          <Link href='/'>
            <a
-              className='flex text-xl p-1 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
+              className='flex text-xl py-1 px-3 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
               dark:text-gray-300
              '>{BLOG.title}</a>
          </Link>
@@ -35,13 +35,15 @@ const TopNav = ({ tags, currentTag, post }) => {
        <div className='flex flex-nowrap space-x-1'>
          <DarkModeButton />
          <div className='flex align-middle cursor-pointer'>
-            <Image
-              alt={BLOG.author}
-              width={28}
-              height={28}
-              src='/avatar.svg'
-              className='rounded-full border-black'
-            />
+            <Link href='/article/about'>
+              <Image
+                alt={BLOG.author}
+                width={28}
+                height={28}
+                src='/avatar.svg'
+                className='rounded-full border-black'
+              />
+            </Link>
          </div>
        </div>
      </div>
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -53,15 +53,15 @@ const ArticleLayout = ({
      </div>

      {/* Wrapper */}
-      <div className='flex justify-between bg-gray-100 dark:bg-black'>
+      <div className='flex justify-between bg-gray-100'>

         <SideBar tags={tags} post={frontMatter} />

        {/* 主体区块 */}
-        <main className='bg-gray-100 dark:bg-black w-full'>
+        <main className='bg-gray-100 w-full dark:bg-gray-800'>
          {/* 中央区域 wrapper */}
            <header
-              className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-10 lg:mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
+              className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 overflow-y-auto animate__fadeIn animate__animated'>
              {/* 封面图 */}
              {frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
                <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -71,7 +71,7 @@ const ArticleLayout = ({

            <article
              ref={targetRef}
-              className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
+              className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
              {/* 文章标题 */}
              <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                {frontMatter.title}
@@ -131,7 +131,7 @@ const ArticleLayout = ({
              <div className='flex justify-center pt-5'>
                <RewardButton />
              </div>
-              <p className='flex justify-center py-5'>
+              <p className='flex justify-center py-5 dark:text-gray-200'>
                 - 💖 本 文 结 束 😚 感 谢 您 的 阅 读  💖 -
              </p>

--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -59,7 +59,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
        <SideBar />

        <div className='flex-grow'>
-          <div className='fixed top-12 z-10 w-full border-b dark:border-gray-600'>
+          <div className='fixed top-16 z-10 w-full border-b dark:border-gray-600'>
            <Tags tags={tags} currentTag={currentTag} />
          </div>

--- a/styles/globals.css
+++ b/styles/globals.css
@@ -109,9 +109,42 @@ nav {
  @apply right-auto left-0 hidden lg:block z-10 !important
 }

+/* 隐藏滚动条 */
 .scroll-hidden{
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
 }

 .scroll-hidden::-webkit-scrollbar { width: 0 !important }
+
+.notion-collection{
+  @apply max-w-0
+}
+
+/* 渐变透明度 */
+.line-x-opacity{
+  background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgb(255, 255, 255)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(right, rgba(255, 255, 255,0), rgb(255, 255, 255)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(right, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to right, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* 标准的语法（必须放在最后） */
+}
+
+.-line-x-opacity{
+  background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgb(255, 255, 255)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(left, rgba(255, 255, 255,0), rgb(255, 255, 255)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(left, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to left, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* 标准的语法（必须放在最后） */
+}
+.dark .line-x-opacity{
+  background: -webkit-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(right, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(right, rgba(31, 41, 55,0), rgba(31, 41, 55)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to right, rgba(31, 41, 55,0), rgba(31, 41, 55)); /* 标准的语法（必须放在最后） */
+}
+
+.dark .-line-x-opacity{
+  background: -webkit-linear-gradient(right, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Safari 5.1 - 6.0 */
+  background: -o-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Opera 11.1 - 12.0 */
+  background: -moz-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Firefox 3.6 - 15 */
+  background: linear-gradient(to left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* 标准的语法（必须放在最后） */
+}