feat(docs): reorder and restyle navbar (datahub-project#3041)

fredguth · Aug 10, 2021 · b52cd6f · b52cd6f
1 parent 4e15c7a
commit b52cd6f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 21 deletions.
diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js
@@ -23,26 +23,27 @@ module.exports = {
           label: "Docs",
           position: "right",
         },
-        {
-          href: "https://slack.datahubproject.io",
-          label: "Slack",
-          position: "right",
-        },
         {
           to: "docs/demo",
           label: "Demo",
           position: "right",
         },
         {
-          to: "docs/saas",
-          label: "SaaS",
+          href: "https://slack.datahubproject.io",
+          label: "Slack",
           position: "right",
         },
         {
           href: "https://github.com/linkedin/datahub",
           label: "GitHub",
           position: "right",
         },
+        {
+          to: "docs/saas",
+          label: "SaaS",
+          position: "right",
+          className: "navbar-saas-button button button--primary",
+        },
       ],
     },
     footer: {
@@ -115,9 +116,9 @@ module.exports = {
       copyright: `Copyright © 2015-${new Date().getFullYear()} DataHub Project Authors.`,
     },
     prism: {
-    //   theme: require('prism-react-renderer/themes/github'),
-    //   darkTheme: require('prism-react-renderer/themes/dracula'),
-      additionalLanguages: ['ini'],
+      //   theme: require('prism-react-renderer/themes/github'),
+      //   darkTheme: require('prism-react-renderer/themes/dracula'),
+      additionalLanguages: ["ini"],
     },
     gtag: {
       trackingID: "G-2G54RXWD4D",

diff --git a/docs-website/src/css/custom.css b/docs-website/src/css/custom.css
@@ -55,7 +55,38 @@ html[data-theme='dark'] {
   padding: 0 var(--ifm-pre-padding);
 } */
 
-.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock-, 
+.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock-,
 .codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock- {
   font-size: 0.9em !important;
-}
+}
+
+.navbar__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.navbar__item {
+  font-size: 1.25rem;
+  padding: 0rem 1rem;
+}
+
+.navbar-saas-button {
+  margin-right: 1rem;
+  margin-left: 1rem;
+  padding: 0.1rem 1.5rem;
+  color: var(--ifm-button-color);
+}
+
+.navbar-saas-button:hover {
+  color: var(--ifm-button-color);
+}
+
+@media screen and (max-width: 996px) {
+  .navbar-saas-button {
+    margin-left: 0rem;
+    padding: 0.5rem 1rem;
+  }
+  .navbar-saas-button:hover {
+    background: var(--ifm-color-primary-dark);
+  }
+}
diff --git a/docs-website/src/pages/index.js b/docs-website/src/pages/index.js
@@ -346,7 +346,7 @@ function Home() {
                   )}
                   to={useBaseUrl("docs/")}
                 >
-                  Get Started
+                  Get Started →
                 </Link>
                 <Link
                   className={clsx(
@@ -360,7 +360,7 @@ function Home() {
               </div>
             </div>
             <div className={clsx("col col--6", styles.bumpUpLogo)}>
-              <div className={clsx("item shadow--tl")}>
+              <div className={clsx("item shadow--tl", styles.demo_image)}>
                 <img
                   src={useBaseUrl("img/screenshots/demo.gif")}
                   alt="Demo GIF"

diff --git a/docs-website/src/pages/styles.module.css b/docs-website/src/pages/styles.module.css
@@ -10,6 +10,8 @@
 .browse_image {
   margin-left: -2rem;
   margin-right: 4rem;
+  border-radius: 12px;
+  overflow: hidden;
 }
 
 .recipe_example {
@@ -23,13 +25,26 @@
 .how_third_image {
   margin-left: 4rem;
   margin-right: -2rem;
+  border-radius: 12px;
+  overflow: hidden;
 }
 
 .bumpUpLogo {
   margin-top: -0.5rem;
 }
 
-@media screen and (max-width: 966px) {
+.demo_image {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+@media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem 0.5rem;
   }
@@ -61,21 +76,21 @@
   .bumpUpLogo {
     margin-top: 2rem;
   }
+
+  .buttons {
+    justify-content: center;
+  }
 }
 
 .not_bold_text {
   font-weight: 300;
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .hero_button {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  padding: 0.5rem 2rem;
+  font-size: 1.25rem;
 }
 
 .hero_button_cta {