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>
This commit is contained in:
Jeff Merrick 2023-09-26 14:26:06 -05:00 committed by GitHub
parent ca4dc4e3d2
commit f95d1ae820
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 183 additions and 120 deletions

View File

@ -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: [
"https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap",
],
stylesheets: ["https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&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/${
isSaas ? "acryl" : "datahub"
}-logo-color-light-horizontal.svg`,
srcDark: `img/${
isSaas ? "acryl" : "datahub"
}-logo-color-dark-horizontal.svg`,
src: `img/${isSaas ? "acryl" : "datahub"}-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',
position: 'right',
type: "docsVersionDropdown",
position: "right",
dropdownActiveClassDisabled: true,
},
{
@ -201,9 +196,7 @@ module.exports = {
blog: false,
theme: {
customCss: [
isSaas
? require.resolve("./src/styles/acryl.scss")
: require.resolve("./src/styles/datahub.scss"),
isSaas ? 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",

View File

@ -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 {

View File

@ -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;

View File

@ -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;
}

View File

@ -34,12 +34,11 @@ const Hero = ({}) => {
complexity of your data ecosystem.
</p>
<p className="hero__subtitle">
Built with by{" "}
<img src="https://datahubproject.io/img/acryl-logo-light-mark.png" style={{ "vertical-align": "text-top;" }} width="25" />{" "}
Built with by <img src={useBaseUrl("/img/acryl-logo-transparent-mark.svg")} 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">
<h1 className="quickstart__title">Get Started Now</h1>
<p className="quickstart__subtitle">Run the following command to get started with DataHub.</p>
<div className="quickstart__codeblock">
<div className={styles.quickstartContent}>
<h1 className={styles.quickstartTitle}>Get Started Now</h1>
<p className={styles.quickstartSubtitle}>Run the following command to get started with DataHub.</p>
<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 />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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-weight-semibold: 600;
--ifm-font-size-base: 95%;
--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 {
font-weight: 400;
/* Main Docs Content Area */
main {
padding-top: 1rem;
}
html[data-theme="dark"] .invert-on-dark {
filter: invert(1);
.markdown,
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 {
.footer__copyright {
text-align: left;
font-size: 0.8em;
opacity: 0.5;
}
&.footer--dark {
--ifm-footer-background-color: #000000;
}
}
/* Misc */
.button {
white-space: initial;
@ -192,64 +221,93 @@ div[class^="announcementBar"] {
}
}
.hero {
padding: 5vh 0;
}
.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;
.footer {
.footer__copyright {
text-align: left;
font-size: 0.8em;
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);
}
}
&.footer--dark {
--ifm-footer-background-color: #000000;
}
}
/* 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;
}

View File

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

After

Width:  |  Height:  |  Size: 2.2 KiB