Fix some responsive layout bugs

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>

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 />

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">

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 />

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>

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"}

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">

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"}

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}`}
         >

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"}