Navbar: center nav items, move Fundable/Contact to left group

Author: MMesch

docusaurus.config.ts

@@ -139,15 +139,15 @@ const config: Config = {
         },
         {
           to: "/fundable/",
+          className: "custom_navbar_item",
           label: "Fundable projects",
-          position: "right",
-          className: "fundable_projects"
+          position: "left",
         },
         {
           to: "/contact/",
+          className: "custom_navbar_item",
           label: "Contact us",
-          position: "right",
-          className: "contact",
+          position: "left",
         },
         {
           to: "https://github.com/QuantStack",

src/components/blog/index.tsx

@@ -22,46 +22,36 @@ export default function BlogsComponent() {
   };
 
   return (
-    <div className="main-container-with-margins">
-      <div className="container upper-container-with-margin-top">
-        <div className={"row row-with-margin-bottom"}>
-          <div
-            className={"col col--8 col--offset-2"}
-          >
-            <div className="flex-full-centered">
-              <h1 className="padding-none margin-none">
-                Featured Posts by QuantStack Contributors
-              </h1>
-            <div style={{padding:"0 10px"}}>
-              <a href={"/atom.xml"}>
-                <AtomOrange width={"42px"} height={"42px"} />
-              </a>
-              </div>
-            </div>
-            <div>
-              <input
-                className={styles.search_input}
-                type="search"
-                placeholder="Search for blog posts"
-                onChange={handleChange}
-              />
-            </div>
-          </div>
+    <div className="page-content upper-container-with-margin-top">
+      <div className="flex-full-centered" style={{ marginBottom: "var(--ifm-spacing-lg)" }}>
+        <h1 className="padding-none margin-none">
+          Featured Posts by QuantStack Contributors
+        </h1>
+        <div style={{ padding: "0 10px" }}>
+          <a href={"/atom.xml"}>
+            <AtomOrange width={"42px"} height={"42px"} />
+          </a>
         </div>
-
-        <ul className={"row" + " " + "flex-full-centered"}>
-          {filteredBlogPosts.map((blogpost, index) => (
-            <li className="cards-list" key={index}>
-              <div className="col">
-                <BlogpostCard
-                  blogpost={blogpost}
-                  timeIndex={numberOfBlogs - index}
-                ></BlogpostCard>
-              </div>
-            </li>
-          ))}
-        </ul>
       </div>
+      <div>
+        <input
+          className={styles.search_input}
+          type="search"
+          placeholder="Search for blog posts"
+          onChange={handleChange}
+        />
+      </div>
+
+      <ul className="cards-row">
+        {filteredBlogPosts.map((blogpost, index) => (
+          <li key={index}>
+            <BlogpostCard
+              blogpost={blogpost}
+              timeIndex={numberOfBlogs - index}
+            />
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

src/css/custom.css

@@ -552,12 +552,35 @@ a.menu__link:active {
 }
 
 
+.navbar__inner {
+  position: relative;
+}
+
+.navbar__brand {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.theme-layout-navbar-left {
+  flex: 1;
+  justify-content: center;
+}
+
+.theme-layout-navbar-right {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .custom_navbar_item {
   font-family: var(--ifm-font-family-roboto);
-  width: 117px;
   height: 36px;
   padding: 6px 14px;
   text-align: center;
+  white-space: nowrap;
 }
 
 .custom_navbar_item:hover {