Skip to content

Commit f471485

Browse files
ibarrajoibarrajo
committed
style updates
1 parent 72014da commit f471485

File tree

5 files changed

+185
-40
lines changed

5 files changed

+185
-40
lines changed

‎src/components/HomepageFeatures/index.tsx‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,31 @@ const FeatureList: FeatureItem[] = [
1414
Svg: require('@site/static/img/arrow_divert_filled.svg').default,
1515
description: (
1616
<>
17-
Cadence uses workflow primitives to help developers encode complex business logic, while seamlessly managing scalability, reliability, and availability, freeing developers from these concerns </>
17+
Encode complex business logic, while seamlessly managing scalability, reliability, and availability, freeing developers from these concerns
18+
</>
1819
),
1920
},
2021
{
21-
title: 'Resilient Workflows in Any Environment',
22+
title: 'Run Resilient Workflows in Any Environment',
2223
Svg: require('@site/static/img/gears_blue.svg').default,
2324
description: (
2425
<>
25-
Cadence uses workflow primitives to help developers encode complex business logic, while seamlessly managing scalability, reliability, and availability, freeing developers from these concerns </>
26+
Cadence enables writing stateful applications without worrying about the complexity of handling process failures.
27+
</>
2628
),
2729
},
2830
{
2931
title: 'Horizontal Scalability for Massive Workflow Loads',
3032
Svg: require('@site/static/img/chart_bar_ascending_filled.svg').default,
3133
description: (
3234
<>
33-
Cadence scales horizontally to handle millions of concurrent workflows, and it includes asynchronous history event replication out-of-the-box, providing robust recovery from zone failures
35+
Cadence scales horizontally to handle millions of concurrent workflows, and it includes asynchronous history event replication out-of-the-box, providing robust recovery from zone failures
3436
</>
3537
),
3638
},
3739
];
3840

39-
function Feature({title, Svg, description}: FeatureItem) {
41+
function Feature({ title, Svg, description }: FeatureItem) {
4042
return (
4143
<div className={clsx('col col--12')}>
4244
<div className="text--center">
@@ -50,15 +52,40 @@ function Feature({title, Svg, description}: FeatureItem) {
5052
);
5153
}
5254

55+
function FeatureHorizontal({ title, Svg, description }: FeatureItem) {
56+
return (
57+
58+
<div className="col col--4 margin-top--lg margin-bottom--lg">
59+
<div className="card card--full-height item shadow--tl">
60+
<div className="card__header text--center">
61+
<Heading as="h3">{title}</Heading>
62+
<Svg className={styles.featureSvg} role="img" />
63+
</div>
64+
<div className="card__body">
65+
<div className="text--center text--break padding-horiz--md">
66+
<p>{description}</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
);
72+
}
73+
5374
export default function HomepageFeatures(): JSX.Element {
5475
return (
5576
<section className={styles.features}>
5677
<div className="container">
5778
<div className="row">
5879
{FeatureList.map((props, idx) => (
59-
<Feature key={idx} {...props} />
80+
<FeatureHorizontal key={idx} {...props} />
6081
))}
6182
</div>
83+
84+
{/* <div className="row">
85+
{FeatureList.map((props, idx) => (
86+
<Feature key={idx} {...props} />
87+
))}
88+
</div> */}
6289
</div>
6390
</section>
6491
);

‎src/css/custom.css‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,58 @@
44
* work well for content-centric websites.
55
*/
66

7-
/* @import url('https://fonts.cdnfonts.com/css/uber-move-text'); */
8-
/* @import url('https://fonts.cdnfonts.com/css/uber-move-2'); */
7+
@import url('fonts.css');
98

10-
/* https://baseweb.design/guides/theming/#colors */
119
:root {
12-
--ifm-color-primary: #000000;
13-
--ifm-color-primary-dark: #363636;
14-
--ifm-color-primary-darker: #343434;
15-
--ifm-color-primary-darkest: #161616;
16-
--ifm-color-primary-light: #DEDEDE;
17-
--ifm-color-primary-lighter: #DEDEDE;
18-
--ifm-color-primary-lightest: #FFFFFF;
19-
--ifm-code-font-size: 95%;
20-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
21-
22-
/* --ifm-font-family-base: '"UberMoveText", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif';
23-
--ifm-font-family-monospace: '"UberMove", UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif';
24-
--ifm-heading-font-family: '"UberMoveMono", "Lucida Console", Monaco, monospace'; */
25-
}
10+
/*
11+
Verdana could provide good fallback.
12+
UberMove-Bold used for headings,
13+
UberMoveText-Regular for body
14+
system-ui, Helvetica for fallback
15+
*/
16+
--ifm-font-family-base: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
17+
--ifm-font-family-monospace: UberMoveMono, UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
18+
--ifm-heading-font-family: UberMove, UberMoveMono, "Lucida Console", Monaco, monospace;
19+
20+
--ifm-font-color-base: #000000;
21+
--ifm-link-color: #276ef1;
2622

23+
--ifm-color-primary: #5B4636; /* A rich brown for primary text and key elements */
24+
--ifm-color-primary-dark: #45362A; /* A darker shade for headings or important elements */
25+
--ifm-color-primary-darker: #2E241C; /* Even darker for small accents or dividers */
26+
--ifm-color-primary-darkest: #1A140E; /* The darkest shade for maximum contrast areas */
27+
--ifm-color-primary-light: #FFF1D5; /* A slightly darker variant of Cosmic Latte for backgrounds */
28+
--ifm-color-primary-lighter: #FFF5DB; /* A lighter variant for secondary UI areas */
29+
--ifm-color-primary-lightest: #FFF8E7; /* Cosmic Latte as the base lightest color */
30+
--ifm-code-font-size: 100%; /* Ensure code font size is clear and legible */
31+
--docusaurus-highlighted-code-line-bg: rgba(91, 70, 54, 0.1); /* Subtle highlight for code lines */
32+
}
2733
[data-theme='dark'] {
28-
--ifm-color-primary: #25c2a0;
29-
--ifm-color-primary-dark: #DEDEDE;
30-
--ifm-color-primary-darker: #868686;
31-
--ifm-color-primary-darkest: #000000;
32-
--ifm-color-primary-light: #868686;
33-
--ifm-color-primary-lighter: #DEDEDE;
34-
--ifm-color-primary-lightest: #FFFFFF;
35-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
34+
35+
--ifm-font-color-base: #FFE6CC;
36+
--ifm-link-color: #FFF8E7;
37+
38+
--ifm-color-primary: #FFE6CC; /* A warm cream for primary text and key elements */
39+
--ifm-color-primary-dark: #CCB3A1; /* A slightly muted cream for secondary text */
40+
--ifm-color-primary-darker: #996F6F; /* A deeper, warm accent color */
41+
--ifm-color-primary-darkest: #2E241C; /* Deep brown for the darkest contrast areas */
42+
--ifm-color-primary-light: #4A3B2D; /* A subtle brown shade for UI elements */
43+
--ifm-color-primary-lighter: #5B4636; /* Rich brown for secondary elements */
44+
--ifm-color-primary-lightest: #FFF8E7; /* Cosmic Latte as the highlight */
45+
--docusaurus-highlighted-code-line-bg: rgba(255, 230, 204, 0.1); /* Warm tone for code line highlights */
46+
}
47+
48+
.hero.hero--primary[data-theme='light'] {
49+
--ifm-hero-background-color: #1A140E; /* A warm background color for hero sections */
50+
}
51+
.hero.hero--primary[data-theme='dark'] {
52+
--ifm-hero-background-color: #FFE6CC; /* A darker background color for dark mode hero sections */
53+
}
54+
55+
html[data-theme='light'] .DocSearch-Hit {
56+
--docsearch-highlight-color: #276ef1; /* Highlight color for search results */
57+
}
58+
59+
html[data-theme='dark'] .DocSearch-Hit,.DocSearch-Hit-path {
60+
--docsearch-highlight-color: #276ef1; /* Highlight color for search results */
3661
}

‎src/css/fonts.css‎

Lines changed: 79 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/pages/index.module.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,18 @@
33
* and scoped locally.
44
*/
55

6-
.heroBanner {
6+
/* .heroBanner {
77
padding: 4rem 0;
88
text-align: center;
99
position: relative;
1010
overflow: hidden;
11+
} */
12+
13+
.heroBanner {
14+
/* background: linear-gradient(90deg, #191d2e, #30384e 35%, #46506d); */
15+
/* Uber Safety Blue to Cosmic Latte */
16+
background: linear-gradient(90deg,#276ef1 05%,#FFF8E7 100%);
17+
1118
}
1219

1320
@media screen and (max-width: 996px) {
@@ -16,8 +23,13 @@
1623
}
1724
}
1825

19-
.buttons {
26+
.hero .heroBanner .button--secondary .button--lg {
27+
background-color: black;
28+
}
29+
30+
31+
/* .buttons {
2032
display: flex;
2133
align-items: center;
2234
justify-content: center;
23-
}
35+
} */

‎src/pages/index.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Heading from '@theme/Heading';
88
import styles from './index.module.css';
99

1010
function HomepageHeader() {
11-
const {siteConfig} = useDocusaurusContext();
11+
const { siteConfig } = useDocusaurusContext();
1212
return (
1313
<header className={clsx('hero hero--primary', styles.heroBanner)}>
1414
<div className="container">
@@ -17,19 +17,21 @@ function HomepageHeader() {
1717
</Heading>
1818
<p className="hero__subtitle">{siteConfig.tagline}</p>
1919
<div className={styles.buttons}>
20-
<Link
21-
className="button button--secondary button--lg"
22-
to="docs/get-started">
20+
{/* <Link className="button button--secondary button--lg" to="docs/get-started">
2321
Get Started - 5min ⏱️
24-
</Link>
22+
</Link> */}
23+
24+
<Link href="/docs/get-started" className="button button--secondary button--lg">🔬 Get Started</Link>
25+
&nbsp;&nbsp;
26+
{/* <Link href="/docs" className="button button--secondary button--lg">📚 Documentation</Link> */}
2527
</div>
2628
</div>
2729
</header>
2830
);
2931
}
3032

3133
export default function Home(): JSX.Element {
32-
const {siteConfig} = useDocusaurusContext();
34+
const { siteConfig } = useDocusaurusContext();
3335
return (
3436
<Layout
3537
title={`${siteConfig.title}`}

0 commit comments

Comments
 (0)