Skip to content

Commit

Permalink
feat: made datahub home page colors more consistent (datahub-project#…
Browse files Browse the repository at this point in the history 
…11496)
  • Loading branch information
@jayacryl
jayacryl authored Sep 29, 2024
1 parent 171aad1 commit 4ffa439
Show file tree
Hide file tree
Showing 11 changed files with 281 additions and 246 deletions.
2 changes: 1 addition & 1 deletion docs-website/src/pages/_components/Community/community.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
padding: 60px 0;
width: 60%;
height: 100%;
background: #3e2644;
background: #222;//#3e2644;
color: white;
display: flex;
align-items: center;
Expand Down
26 changes: 16 additions & 10 deletions docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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 */
Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion docs-website/src/pages/_components/Ecosystem/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs-website/src/pages/_components/QuickstartContent/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

:global {
.quickstart__header {
text-align: center;
// text-align: center;
margin-bottom: 100px;

.quickstart__title,
Expand All @@ -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;
Expand Down
10 changes: 6 additions & 4 deletions docs-website/src/pages/_components/SocialMedia/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
33 changes: 17 additions & 16 deletions docs-website/src/pages/_components/SocialMedia/socialmedia.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -47,7 +47,7 @@
display: flex;
justify-content: flex-start;
height: 100%;
padding: 0 0 80px 152px;
padding: 0 0 0 152px;
}

.socialSubText {
Expand All @@ -64,7 +64,7 @@
}

.mediaIcons > svg {
color: white;
color: #fff;
width: 38px;
height: 38px;
}
Expand All @@ -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;
Expand All @@ -92,7 +92,7 @@
}

.visitPageIcon > svg {
color: white;
color: #fff;
}

.statItem {
Expand All @@ -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;
Expand Down Expand Up @@ -143,7 +143,7 @@
justify-content: center;
flex-direction: column;
align-items: flex-start;
padding-top: 200px;
// padding-top: 200px;
}

.videoStyles {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions docs-website/src/pages/_components/Trial/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit 4ffa439

Please sign in to comment.