V2.0 重新排班

pages/404.js

@@ -26,7 +26,7 @@ export default function Custom404 () {
 
   return <BaseLayout meta={{ title: `${BLOG.title} | 页面找不到啦` }}>
     <div
-      className='text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
+      className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
       <div className='dark:text-gray-200'>
         <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><FontAwesomeIcon icon={faSpinner} spin={true} className='mr-2'/>404</h2>
         <div className='inline-block text-left h-32 leading-10 items-center'>

pages/_app.js

@@ -1,6 +1,6 @@
 import 'animate.css'
-import '@/styles/globals.css'
 import '@/styles/notion.css'
+import '@/styles/globals.css'
 import 'rc-dropdown/assets/index.css'
 import 'prismjs/themes/prism-okaidia.css'
 import 'katex/dist/katex.min.css'

pages/archive/index.js

@@ -73,16 +73,11 @@ const Index = ({ allPosts, tags, categories }) => {
 
   return (
     <BaseLayout meta={meta} tags={tags} categories={categories}>
-      <div className=' pt-16 '>
-        <StickyBar>
-          <div className='py-2.5 text-lg lg:mx-14 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4'/>{locale.NAV.ARCHIVE}</div>
-        </StickyBar>
-        <div className='mt-20 mb-10 pb-20 mx-2 lg:mx-20 bg-white md:p-12 p-3 dark:bg-gray-800 '>
+        <div className='md:mt-4 mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 rounded-xl shadow-md '>
           {Object.keys(archivePosts).map(archiveTitle => (
              <BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
           ))}
         </div>
-      </div>
     </BaseLayout>
   )
 }

pages/category/[category].js

@@ -14,12 +14,12 @@ export default function Category ({ tags, allPosts, filteredPosts, category, cat
     type: 'website'
   }
   return <BaseLayout meta={meta} tags={tags} currentCategory={category} totalPosts={allPosts} categories={categories}>
-    <div className=' pt-16'>
       <StickyBar>
         <CategoryList currentCategory={category} categories={categories} />
       </StickyBar>
-      <BlogPostListScroll posts={filteredPosts} tags={tags} currentCategory={category}/>
-    </div>
+      <div className='md:mt-8'>
+         <BlogPostListScroll posts={filteredPosts} tags={tags} currentCategory={category}/>
+      </div>
   </BaseLayout>
 }
 

pages/category/index.js

@@ -16,8 +16,7 @@ export default function Category ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
-    <div className=' p-2 lg:px-14'>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 rounded-xl shadow-lg'>
         <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
         <div id='category-list' className='duration-200 flex flex-wrap'>
           {Object.keys(categories).map(category => {
@@ -28,7 +27,6 @@ export default function Category ({ tags, allPosts, categories }) {
           })}
         </div>
       </div>
-    </div>
   </BaseLayout>
 }
 

pages/index.js

@@ -30,9 +30,7 @@ export async function getStaticProps () {
 const Index = ({ allPosts, tags, meta, categories }) => {
   return (
     <BaseLayout meta={meta} tags={tags} totalPosts={allPosts} categories={categories}>
-      <div className=''>
         <BlogPostListScroll posts={allPosts} tags={tags} />
-      </div>
     </BaseLayout>
   )
 }

pages/search.js

@@ -50,7 +50,9 @@ const Search = ({ allPosts, tags, categories }) => {
         <StickyBar>
           <div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> 搜索词： {searchKey}</div>
         </StickyBar>
-        <BlogPostListScroll posts={filteredPosts} tags={tags} currentSearch={searchKey} />
+        <div className='md:mt-5'>
+         <BlogPostListScroll posts={filteredPosts} tags={tags} currentSearch={searchKey} />
+        </div>
       </div>
     </BaseLayout>
   )

pages/tag/[tag].js

@@ -14,12 +14,12 @@ export default function Tag ({ tags, allPosts, filteredPosts, tag, categories })
   }
 
   return <BaseLayout meta={meta} tags={tags} currentTag={tag} categories={categories} totalPosts={allPosts}>
-    <div className='pt-16'>
       <StickyBar>
-        <TagList tags={tags} currentTag={tag}/>
+          <TagList tags={tags} currentTag={tag}/>
       </StickyBar>
-      <BlogPostListScroll posts={filteredPosts} tags={tags} currentTag={tag}/>
-    </div>
+      <div className='md:mt-8'>
+        <BlogPostListScroll posts={filteredPosts} tags={tags} currentTag={tag}/>
+      </div>
   </BaseLayout>
 }
 

pages/tag/index.js

@@ -16,8 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
-    <div className=' p-2 lg:px-14'>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 rounded-xl shadow-lg'>
         <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
         <div id='tags-list' className='duration-200 flex flex-wrap'>
           { tags.map(tag => {
@@ -25,7 +24,6 @@ export default function Tag ({ tags, allPosts, categories }) {
           }) }
         </div>
       </div>
-    </div>
   </BaseLayout>
 }