yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-28 02:17:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs-site): style custom announcement bar (#6022)

Browse Source
This commit is contained in:
Jeff Merrick 2022-09-22 17:01:46 -05:00 committed by GitHub
parent 2c659214ab
commit 1ff6ccead1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs-website/docusaurus.config.js
View File

@ -11,9 +11,7 @@ module.exports = {
favicon: "img/favicon.ico",
organizationName: "datahub-project", // Usually your GitHub org/user name.
projectName: "datahub", // Usually your repo name.
stylesheets: [
"https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap",
],
stylesheets: ["https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"],
noIndex: isSaas,
customFields: {
isSaas: isSaas,
@ -22,27 +20,8 @@ module.exports = {
...(!isSaas && {
announcementBar: {
id: "announcement",
content: `
<div style="
display: flex;
gap: 2em;
justify-content: center;
align-items: center;
">
<div style="
display: flex;
align-items: center;
gap: 1em;
">
<img src="/img/acryl-logo-white-mark.svg" style="
max-height: 35px;
">
<p style="
margin-bottom: 0;
"><strong>Managed DataHub</strong><span> &nbsp;Acryl Data delivers an easy to consume DataHub platform for the enterprise</span></p></div>
<a href="https://www.acryldata.io/datahub-beta" target="_blank" class="button button--primary">Sign up for Managed DataHub →</a>
</div>
`,
content:
'<div><img src="/img/acryl-logo-white-mark.svg" /><p><strong>Managed DataHub</strong><span> &nbsp;Acryl Data delivers an easy to consume DataHub platform for the enterprise</span></p></div> <a href="https://www.acryldata.io/datahub-sign-up" target="_blank" class="button button--primary">Sign up for Managed DataHub&nbsp;→</a>',
backgroundColor: "#070707",
textColor: "#ffffff",
isCloseable: false,
@ -52,12 +31,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: [
{
@ -212,9 +187,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"),
],
},
@ -222,10 +195,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",

53
docs-website/src/styles/global.scss
View File

@ -66,39 +66,42 @@ html[data-theme="dark"] .invert-on-dark {
padding: 5vh 0;
}
div[class^="announcementBarContent"] {
display: flex;
align-items: center;
padding: 0 1rem;
justify-content: space-between;
font-size: 1rem;
> div {
div[class^="announcementBar"] {
z-index: calc(var(--ifm-z-index-fixed) - 1);
div {
display: flex;
align-items: center;
padding: 0 1rem;
justify-content: space-between;
font-size: 1rem;
> div {
display: flex;
align-items: center;
> p {
text-align: left;
line-height: 1.1rem;
margin: 0;
> span {
@media (max-width: 780px) {
> p {
text-align: left;
line-height: 1.1rem;
margin: 0;
> span {
@media (max-width: 780px) {
display: none;
}
}
@media (max-width: 480px) {
display: none;
}
}
@media (max-width: 480px) {
display: none;
}
}
}
img {
width: 24px;
height: auto;
margin-right: 1rem;
}
a {
color: var(--ifm-button-color);
text-decoration: none;
img {
width: 24px;
height: auto;
margin-right: 1rem;
}
a {
color: var(--ifm-button-color);
text-decoration: none;
}
}
}