docs(website): style tweaks for readability and more open spacing (#8876)

Co-authored-by: socar-dini <0327jane@gmail.com>
Co-authored-by: Harshal Sheth <hsheth2@gmail.com>

docs-website/docusaurus.config.js

@@ -12,13 +12,11 @@ module.exports = {
   organizationName: "datahub-project", // Usually your GitHub org/user name.
   projectName: "datahub", // Usually your repo name.
   staticDirectories: ["static", "genStatic"],
-  stylesheets: [
+  stylesheets: ["https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap"],
-    "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap",
-  ],
   noIndex: isSaas,
   customFields: {
     isSaas: isSaas,
-    markpromptProjectKey: process.env.DOCUSAURUS_MARKPROMPT_PROJECT_KEY || 'IeF3CUFCUQWuouZ8MP5Np9nES52QAtaA',
+    markpromptProjectKey: process.env.DOCUSAURUS_MARKPROMPT_PROJECT_KEY || "IeF3CUFCUQWuouZ8MP5Np9nES52QAtaA",
   },
   themeConfig: {
     ...(!isSaas && {
@@ -35,12 +33,8 @@ module.exports = {
       title: null,
       logo: {
         alt: "DataHub Logo",
-        src: `img/${
+        src: `img/${isSaas ? "acryl" : "datahub"}-logo-color-light-horizontal.svg`,
-          isSaas ? "acryl" : "datahub"
+        srcDark: `img/${isSaas ? "acryl" : "datahub"}-logo-color-dark-horizontal.svg`,
-        }-logo-color-light-horizontal.svg`,
-        srcDark: `img/${
-          isSaas ? "acryl" : "datahub"
-        }-logo-color-dark-horizontal.svg`,
       },
       items: [
         {
@@ -50,7 +44,8 @@ module.exports = {
           position: "right",
         },
         {
-          href: "/integrations",
+          to: "/integrations",
+          activeBasePath: "integrations",
           label: "Integrations",
           position: "right",
         },
@@ -70,8 +65,8 @@ module.exports = {
           position: "right",
         },
         {
-          type: 'docsVersionDropdown',
+          type: "docsVersionDropdown",
-          position: 'right',
+          position: "right",
           dropdownActiveClassDisabled: true,
         },
         {
@@ -201,9 +196,7 @@ module.exports = {
         blog: false,
         theme: {
           customCss: [
-            isSaas
+            isSaas ? require.resolve("./src/styles/acryl.scss") : require.resolve("./src/styles/datahub.scss"),
-              ? require.resolve("./src/styles/acryl.scss")
-              : require.resolve("./src/styles/datahub.scss"),
             require.resolve("./src/styles/global.scss"),
             require.resolve("./src/styles/sphinx.scss"),
             require.resolve("./src/styles/config-table.scss"),
@@ -217,10 +210,7 @@ module.exports = {
     ],
   ],
   plugins: [
-    [
+    ["@docusaurus/plugin-ideal-image", { quality: 100, sizes: [320, 640, 1280, 1440, 1600] }],
-      "@docusaurus/plugin-ideal-image",
-      { quality: 100, sizes: [320, 640, 1280, 1440, 1600] },
-    ],
     "docusaurus-plugin-sass",
     [
       "docusaurus-graphql-plugin",

docs-website/src/components/Feedback/styles.module.scss

@@ -37,11 +37,11 @@
 }
 
 .feedbackText {
+  font-family: var(--ifm-font-family-base);
   width: 100%;
   border: var(--ifm-hr-border-color) 1px solid;
   border-radius: 0.4rem;
   padding: 0.4rem;
-  font-family: "Manrope", sans-serif;
 }
 
 .feedbackButton {

docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss

@@ -325,7 +325,6 @@ button {
   padding-left: 1.5714286em;
 }
 .MarkpromptAnswer ol > li::marker {
-  font-weight: 400;
   color: var(--markprompt-foreground);
 }
 .MarkpromptAnswer ul > li::marker {
@@ -454,7 +453,6 @@ button {
   background-color: var(--markprompt-muted);
   border: 1px solid var(--markprompt-border);
   overflow-x: auto;
-  font-weight: 400;
   font-size: 0.8571429em;
   line-height: 1.6666667;
   margin-top: 1.6666667em;

docs-website/src/pages/_components/Hero/hero.module.scss

@@ -74,3 +74,26 @@
     margin-right: 0.5rem;
   }
 }
+
+.quickstartContent {
+  text-align: center;
+  padding: 2rem 0;
+  height: 100%;
+  margin: 2rem 0;
+  background: #34394d;
+  border-radius: var(--ifm-card-border-radius);
+}
+
+.quickstartTitle {
+  color: #fafafa;
+}
+
+.quickstartSubtitle {
+  font-size: 1.1rem;
+  color: gray;
+}
+
+.quickstartCodeblock {
+  text-align: left;
+  padding: 0 20vh;
+}

docs-website/src/pages/_components/Hero/index.js

@@ -34,12 +34,11 @@ const Hero = ({}) => {
               complexity of your data ecosystem.
             </p>
             <p className="hero__subtitle">
-              Built with ❤️ by{" "}
+              Built with ❤️ by <img src={useBaseUrl("/img/acryl-logo-transparent-mark.svg")} width="25" />{" "}
-              <img src="https://datahubproject.io/img/acryl-logo-light-mark.png" style={{ "vertical-align": "text-top;" }} width="25" />{" "}
               <a href="https://acryldata.io" target="blank" rel="noopener noreferrer">
                 Acryl Data
               </a>{" "}
-              and <img src="https://datahubproject.io/img/LI-In-Bug.png" width="25" /> LinkedIn.
+              and <img src={useBaseUrl("img/LI-In-Bug.png")} width="25" /> LinkedIn.
             </p>
             <Link className="button button--primary button--md" to={useBaseUrl("docs/")}>
               Get Started →
@@ -51,10 +50,10 @@ const Hero = ({}) => {
         </div>
         <CardCTAs />
         <Image className="hero__image" img={require(`/img/diagrams/datahub-flow-diagram-${colorMode}.png`)} alt="DataHub Flow Diagram" />
-        <div className="quickstart__content">
+        <div className={styles.quickstartContent}>
-          <h1 className="quickstart__title">Get Started Now</h1>
+          <h1 className={styles.quickstartTitle}>Get Started Now</h1>
-          <p className="quickstart__subtitle">Run the following command to get started with DataHub.</p>
+          <p className={styles.quickstartSubtitle}>Run the following command to get started with DataHub.</p>
-          <div className="quickstart__codeblock">
+          <div className={styles.quickstartCodeblock}>
             <CodeBlock className={"language-shell"}>
               python3 -m pip install --upgrade pip wheel setuptools <br />
               python3 -m pip install --upgrade acryl-datahub <br />

docs-website/src/pages/_components/Section/section.module.scss

@@ -9,7 +9,6 @@
 .sectionTitle {
   font-size: 2.5rem;
   margin-bottom: 3rem;
-  font-weight: normal;
   text-align: center;
 }
 

docs-website/src/pages/docs/_components/DropDownFilter/search.module.scss

@@ -74,7 +74,6 @@
 }
 
 .searchResultItemHeading {
-  font-weight: 400;
   margin-bottom: 0;
 }
 

docs-website/src/pages/docs/_components/GuideList/guidelist.module.scss

@@ -16,6 +16,9 @@
     display: block;
     margin-bottom: 0.25rem;
   }
+  strong {
+    font-weight: 600;
+  }
   span {
     font-size: 0.875rem;
     line-height: 1.25em;

docs-website/src/pages/docs/_components/GuideList/index.jsx

@@ -19,7 +19,7 @@ const GuideList = ({ title, content, seeMoreLink }) =>
   content?.length > 0 ? (
     <div style={{ padding: "2vh 0" }}>
       <div className="container">
-        <h2 style={{ fontWeight: "normal" }}>{title}</h2>
+        <h2>{title}</h2>
         <div className="row row--no-gutters">
           {content.map((props, idx) => (
             <ListItem key={idx} {...props} />

docs-website/src/pages/docs/_components/QuickLinkCard/quicklinkcard.module.scss

@@ -20,6 +20,10 @@
     display: block;
     margin-bottom: 0.25rem;
   }
+  strong {
+    font-weight: 600;
+  }
+
   span {
     font-size: 0.875rem;
     line-height: 1.25em;

docs-website/src/pages/docs/_components/SearchBar/search.module.scss

@@ -91,7 +91,6 @@
 }
 
 .searchResultItemHeading {
-  font-weight: 400;
   margin-bottom: 0;
 }
 

docs-website/src/styles/acryl.scss

@@ -7,4 +7,7 @@
   --ifm-color-primary-light: #13beb0;
   --ifm-color-primary-lighter: #14c7b8;
   --ifm-color-primary-lightest: #16e1d0;
+
+  // Custom
+  --ifm-color-primary-opaque: rgba(17, 173, 160, 0.1);
 }

docs-website/src/styles/datahub.scss

@@ -7,4 +7,6 @@
   --ifm-color-primary-light: #349dff;
   --ifm-color-primary-lighter: #42a4ff;
   --ifm-color-primary-lightest: #6cb8ff;
+
+  --ifm-color-primary-opaque: rgba(24, 144, 255, 0.1);
 }

docs-website/src/styles/global.scss

@@ -7,16 +7,23 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  font-family: "Manrope", sans-serif;
+  // Global
   --ifm-background-color: #ffffff;
+  --ifm-global-spacing: 1rem;
 
   /* Typography */
-  --ifm-heading-font-weight: 600;
+  --ifm-font-size-base: 95%;
-  --ifm-font-weight-semibold: 600;
+  --ifm-heading-font-weight: 700;
   --ifm-code-font-size: 0.9em;
   --ifm-heading-color: #000000;
+  --ifm-heading-font-family: "Manrope", sans-serif;
+  --ifm-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
   /* Buttons */
   --ifm-button-border-radius: 1000em;
+  --ifm-button-font-weight: 600;
 
   /* Navbar */
   --ifm-navbar-background-color: var(--ifm-background-color);
@@ -30,6 +37,7 @@
   --ifm-hr-border-width: 1px 0 0 0;
   --ifm-hr-border-color: #e3e3e3;
   --ifm-hr-background-color: #e3e3e3;
+
   /* More Colors */
   --ifm-hero-background-color: var(--ifm-background-color);
   --ifm-background-surface-color: #fafafa;
@@ -37,6 +45,19 @@
   /* Cards */
   --ifm-card-background-color: --ifm-background-color;
   --ifm-card-border-radius: calc(var(--ifm-global-radius) * 1.5);
+
+  /* Menu */
+  --ifm-menu-link-padding-vertical: 0.6rem;
+  --ifm-menu-link-padding-horizontal: 1rem;
+  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.47 9.47L8 7.94333L9.53 9.47L10 9L8 7L6 9L6.47 9.47Z" fill="black" fill-opacity="0.5"/></svg>');
+  --ifm-menu-color-background-hover: var(--ifm-color-primary-opaque);
+  --ifm-menu-color-background-active: var(--ifm-color-primary-opaque);
+
+  /* TOC */
+  --ifm-toc-padding-vertical: 1.25rem;
+
+  /* Breadcrumbs */
+  --ifm-breadcrumb-item-background-active: var(--ifm-color-primary-opaque);
 }
 
 html[data-theme="dark"] {
@@ -49,16 +70,29 @@ html[data-theme="dark"] {
   .button--primary {
     color: #fff;
   }
+
+  .invert-on-dark {
+    filter: invert(1);
+  }
 }
 
-h1 {
+/* Main Docs Content Area */
-  font-weight: 400;
+
+main {
+  padding-top: 1rem;
 }
 
-html[data-theme="dark"] .invert-on-dark {
+.markdown,
-  filter: invert(1);
+main > h1 {
+  margin-top: 1rem;
 }
 
+[class*="docItemCol"] {
+  padding: 0 2rem;
+}
+
+/* Custom Utility */
+
 .row--centered {
   align-items: center;
 }
@@ -67,6 +101,8 @@ html[data-theme="dark"] .invert-on-dark {
   padding: 5vh 0;
 }
 
+/* Announcement Bar */
+
 div[class^="announcementBar"] {
   z-index: calc(var(--ifm-z-index-fixed) - 1);
   div {
@@ -106,6 +142,8 @@ div[class^="announcementBar"] {
   }
 }
 
+/** Navbar */
+
 @media only screen and (max-width: 1050px) {
   .navbar__toggle {
     display: inherit;
@@ -158,16 +196,7 @@ div[class^="announcementBar"] {
   }
 }
 
-.footer {
+/* Misc */
-  .footer__copyright {
-    text-align: left;
-    font-size: 0.8em;
-    opacity: 0.5;
-  }
-  &.footer--dark {
-    --ifm-footer-background-color: #000000;
-  }
-}
 
 .button {
   white-space: initial;
@@ -192,64 +221,93 @@ div[class^="announcementBar"] {
   }
 }
 
-.hero {
+.footer {
-  padding: 5vh 0;
+  .footer__copyright {
-}
+    text-align: left;
-
+    font-size: 0.8em;
-.hero__subtitle {
-  font-size: 1.25em;
-  margin: 1rem auto 3rem;
-  max-width: 800px;
-}
-.hero__content {
-  text-align: center;
-  padding: 2rem 0;
-  height: 100%;
-}
-
-.quickstart__content {
-  text-align: center;
-  padding: 2rem 0;
-  height: 100%;
-  margin: 2rem 0;
-  background: #34394d;
-  border-radius: var(--ifm-card-border-radius);
-}
-
-.quickstart__title {
-  color: #fafafa;
-}
-
-.quickstart__subtitle {
-  font-size: 1.1rem;
-  color: gray;
-}
-
-.quickstart__codeblock {
-  text-align: left;
-  padding: 0 20vh;
-}
-
-.theme-doc-sidebar-menu ul li.saasOnly a.menu__link {
-  &:after {
-    content: "";
-    display: block;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    margin-right: auto;
-    margin-left: 10px;
     opacity: 0.5;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='cloud' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z'%3E%3C/path%3E%3C/svg%3E");
+  }
-    background-repeat: no-repeat;
+  &.footer--dark {
-    background-position: 50% 50%;
+    --ifm-footer-background-color: #000000;
-    background-size: 20px 20px;
-    [data-theme="dark"] & {
-      filter: invert(1);
-    }
   }
 }
 
+/* Hero */
+
+.hero {
+  padding: 5vh 0;
+
+  .hero__subtitle {
+    font-size: 1.25em;
+    margin: 1rem auto 3rem;
+    max-width: 800px;
+
+    img {
+      vertical-align: middle;
+      margin-top: -0.3em;
+    }
+  }
+  .hero__content {
+    text-align: center;
+    padding: 2rem 0;
+    height: 100%;
+  }
+}
+
+/* Sidebar Menu */
+
+.menu .theme-doc-sidebar-menu {
+  ul li.saasOnly a.menu__link {
+    &:after {
+      content: "";
+      display: block;
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      margin-right: auto;
+      margin-left: 10px;
+      opacity: 0.5;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='cloud' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z'%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: 20px 20px;
+      [data-theme="dark"] & {
+        filter: invert(1);
+      }
+    }
+  }
+
+  .theme-doc-sidebar-item-category-level-1 .menu__link {
+    font-weight: 400;
+  }
+
+  .theme-doc-sidebar-item-category-level-1 .menu__link--active {
+    font-weight: 600;
+  }
+
+  .theme-doc-sidebar-item-category-level-1 > div > a:first-child {
+    color: var(--ifm-navbar-link-color);
+    font-weight: 600;
+    padding: calc(var(--ifm-menu-link-padding-vertical) + 0.2rem) var(--ifm-menu-link-padding-horizontal);
+  }
+  .theme-doc-sidebar-item-category-level-1 > div > a.menu__link--active {
+    color: var(--ifm-navbar-link-color);
+    font-weight: 600;
+  }
+}
+
+/* TOC */
+.table-of-contents {
+  padding-left: 1.5rem;
+  font-size: 0.9rem;
+  line-height: 1rem;
+  .table-of-contents__link--active {
+    font-weight: 600;
+  }
+}
+
+/* Search */
+
 [data-theme="light"] .DocSearch {
   /* --docsearch-primary-color: var(--ifm-color-primary); */
   /* --docsearch-text-color: var(--ifm-font-color-base); */
@@ -285,18 +343,3 @@ div[class^="announcementBar"] {
   --docsearch-footer-background: var(--ifm-background-surface-color);
   --docsearch-key-gradient: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
 }
-
-.theme-doc-sidebar-item-category-level-1 > div > a:first-child {
-  color: var(--ifm-navbar-link-color);
-  font-size: 17px;
-}
-
-.theme-doc-sidebar-item-category-level-1 > div > a.menu__link--active {
-  color: var(--ifm-menu-color-active);
-  font-size: 17px;
-}
-
-/* Increase padding for levels greater than 1 */
-[class^="theme-doc-sidebar-item"][class*="-level-"]:not(.theme-doc-sidebar-item-category-level-1) {
-  padding-left: 8px;
-}

docs-website/static/img/acryl-logo-transparent-mark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.7083 125.18652"><g fill="none" opacity=".66"><path d="m105.89021,72.32176l-32.88379-46.08544c-3.37097-4.72436-8.84851-7.54492-14.65234-7.54492s-11.28137,2.8208-14.65247,7.54517L10.81819,72.32176c-3.93286,5.51196-4.45044,12.67578-1.35046,18.69555,3.09973,6.01977,9.23169,9.75952,16.00281,9.75952h65.76721c6.77112,0,12.9032-3.7395,16.00293-9.75952,3.09985-6.02002,2.5824-13.18359-1.35046-18.69555Zm-14.65247,20.45508H25.47053c-8.13147,0-12.86316-9.18921-8.14014-15.80835L50.21382,30.88329c1.99402-2.79468,5.06714-4.19189,8.14026-4.19189s6.14624,1.39722,8.14026,4.19165l32.88367,46.08544c4.72302,6.61914-.00879,15.80835-8.14026,15.80835Z" fill="#18999a"/></g><g fill="none" opacity=".33"><path d="m41.83396,76.00463h33.04028c7.04163,0,13.60364-2.7652,18.45496-7.51343l-4.72095-6.61627c-3.27185,3.69019-8.05029,6.1297-13.73401,6.1297h-33.04028c-5.68359,0-10.46204-2.43939-13.73376-6.12958l-4.72095,6.61621c4.85132,4.74817,11.41309,7.51337,18.45471,7.51337Z" fill="#105f77"/></g><g fill="none" opacity=".33"><path d="m18.37241,61.73479l5.55859-7.79016c-1.21753-4.89282-.47314-10.33594,2.90381-15.06866l16.52002-23.15234c3.67407-5.14893,9.33667-7.72363,14.99927-7.72363s11.3252,2.57471,14.99927,7.72363l16.52014,23.15259c3.37683,4.7326,4.12146,10.1756,2.90393,15.0683l5.55859,7.79022c.01025-.01984.02222-.03833.03247-.05823,4.5509-8.83789,3.79114-19.35498-1.98279-27.44702l-16.52014-23.15234c-4.9491-6.93603-12.99084-11.07715-21.51147-11.07715s-16.56226,4.14111-21.51135,11.0769l-16.52014,23.15234c-5.77393,8.09228-6.53369,18.60937-1.98279,27.44726.01025.0199.02234.03845.03259.05829Z" fill="#105f77"/></g><path d="m114.82783,109.25755l-48.27136-67.65087c-1.88721-2.64478-4.95349-4.22363-8.20239-4.22363s-6.31519,1.57886-8.20227,4.22339L1.88032,109.25755c-2.20166,3.08569-2.49121,7.09595-.75598,10.46582,1.73535,3.36963,5.16797,5.46313,8.95837,5.46313h96.54297c3.79053,0,7.22314-2.09326,8.95837-5.46338,1.73523-3.36987,1.44543-7.38013-.75623-10.46557Zm-8.20215,7.92895H10.08272c-1.68835,0-2.67078-1.90796-1.69019-3.28223L56.66389,46.25316c.41406-.58008,1.05212-.87012,1.69019-.87012s1.27625.29004,1.69019.87012l48.27148,67.65111c.98071,1.37451-.00171,3.28223-1.69006,3.28223Z" fill="#20d3bd"/></svg>