Fix Blog page contents with good css

Author: ajay-dhangar

docusaurus.config.js

@@ -137,102 +137,35 @@ const config = {
         logo: {
           alt: "CodeHarborHub Logo",
           src: "img/nav-logo.jpg",
+          href: "https://codeharborhub.github.io",
+          target: "_self",
         },
         items: [
           {
-            type: "dropdown",
-            html: '<span class="nav-emoji">📚</span> Docs',
-            position: "left",
-            items: [
-              {
-                type: "html",
-                value: `<div class="dropdown_grid">
-                <a class="dropbtn" href="https://codeharborhub.github.io/docs/">Docs</a>
-                <div class="dropdown-content">
-                  <a href="#" class="nav__icons"> <img src="/icons/html-5.svg" title="HTML5" alt="HTML" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/css.svg" title="CSS" alt="CSS" /> </a>
-                  <a href="#" class="nav__icons" > <img src="/icons/js.svg" title="JavaScript" alt="JavaScript" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/jsx.svg" title="React.Js" alt="React" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/ts.svg" title="TypeScript" alt="TypeScript" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/py.svg" title="Python" alt="Python" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/tailwind-css.svg" title="Tailwind CSS" alt="Tailwind" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/next-js.svg" title="NextJs" alt="Next" /> </a>
-                </div>
-              </div>`,
-              },
-
-              {
-                type: "html",
-                value: '<hr style="margin: 0.3rem 0;">',
-              },
-
-              {
-                type: "html",
-                value: `<div class="dropdown_grid">
-                <a class="dropbtn" href="#"> Courses </a>
-                <div class="dropdown-content">
-                  <a href="#" class="nav__icons"> <img src="/icons/html-5.svg" alt="HTML" /> </a>
-                  <a href="#" class="nav__icons"> <img src="/icons/jsx.svg" alt="React" /> </a>
-                </div>
-              </div>`,
-              },
-
-              {
-                type: "html",
-                value: '<hr style="margin: 0.3rem 0;">',
-              },
-
-              {
-                type: "html",
-                value: `<div class="dropdown_grid">
-                <a class="dropbtn" href="https://codeharborhub.github.io/dsa/" target="_self"> DSA </a>
-                <div class="dropdown-content dsa-content ">
-                  <a href="https://codeharborhub.github.io/dsa/problems/" target="_self" class="nav__icons"> 🧩Problems </a> <br />
-                  <a href="https://codeharborhub.github.io/dsa/solutions/" target="_self" class="nav__icons  "> 💡Solutions </a>
-                </div>
-              </div>`,
-              },
-            ],
-          },
-          {
-            to: "#",
-            html: '<span class="nav-emoji">🌍</span> Showcase',
-            position: "left",
+            label: "All Blogs",
+            to: "/",
+            activeBaseRegex: "/",
           },
           {
-            to: "#",
-            html: '<span class="nav-emoji">🤝</span> Community',
-            position: "left",
+            label: "Authors",
+            to: "/authors/",
+            activeBaseRegex: "/authors/",
           },
           {
-            to: "#",
-            html: '<span class="nav-emoji">💰</span> Donate',
+            label: "🏷️ Blog Tags",
+            to: "/tags/",
+            activeBaseRegex: "/tags/",
           },
           {
-            to: "#",
-            html: '<span class="nav-emoji">📰</span> Blog',
-          },
-          {
-            to: "#",
-            html: '<span class="nav-emoji">💡</span> Feature Requests',
+            type: "search",
+            position: "right",
           },
           {
-            type: "search",
+            href: "https://github.com/codeharborhub",
             position: "right",
+            className: "header-github-link",
+            "aria-label": "GitHub repository",
           },
-          // {
-          //   href: "https://github.com/codeharborhub/codeharborhub",
-          //   position: "right",
-          //   className: "header-github-link",
-          //   "aria-label": "GitHub repository",
-          // },
-          // {
-          //   href: "https://www.codeharborhub.live/register",
-          //   position: "right",
-          //   className: "header-signup-link",
-          //   "aria-label": "Auth",
-          //   label: "Auth",
-          // },
         ],
         // hideOnScroll: true,
       },

src/theme/BlogLayout/index.js

@@ -9,7 +9,7 @@ export default function BlogLayout(props) {
 
   return (
     <Layout {...layoutProps}>
-      <div className='container max-w-7xl px-4 py-4 mx-auto mt-4'>
+      <div className='max-w-7xl px-8 py-8 mx-auto mt-4'>
         <div className='row'>
           <BlogSidebar sidebar={sidebar} hideOnDesktop />
           <main

src/theme/BlogListPage/BlogListPage.scss

@@ -59,7 +59,7 @@
 
   &__description {
     font-size: 1rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.2rem;
 
     @media (min-width: 1024px) {
       font-size: 1.125rem;