From 475e5f6f60a33558290ebd4d6d115ecf5e3d676a Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sat, 2 Apr 2022 10:15:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E9=85=8D=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                               | 2 +-
 themes/example/LayoutBase.js                 | 8 ++++----
 themes/example/LayoutIndex.js                | 2 +-
 themes/medium/LayoutBase.js                  | 4 ++--
 themes/medium/LayoutSlug.js                  | 2 +-
 themes/medium/components/ArticleDetail.js    | 4 ++--
 themes/medium/components/BlogPostCard.js     | 3 +--
 themes/medium/components/BlogPostListPage.js | 1 -
 themes/medium/components/Catalog.js          | 2 +-
 themes/medium/components/Footer.js           | 2 +-
 themes/medium/components/Progress.js         | 3 ++-
 themes/medium/components/TopNavBar.js        | 2 +-
 themes/next/components/Card.js               | 2 +-
 themes/next/components/SideAreaLeft.js       | 6 +++---
 14 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 1e7de4a5..d10d93e6 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -19,7 +19,7 @@ const BLOG = {
   FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
-  BACKGROUND_DARK: '#111827', // use hex value, don't forget '#'
+  BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
   PATH: '', // leave this empty unless you want to deploy in a folder
 
   POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js
index 96f635a6..b4fe7964 100644
--- a/themes/example/LayoutBase.js
+++ b/themes/example/LayoutBase.js
@@ -32,8 +32,8 @@ const LayoutBase = props => {
     <div className='dark:text-gray-300'>
       <CommonHead meta={meta} />
       {/* 导航菜单 */}
-      <div className="w-full flex justify-center my-2">
-        <div className=" max-w-6xl justify-between w-full flex">
+      <div className="w-full flex justify-center my-2 text-xs md:text-base px-5">
+        <div className="max-w-6xl justify-between w-full flex">
           <section>
             <Link title={siteInfo.title} href={'/'}>
               <a className={'cursor-pointer flex items-center hover:underline'}>
@@ -42,14 +42,14 @@ const LayoutBase = props => {
               </a>
             </Link>
           </section>
-          <nav className="space-x-3 flex">
+          <nav className="space-x-3 flex flex-nowrap overflow-x-auto">
             {links.map(link => {
               if (link) {
                 return (
                   <Link key={`${link.to}`} title={link.to} href={link.to}>
                     <a
                       className={
-                        'cursor-pointer flex items-center hover:underline'
+                        'cursor-pointer flex whitespace-nowrap items-center hover:underline'
                       }
                     >
                       <i className={`${link.icon} mr-1`} />
diff --git a/themes/example/LayoutIndex.js b/themes/example/LayoutIndex.js
index 1ef35344..95e63bce 100644
--- a/themes/example/LayoutIndex.js
+++ b/themes/example/LayoutIndex.js
@@ -18,7 +18,7 @@ export const LayoutIndex = props => {
   return (
     <LayoutBase {...props}>
       {posts.map(p => (
-        <div key={p.id} className='border p-4 my-12'>
+        <div key={p.id} className='border dark:border-hexo-black-gray p-4 my-12'>
           <Link href={`/article/${p.slug}`}>
             <a className='underline cursor-pointer'>{p.title}</a>
           </Link>
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
index f3289f85..064c9b38 100644
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -24,7 +24,7 @@ const LayoutBase = props => {
   const router = useRouter()
 
   return (
-    <div className='bg-white dark:bg-gray-800 w-full h-full min-h-screen justify-center dark:text-gray-300'>
+    <div className='bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
         {/* 桌面端左侧菜单 */}
@@ -40,7 +40,7 @@ const LayoutBase = props => {
         </div>
 
         {/* 桌面端右侧 */}
-        <div className='hidden xl:block border-l dark:border-gray-500 w-96'>
+        <div className='hidden xl:block border-l dark:border-transparent w-96'>
          <div className='py-14 px-6 sticky top-0'>
           <Tabs>
             {slotRight}
diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
index d7163d2e..073e5432 100644
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -38,7 +38,7 @@ export const LayoutSlug = props => {
   })
 
   const slotRight = post?.toc && post?.toc?.length > 3 && (
-    <div key={locale.COMMON.TABLE_OF_CONTENTS} className="mt-6">
+    <div key={locale.COMMON.TABLE_OF_CONTENTS} >
       <Catalog toc={post.toc} />
     </div>
   )
diff --git a/themes/medium/components/ArticleDetail.js b/themes/medium/components/ArticleDetail.js
index 6c454198..11add4fc 100644
--- a/themes/medium/components/ArticleDetail.js
+++ b/themes/medium/components/ArticleDetail.js
@@ -35,7 +35,7 @@ export const ArticleDetail = props => {
     post?.date?.start_date || post.createdTime,
     locale.LOCALE
   )
-  return <>
+  return <div id='container'>
     <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
     <section className="flex py-4 items-center font-sans px-1">
       <Link href="/about" passHref>
@@ -98,5 +98,5 @@ export const ArticleDetail = props => {
       <ArticleAround prev={prev} next={next} />
       <Comment frontMatter={post} />
     </section>
-    </>
+  </div>
 }
diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js
index 9932078d..d0566e75 100644
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -11,7 +11,7 @@ const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
   const { locale } = useGlobal()
   return (
-      <div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl '>
+      <div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
@@ -57,7 +57,6 @@ const BlogPostCard = ({ post, showSummary }) => {
               </div>
           </div> }
         </div>
-        <hr className='w-full'/>
       </div>
 
   )
diff --git a/themes/medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js
index bac8ab88..fe91b9b0 100644
--- a/themes/medium/components/BlogPostListPage.js
+++ b/themes/medium/components/BlogPostListPage.js
@@ -2,7 +2,6 @@ import BlogPostCard from './BlogPostCard'
 import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
-import { useRouter } from 'next/router'
 
 /**
  * 文章列表分页表格
diff --git a/themes/medium/components/Catalog.js b/themes/medium/components/Catalog.js
index 01456e29..648ce9aa 100644
--- a/themes/medium/components/Catalog.js
+++ b/themes/medium/components/Catalog.js
@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
   }, throttleMs))
 
   return <div className='px-3'>
-    <div className='w-full py-1'>
+    <div className='w-full mt-2 mb-4'>
       <Progress/>
     </div>
     <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
diff --git a/themes/medium/components/Footer.js b/themes/medium/components/Footer.js
index d6ae7491..b5504ceb 100644
--- a/themes/medium/components/Footer.js
+++ b/themes/medium/components/Footer.js
@@ -7,7 +7,7 @@ const Footer = ({ title }) => {
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
   return (
     <footer
-      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+      className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
     >
       <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
 
diff --git a/themes/medium/components/Progress.js b/themes/medium/components/Progress.js
index 4c4adb9f..3680e157 100644
--- a/themes/medium/components/Progress.js
+++ b/themes/medium/components/Progress.js
@@ -10,6 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
     const target = currentRef || document.getElementById('container')
+    console.log(target)
     if (target) {
       const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset
@@ -27,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [percent])
 
   return (
-    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray font-sans">
       <div
         className="h-4 bg-gray-600 duration-200"
         style={{ width: `${percent}%` }}
diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js
index 5cdc9d44..b1ed876b 100644
--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
   const router = useRouter()
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-    <div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
+    <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
       <LogoBar {...props}/>
 
       {/* 顶部菜单 */}
diff --git a/themes/next/components/Card.js b/themes/next/components/Card.js
index d24c046e..e8514dae 100644
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
   return <div className={className}>
     <>{headerSlot}</>
-    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+    <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
         {children}
     </section>
   </div>
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
index 9b7cbe5f..42cea5bd 100644
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -26,7 +26,7 @@ const SideAreaLeft = props => {
 
     <section className='w-60'>
       {/* 菜单 */}
-      <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+      <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
         <Logo {...props}/>
         <div className='pt-2 px-2 font-sans'>
         <MenuButtonGroup allowCollapse={true} {...props} />
@@ -41,12 +41,12 @@ const SideAreaLeft = props => {
     <Card>
       <Tabs>
           {showToc && (
-            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
+            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
               <Toc toc={post.toc}/>
             </div>
           )}
 
-          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
+          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
             <InfoCard />
             <>
               <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>