Skip to content

Commit 1345725

Browse files
jakmrojakmro
committed
Add waves and changle colors
1 parent d53ac60 commit 1345725

File tree

20 files changed

+536
-51
lines changed

20 files changed

+536
-51
lines changed

‎docs/src/components/ExecuTorchIntroduction/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styles from './styles.module.css';
44
const ExecuTorchIntroduction = () => {
55
return (
66
<div className={styles.introductionContainer}>
7+
<h2 className={styles.title}>What is ExecuTorch?</h2>
78
<p className={styles.introduction}>
89
ExecuTorch is a novel AI framework from the PyTorch team which provides
910
tools to export and run PyTorch models on edge devices like mobile

‎docs/src/components/ExecuTorchIntroduction/styles.module.css

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
11
.introductionContainer {
2-
max-width: 768px;
2+
max-width: 996px;
3+
display: flex;
4+
flex-direction: column;
5+
margin-bottom: -8rem;
6+
gap: 4rem;
37
}
48

59
.introduction {
610
font-size: 24px;
711
font-weight: 400;
812
}
913

14+
.title {
15+
font-size: var(--swm-h2-font-size);
16+
}
17+
1018
@media (max-width: 768px) {
1119
.introduction {
12-
font-size: 20px !important;
20+
font-size: 20px;
21+
}
22+
23+
.introductionContainer {
24+
gap: 0;
25+
margin-bottom: -6rem;
26+
}
27+
28+
.title {
29+
margin-bottom: 1rem;
1330
}
1431
}
1532

33+
@media (max-width: 420px) {
34+
.title {
35+
margin-bottom: 1.5rem;
36+
font-size: 24px;
37+
}
38+
}

‎docs/src/components/FooterBackground/index.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import usePageType from '@site/src/hooks/usePageType';
3+
import WaveBottom from '@site/src/components/Wave/WaveBottom';
4+
import styles from './styles.module.css';
5+
6+
const FooterBackground = () => {
7+
const { isLanding } = usePageType();
8+
9+
return (
10+
<div className={styles.waveContainer}>{isLanding && <WaveBottom />}</div>
11+
);
12+
};
13+
14+
export default FooterBackground;

‎docs/src/components/FooterBackground/styles.module.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.waveContainer {
2+
position: relative;
3+
margin-top: 106px;
4+
z-index: 0;
5+
}
6+
7+
[class*='footerLanding'] {
8+
margin-top: -106px;
9+
}
10+
11+
@media (max-width: 996px) {
12+
.waveContainer {
13+
margin-top: 121px;
14+
}
15+
[class*='footerLanding'] {
16+
margin-top: -121px;
17+
}
18+
}
19+
20+
@media (max-width: 700px) {
21+
.waveContainer {
22+
margin-top: 147px;
23+
}
24+
[class*='footerLanding'] {
25+
margin-top: -147px;
26+
}
27+
}
28+
29+
@media (max-width: 376px) {
30+
.waveContainer {
31+
margin-top: 173px;
32+
}
33+
[class*='footerLanding'] {
34+
margin-top: -173px;
35+
}
36+
}

‎docs/src/components/Hero/StartScreen/index.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import styles from './styles.module.css';
33
import HomepageButton from '@site/src/components/HomepageButton';
44
import useScreenSize from '@site/src/hooks/useScreenSize';
55
import Logo from '@site/static/img/logo-hero.svg';
6+
import BrowserOnly from '@docusaurus/BrowserOnly';
67

78
const StartScreen = () => {
8-
const { windowWidth } = useScreenSize();
9-
109
return (
1110
<section className={styles.hero}>
1211
<div className={styles.heading}>
@@ -21,7 +20,14 @@ const StartScreen = () => {
2120
powered by ExecuTorch.
2221
</h2>
2322
</div>
24-
{windowWidth > 768 && <Logo />}
23+
<BrowserOnly>
24+
{() => {
25+
const { windowWidth } = useScreenSize();
26+
if (windowWidth > 768) {
27+
return <Logo />;
28+
}
29+
}}
30+
</BrowserOnly>
2531
</div>
2632
<div className={styles.lowerHeading}>
2733
<div className={styles.buttonContainer}>

‎docs/src/components/Hero/StartScreen/styles.module.css

+10-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
.headingLabel :nth-child(2) {
39-
color: var(--swm-purple-light-100);
39+
color: var(--swm-cornflower-80);
4040
}
4141

4242
.subheadingLabel {
@@ -52,7 +52,7 @@
5252
}
5353

5454
.buttonContainer {
55-
margin-top: 5rem;
55+
margin-top: 3rem;
5656
display: flex;
5757
justify-content: flex-start;
5858
}
@@ -66,6 +66,10 @@
6666
font-size: 26px;
6767
width: 100%;
6868
}
69+
70+
.buttonContainer {
71+
margin-top: -2rem;
72+
}
6973
}
7074

7175
@media (max-width: 420px) {
@@ -79,4 +83,8 @@
7983
margin: 1rem 0 2rem 0;
8084
font-size: 20px;
8185
}
86+
87+
.buttonContainer {
88+
margin-top: -1rem;
89+
}
8290
}

‎docs/src/components/HomepageButton/styles.module.css

+10-10
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
text-wrap: nowrap;
88

99
color: var(--swm-off-white);
10-
background-color: var(--swm-landing-button-purple);
10+
background-color: var(--swm-cornflower-80);
1111

1212
cursor: pointer;
1313
transition: background-color 0.3s, color 0.3s;
1414
}
1515

1616
[data-theme='dark'] .homepageButton {
17-
background-color: var(--swm-purple-light-100);
18-
border-color: var(--swm-purple-light-100);
17+
background-color: var(--swm-cornflower-80);
18+
border-color: var(--swm-cornflower-80);
1919
}
2020

2121
a.homepageButtonLink:hover {
@@ -68,15 +68,15 @@ a.homepageButtonLink:hover {
6868

6969
.buttonTransparentStyling {
7070
background-color: transparent;
71-
color: var(--swm-landing-button-purple);
71+
color: var(--swm-cornflower-80);
7272
}
7373

7474
.buttonTransparentStyling svg {
75-
stroke: var(--swm-landing-button-purple);
75+
stroke: var(--swm-cornflower-80);
7676
}
7777

7878
.buttonTransparentStyling:hover {
79-
background-color: var(--swm-landing-button-purple);
79+
background-color: var(--swm-cornflower-80);
8080
color: var(--swm-off-white);
8181
}
8282

@@ -87,7 +87,7 @@ a.homepageButtonLink:hover {
8787
/* Button - purple styling */
8888

8989
.buttonPurpleStyling {
90-
background-color: var(--swm-landing-button-purple);
90+
background-color: var(--swm-cornflower-80);
9191
color: var(--swm-off-white);
9292
}
9393

@@ -97,15 +97,15 @@ a.homepageButtonLink:hover {
9797

9898
.buttonPurpleStyling:hover {
9999
background-color: transparent;
100-
color: var(--swm-landing-button-purple);
100+
color: var(--swm-cornflower-80);
101101
}
102102

103103
.buttonPurpleStyling:hover svg {
104-
stroke: var(--swm-landing-button-purple);
104+
stroke: var(--swm-cornflower-80);
105105
}
106106

107107
.buttonPurpleBorderStyling {
108-
border: 1px solid var(--swm-landing-button-purple);
108+
border: 1px solid var(--swm-cornflower-80);
109109
}
110110

111111
.arrow {

‎docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.featureItem {
2-
background-color: var(--swm-blue-light-20);
3-
box-shadow: -12px 12px 0px var(--swm-blue-light-60);
2+
background-color: var(--swm-cornflower-0);
3+
box-shadow: -12px 12px 0px var(--swm-cornflower-80);
44
flex: 1;
55
padding: 1.5em;
66
}
77

88
[data-theme='dark'] .featureItem {
9-
background-color: var(--swm-purple-dark-40);
10-
box-shadow: -12px 12px 0px var(--swm-purple-dark-140);
9+
background-color: var(--swm-cornflower-60);
10+
box-shadow: -12px 12px 0px var(--swm-cornflower-80);
1111
}
1212

1313
[data-theme='dark'] .featureTitle,

‎docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212

1313
[data-theme='dark'] .featuresButton {
1414
background-color: transparent;
15-
border-color: var(--swm-purple-dark-100);
16-
color: var(--swm-purple-dark-100);
15+
border-color: var(--swm-cornflower-80);
16+
color: var(--swm-cornflower-80);
1717
}
1818
[data-theme='dark'] .featuresButton:hover {
19-
background-color: var(--swm-purple-light-100);
20-
border-color: var(--swm-purple-light-100);
19+
background-color: var(--swm-cornflower-80);
20+
border-color: var(--swm-cornflower-80);
2121
color: var(--swm-off-white);
2222
}
2323

‎docs/src/components/Wave/WaveBottom/index.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import useScreenSize from '@site/src/hooks/useScreenSize';
3+
import BrowserOnly from '@docusaurus/BrowserOnly';
4+
import { useColorMode } from '@docusaurus/theme-common';
5+
import { WaveLight, WaveDark, WaveLightMobile, WaveDarkMobile } from './waves';
6+
7+
const WaveBottom = () => {
8+
const theme = useColorMode().colorMode;
9+
10+
return (
11+
<BrowserOnly>
12+
{() => {
13+
const { windowWidth } = useScreenSize();
14+
15+
if (theme === 'dark') {
16+
return windowWidth > 768
17+
? WaveDark(windowWidth)
18+
: WaveDarkMobile(windowWidth);
19+
}
20+
21+
return windowWidth > 768
22+
? WaveLight(windowWidth)
23+
: WaveLightMobile(windowWidth);
24+
}}
25+
</BrowserOnly>
26+
);
27+
};
28+
29+
export default WaveBottom;

‎docs/src/components/Wave/WaveBottom/styles.module.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.waveBottom {
2+
position: absolute;
3+
z-index: -1;
4+
bottom: 0;
5+
right: 0;
6+
}

0 commit comments

Comments
 (0)