mirror of
https://github.com/datahub-project/datahub.git
synced 2025-12-27 18:07:57 +00:00
feat: made datahub home page colors more consistent (#11496)
This commit is contained in:
Jay
GitHub
parent
171aad1213
commit
4ffa439c4c
@ -14,7 +14,7 @@
|
||||
padding: 60px 0;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: #3e2644;
|
||||
background: #222;//#3e2644;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -87,7 +87,8 @@
|
||||
aspect-ratio: 1;
|
||||
height: 100%;
|
||||
flex-basis: 45%;
|
||||
background-color: #f6f8fb;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
justify-content: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@ -109,11 +110,15 @@
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 2px 12px 0px #00000040;
|
||||
box-shadow: 0px 2px 12px 0px #0000001C;
|
||||
border: 1px solid #333;
|
||||
.itemLinkOpenArrow {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -126,34 +131,35 @@
|
||||
width: 36px;
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
filter: brightness(0);
|
||||
}
|
||||
|
||||
.item1 {
|
||||
flex-basis: 40%;
|
||||
background-color: #77B750;
|
||||
// background-color: #77B750;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
flex-grow: 1;
|
||||
background-color: #FC5263;
|
||||
// background-color: #FC5263;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
flex-grow: 1;
|
||||
background-color: #EFB300;
|
||||
// background-color: #EFB300;
|
||||
}
|
||||
|
||||
.item4 {
|
||||
flex-basis: 40%;
|
||||
background-color: #1890FF;
|
||||
// background-color: #1890FF;
|
||||
}
|
||||
|
||||
/* Additional: Control image size */
|
||||
.item_content img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
// make it all white
|
||||
filter: brightness(0) invert(1);
|
||||
// make it all black
|
||||
filter: brightness(0);// invert(1);
|
||||
}
|
||||
|
||||
/* Additional: Limit text height with ellipsis */
|
||||
@ -163,7 +169,7 @@
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: white;
|
||||
color: black;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@ const Ecosystem = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.diagramItem} style={{ backgroundImage: `url(${useBaseUrl("/img/datahub-architechture-diagram.svg")})` }} />
|
||||
<div className={styles.diagramItem} style={{ backgroundImage: `url(${useBaseUrl("/img/datahub-architechture-diagram.png")})` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -80,7 +80,7 @@ const QuickstartContent = ({}) => {
|
||||
duration: .75
|
||||
}
|
||||
}}
|
||||
viewport={{ once: true, amount: .5 }}
|
||||
viewport={{ once: true, amount: .2 }}
|
||||
>
|
||||
<div className="quickstart__text">
|
||||
<div className="quickstart__text__label">{data.heading}</div>
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
:global {
|
||||
.quickstart__header {
|
||||
text-align: center;
|
||||
// text-align: center;
|
||||
margin-bottom: 100px;
|
||||
|
||||
.quickstart__title,
|
||||
@ -100,11 +100,11 @@
|
||||
}
|
||||
|
||||
.quickstart__bar {
|
||||
width: 10px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
background: linear-gradient(180deg, #29B5E8 18.71%, #FFBF4C 143.37%);
|
||||
background: linear-gradient(180deg, #546167 0.71%, #58595f 95.37%, #69cfff 100%);
|
||||
border-radius: 10px;
|
||||
transform-origin: top;
|
||||
// transition: transform 0.3s;
|
||||
|
||||
@ -113,17 +113,19 @@ const SocialMedia = ({}) => {
|
||||
<div className={styles.container}>
|
||||
<div className={styles.containerBG} style={{ backgroundImage: `url(${useBaseUrl('/img/home-social-media/section-background.svg')})` }} />
|
||||
|
||||
<div className={styles.upperBox}>
|
||||
{/* <div className={styles.upperBox}>
|
||||
<div>
|
||||
Built <strong>for</strong> Data Practitioners,<br/><strong>by</strong>{" "}
|
||||
Data Practitioners.
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className={styles.mainBox}>
|
||||
<div className={styles.socialMediaSection}>
|
||||
<div className={styles.socialSubText}>
|
||||
Born at LinkedIn, driven by Acryl <br />
|
||||
and 500+ community contributors.
|
||||
Built <strong>for</strong> Data Practitioners,<br/><strong>by</strong>{" "}
|
||||
Data Practitioners.
|
||||
{/* Born at LinkedIn, driven by Acryl <br />
|
||||
and 500+ community contributors. */}
|
||||
</div>
|
||||
<div className={styles.socialStats}>
|
||||
<Link className={styles.statItem} to="https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w">
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 80px auto;
|
||||
width: 90vw;
|
||||
height: calc(90vh - 70px);
|
||||
min-height: 720px;
|
||||
margin: 0 auto;
|
||||
width: 100vw;
|
||||
height: calc(70vh - 70px);
|
||||
min-height: 600px;
|
||||
max-height: 1000px;
|
||||
border-radius: 50px;
|
||||
border-radius: 0;
|
||||
background-color: #545765cc;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -29,7 +29,7 @@
|
||||
width: 440px;
|
||||
height: 200px;
|
||||
background-color: #eee;
|
||||
color: #000;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -47,7 +47,7 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
padding: 0 0 80px 152px;
|
||||
padding: 0 0 0 152px;
|
||||
}
|
||||
|
||||
.socialSubText {
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
.mediaIcons > svg {
|
||||
color: white;
|
||||
color: #fff;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
@ -78,7 +78,7 @@
|
||||
.styledIcon {
|
||||
min-width: 74px;
|
||||
min-height: 74px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(250, 250, 250, 0.2);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.visitPageIcon > svg {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.statItem {
|
||||
@ -107,13 +107,13 @@
|
||||
gap: 14px;
|
||||
border: .5px solid transparent;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
color: white;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.statItem:hover {
|
||||
background-color: #83889a80;
|
||||
border-color: #ffffff;
|
||||
border-color: #fff;
|
||||
position: relative;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
@ -143,7 +143,7 @@
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-top: 200px;
|
||||
// padding-top: 200px;
|
||||
}
|
||||
|
||||
.videoStyles {
|
||||
@ -190,9 +190,9 @@
|
||||
.videoContainer {
|
||||
position: relative;
|
||||
height: 60vh;
|
||||
max-height: 680px;
|
||||
max-height: 520px;
|
||||
min-height: 400px;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
@ -311,7 +311,8 @@
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
.socialSubText {
|
||||
font-size: 1.2rem;
|
||||
// font-size: 1.2rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
opacity: .75;
|
||||
text-align: center;
|
||||
|
||||
@ -25,6 +25,8 @@ const Trial = ({onOpenTourModal}) => {
|
||||
</div>
|
||||
<div className={styles.trial_right}>
|
||||
<div className={styles.right_content}>
|
||||
<div className={styles.gradientTop} />
|
||||
<div className={styles.gradientBottom} />
|
||||
<div className={styles.right_l}>
|
||||
<div className={styles.soc}>
|
||||
<img
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
width: 80vw;
|
||||
min-width: 900px;
|
||||
max-width: 1200px;
|
||||
margin: 1rem auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.trial {
|
||||
height: 600px;
|
||||
@ -88,6 +88,20 @@
|
||||
width: 45%;
|
||||
max-width: 520px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.gradientTop, .gradientBottom {
|
||||
position: absolute;
|
||||
background: linear-gradient(#FFFFFF, #FFFFFF00);
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.gradientBottom {
|
||||
transform: rotate(180deg);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.right_content {
|
||||
height: 100%;
|
||||
@ -96,6 +110,7 @@
|
||||
.right_l {
|
||||
width: 50%;
|
||||
height: 95%;
|
||||
margin-top: -.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
@ -103,9 +118,10 @@
|
||||
div {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
line-height: 1.5rem;
|
||||
img {
|
||||
filter: invert(1) brightness(2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
@ -118,7 +134,9 @@
|
||||
padding-right: 1.5rem;
|
||||
height: 49%;
|
||||
border-radius: 35px;
|
||||
background-image: linear-gradient(to bottom, #FC526333, #FC5263);
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
// background-image: linear-gradient(to bottom, #FC526333, #FC5263);
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
@ -127,19 +145,21 @@
|
||||
justify-content: center;
|
||||
padding-left: 2rem;
|
||||
padding-right: 1.5rem;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
#77B750,
|
||||
#77B75080
|
||||
);
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
// background-image: linear-gradient(
|
||||
// to bottom,
|
||||
// #77B750,
|
||||
// #77B75080
|
||||
// );
|
||||
height: 49%;
|
||||
border-radius: 35px;
|
||||
}
|
||||
}
|
||||
.right_r {
|
||||
width: 50%;
|
||||
height: 94%;
|
||||
margin-top: 3rem;
|
||||
height: calc(100% - 2rem);
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
@ -147,9 +167,10 @@
|
||||
div {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
line-height: 1.5rem;
|
||||
img {
|
||||
filter: invert(1) brightness(2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
@ -160,7 +181,9 @@
|
||||
justify-content: center;
|
||||
padding-left: 2rem;
|
||||
padding-right: 1.5rem;
|
||||
background-image: linear-gradient(to bottom, #1890FF80, #1890FF);
|
||||
// background-image: linear-gradient(to bottom, #1890FF80, #1890FF);
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
height: 49%;
|
||||
border-radius: 35px;
|
||||
}
|
||||
@ -171,11 +194,13 @@
|
||||
justify-content: center;
|
||||
padding-left: 2rem;
|
||||
padding-right: 1.5rem;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
#EFB300,
|
||||
#EFB30033
|
||||
);
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
// background-image: linear-gradient(
|
||||
// to bottom,
|
||||
// #EFB300,
|
||||
// #EFB30033
|
||||
// );
|
||||
height: 49%;
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
BIN
docs-website/static/img/datahub-architechture-diagram.png
Normal file
BIN
docs-website/static/img/datahub-architechture-diagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Loading…
x
Reference in New Issue
Block a user