From 698029f509681bd22fbaf786d9e2d28fd5be28af Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Sat, 6 Jan 2024 14:06:49 +0800
Subject: [PATCH] Fix some responsive layout bugs

---
 components/layouts/layouts.tsx      | 2 +-
 components/readerpage/DrawerTOC.tsx | 4 ++--
 components/readerpage/TOC.tsx       | 6 ++++--
 components/utils/NavBar.tsx         | 2 +-
 pages/404.tsx                       | 2 +-
 pages/about.tsx                     | 4 ++--
 pages/blog/[id].tsx                 | 2 +-
 pages/friends.tsx                   | 4 ++--
 pages/index.tsx                     | 2 +-
 pages/posts/[[...slug]].tsx         | 2 +-
 pages/search.tsx                    | 4 ++--
 pages/sponsor.tsx                   | 4 ++--
 pages/tags/[...slug].tsx            | 2 +-
 pages/tags/index.tsx                | 2 +-
 styles/globals.css                  | 1 -
 styles/layout.css                   | 3 ---
 16 files changed, 22 insertions(+), 24 deletions(-)
 delete mode 100644 styles/layout.css

diff --git a/components/layouts/layouts.tsx b/components/layouts/layouts.tsx
index 2af8fcd..8e6351f 100644
--- a/components/layouts/layouts.tsx
+++ b/components/layouts/layouts.tsx
@@ -3,5 +3,5 @@ export const Page = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const ContentContainer = ({ children }: { children: React.ReactNode }) => {
-  return <main className="responsive-width">{children}</main>;
+  return <main className="px-5 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
 };
diff --git a/components/readerpage/DrawerTOC.tsx b/components/readerpage/DrawerTOC.tsx
index b0c469a..5e3f117 100644
--- a/components/readerpage/DrawerTOC.tsx
+++ b/components/readerpage/DrawerTOC.tsx
@@ -12,7 +12,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
         title="Open the table of contents"
         className="bottom-7 right-4 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
       >
-        <div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-3 font-bold">
+        <div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-2 font-bold">
           {"TOC"}
         </div>
       </SheetTrigger>
@@ -20,7 +20,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
         <SheetHeader>
           <SheetTitle className="mt-8 font-bold">{"TABLE OF CONTENTS"}</SheetTitle>
         </SheetHeader>
-        <ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto">
+        <ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto flat-scrollbar-normal">
           {props.data?.map((item) => (
             <Link
               className="hover:text-sky-500 border-t border-b py-2 border-dashed"
diff --git a/components/readerpage/TOC.tsx b/components/readerpage/TOC.tsx
index 94374d5..ef11445 100644
--- a/components/readerpage/TOC.tsx
+++ b/components/readerpage/TOC.tsx
@@ -3,8 +3,10 @@ import Link from "next/link";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   return (
-    <div className="sticky top-[5em] mx-5 p-2 border-gray-500">
-      <div className="p-2 font-bold text-center border border-gray-500">{"TABLE OF CONTENTS"}</div>
+    <div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400 rounded-sm">
+      <div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
+        {"TABLE OF CONTENTS"}
+      </div>
       <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
         {props.data?.map((item) => (
           <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
diff --git a/components/utils/NavBar.tsx b/components/utils/NavBar.tsx
index 2359337..a245527 100644
--- a/components/utils/NavBar.tsx
+++ b/components/utils/NavBar.tsx
@@ -37,7 +37,7 @@ export const NavBar = () => {
 
   return (
     <Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
-      <nav className="responsive-width sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
+      <nav className="sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
         <Link href="/" className="cursor-pointer">
           <h1
             className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-2xl font-bold dark:border-b-white`}
diff --git a/pages/404.tsx b/pages/404.tsx
index 9d2f925..1a3a89d 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -11,8 +11,8 @@ export default function NotFoundPage() {
   };
   return (
     <Page>
-      <NavBar />
       <ContentContainer>
+        <NavBar />
         <div className="flex flex-col justify-center">
           <TfiFaceSad className="mx-auto my-4" size={"6em"} />
           <p className="mx-auto my-3 text-center text-2xl font-bold">{"404 NOT FOUND"}</p>
diff --git a/pages/about.tsx b/pages/about.tsx
index f362527..fe56444 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -15,9 +15,9 @@ export default function AboutPage() {
         description={"Type your brief self-introduction in a sentence here make SEO recognize it easily."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
-      <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <NavBar />
+        <h2 className={`my-10 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"ABOUT ME"}
         </h2>
         <hr />
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index 5a74bdc..058efb6 100644
--- a/pages/blog/[id].tsx
+++ b/pages/blog/[id].tsx
@@ -66,9 +66,9 @@ const ReaderPage = (props: ReaderPageProps) => {
         description={props.frontMatter.summary}
         coverURL={props.frontMatter.coverURL ?? Config.AvatarURL}
       />
-      <NavBar />
       <Toaster />
       <ContentContainer>
+        <NavBar />
         <div className="my-5 justify-center md:flex">
           <div className="md:w-2/3">
             <div className="py-1">
diff --git a/pages/friends.tsx b/pages/friends.tsx
index c22b586..565d190 100644
--- a/pages/friends.tsx
+++ b/pages/friends.tsx
@@ -12,9 +12,9 @@ export default function FriendsPage() {
   return (
     <Page>
       <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
-      <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <NavBar />
+        <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"FRIENDS"}
         </h2>
         <hr />
diff --git a/pages/index.tsx b/pages/index.tsx
index a22a786..a647dbd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -29,8 +29,8 @@ export default function Home(props: HomePageProps) {
         description={`Welcome to the ${Config.Nickname}'s blog website. It's the website for recording thoughts for technology, life experience and so on.`}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
-      <NavBar />
       <ContentContainer>
+        <NavBar />
         <HomeCover />
         {props.pinnedPostList.length !== 0 && (
           <div>
diff --git a/pages/posts/[[...slug]].tsx b/pages/posts/[[...slug]].tsx
index 3e2516c..c3064ae 100644
--- a/pages/posts/[[...slug]].tsx
+++ b/pages/posts/[[...slug]].tsx
@@ -50,8 +50,8 @@ export default function PostsPage(props: PostsPageProps) {
         description={"Here is the list page for all published posts. Click here for more details."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
-      <NavBar />
       <ContentContainer>
+        <NavBar />
         <h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
           <LuPenTool className="mx-2 my-auto" />
           {"ALL POSTS"}
diff --git a/pages/search.tsx b/pages/search.tsx
index 34d8512..71ea86c 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -53,10 +53,10 @@ export default function SearchPage() {
   return (
     <Page>
       <SEO title={`${Config.SiteTitle} - Search`} description={"Search the posts on your demand."} />
-      <NavBar />
       <Toaster />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <NavBar />
+        <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"SEARCH POSTS"}
         </h2>
         <div className="flex my-10 h-1/2">
diff --git a/pages/sponsor.tsx b/pages/sponsor.tsx
index d07fa6b..f5c1377 100644
--- a/pages/sponsor.tsx
+++ b/pages/sponsor.tsx
@@ -21,12 +21,12 @@ export default function AboutPage() {
           "If you like my works, I would deeply appreciate your support as a patron. Your contribution not only fuels my creative journey but also allows me to delve deeper into my passion."
         }
       />
-      <NavBar />
       <ContentContainer>
+        <NavBar />
         <div className="md:flex">
           <div className="flex flex-col justify-center md:w-1/2">
             <h2
-              className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
+              className={`my-10 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
             >
               <GoHeartFill className="mx-2 my-auto" />
               {"SPONSOR"}
diff --git a/pages/tags/[...slug].tsx b/pages/tags/[...slug].tsx
index b6ddfe1..75b031a 100644
--- a/pages/tags/[...slug].tsx
+++ b/pages/tags/[...slug].tsx
@@ -50,8 +50,8 @@ export default function TagsContentPage(props: TagsContentPageProps) {
         description={`Here are posts under the tag ${props.tagName}.`}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
-      <NavBar />
       <ContentContainer>
+        <NavBar />
         <h2
           className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
         >
diff --git a/pages/tags/index.tsx b/pages/tags/index.tsx
index 04c1dbb..48e0bbd 100644
--- a/pages/tags/index.tsx
+++ b/pages/tags/index.tsx
@@ -22,8 +22,8 @@ export default function TagsIndexPage(props: TagsIndexPageProps) {
         description={"Here is the list page for all tags which sorts all posts to every catagories."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
-      <NavBar />
       <ContentContainer>
+        <NavBar />
         <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           <AiOutlineTags className="mx-2 my-auto" />
           {"ALL TAGS"}
diff --git a/styles/globals.css b/styles/globals.css
index b0791d0..3099f14 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,7 +4,6 @@
 
 @import "./typesetting.css";
 @import "./formulation.css";
-@import "./layout.css";
 @import "./scrollbar.css";
 
 @import "./prism.css";
diff --git a/styles/layout.css b/styles/layout.css
deleted file mode 100644
index 8d1ebcc..0000000
--- a/styles/layout.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.responsive-width {
-  @apply px-5 lg:px-20 xl:px-32 2xl:px-52;
-}