Skip to content

Commit 1d413fa

Browse files
JeremyDolleJeremyDolle
authored
* 📚 (Docs): update css on 2xl screens (#298)
1 parent b4f7cc7 commit 1d413fa

File tree

3 files changed

+66
-58
lines changed

3 files changed

+66
-58
lines changed

‎documentation/src/components/Features.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,6 @@ export default function HomepageFeatures(): JSX.Element {
112112
<Feature key={`feature-${idx}`} {...props} />
113113
))}
114114
</div>
115-
116-
<svg className="bottom-0 w-full sm:-mt-20 fill-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
117-
<path fill="current" fillOpacity="1" d="M0,320L60,272C120,224,240,128,360,128C480,128,600,224,720,234.7C840,245,960,171,1080,122.7C1200,75,1320,53,1380,42.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" />
118-
</svg>
119115
</section>
120116
);
121117
}

‎documentation/src/components/Quickstart.tsx‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,61 @@ export default function Quickstart() {
77
const { colorMode } = useColorMode();
88
return (
99
<section className="relative flex justify-end bg-red-400 mb-0 pb-10 sm:-mb-[170px] sm:-mb-[100px] lg:-mb-[270px]">
10-
<div className="absolute bottom-0 sm:top-1/2 right-0">
11-
<Circles color="red" animate="animate-circle-delay-1" />
12-
</div>
10+
<div className="relative max-w-7xl m-auto">
11+
<div className="relative flex justify-end">
12+
13+
<div className="absolute bottom-0 sm:top-1/2 right-0">
14+
<Circles color="red" animate="animate-circle-delay-1" />
15+
</div>
1316

14-
<div className="relative sm:absolute sm:left-16 sm:-top-5 w-full sm:w-[60%] p-5 sm:p-2">
17+
<div className="relative sm:absolute sm:left-16 sm:-top-5 w-full sm:w-[60%] p-5 sm:p-2">
1518

16-
<h2 className="font-bold text-3xl font-black text-white w-full mb-5 sm:mb-10">
17-
Quickstart -
18-
<span className="w-full sm:w-auto text-sm font-normal text-red-800 ml-3"> Open your terminal and run the following </span>
19-
</h2>
19+
<h2 className="font-bold text-3xl font-black text-white w-full mb-5 sm:mb-10">
20+
Quickstart -
21+
<span className="w-full sm:w-auto text-sm font-normal text-red-800 ml-3"> Open your terminal and run the following </span>
22+
</h2>
2023

21-
<code className="flex items-center border-0 min-h-[65px] w-[110%] p-2 bg-neutral-100 dark:bg-neutral-900 rounded-md">
22-
<span className="text-black dark:text-white">
23-
<span className="text-red-400 mr-2">npx</span>
24-
<span className="text-blue-400 mr-2">react-native init</span>
25-
MyApp
26-
<span className="text-neutral-500 ml-2">
27-
--template @thecodingmachine/react-native-boilerplate
28-
</span>
29-
</span>
30-
</code>
31-
<div>
32-
<button
33-
type="button"
34-
className="
24+
<code className="flex items-center border-0 min-h-[65px] w-[110%] p-2 bg-neutral-100 dark:bg-neutral-900 rounded-md">
25+
<span className="text-black dark:text-white">
26+
<span className="text-red-400 mr-2">npx</span>
27+
<span className="text-blue-400 mr-2">react-native init</span>
28+
MyApp
29+
<span className="text-neutral-500 ml-2">
30+
--template @thecodingmachine/react-native-boilerplate
31+
</span>
32+
</span>
33+
</code>
34+
<div>
35+
<button
36+
type="button"
37+
className="
3538
transition-all
3639
ease-in mt-5 hover:bg-green-700 hover:text-white hover:text text-md text-white font-bold py-3 px-4 rounded bg-green-500 shadow-lg shadow-green-500/50"
37-
onClick={() => { navigator.clipboard.writeText('npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate'); }}
38-
>
39-
Copy and test it
40-
<span className="ml-3">🧪</span>
41-
</button>
40+
onClick={() => { navigator.clipboard.writeText('npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate'); }}
41+
>
42+
Copy and test it
43+
<span className="ml-3">🧪</span>
44+
</button>
45+
</div>
46+
</div>
47+
48+
{colorMode === 'dark'
49+
? (
50+
<img
51+
className="pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
52+
src="./img/phone-dark.png"
53+
alt="phone"
54+
/>
55+
)
56+
: (
57+
<img
58+
className="pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
59+
src="./img/phone.png"
60+
alt="phone"
61+
/>
62+
)}
4263
</div>
4364
</div>
44-
45-
{colorMode === 'dark'
46-
? (
47-
<img
48-
className="pointer-events-none hidden sm:block w-full md:w-[80%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
49-
src="./img/phone-dark.png"
50-
alt="phone"
51-
/>
52-
)
53-
: (
54-
<img
55-
className="pointer-events-none hidden sm:block w-full md:w-[80%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
56-
src="./img/phone.png"
57-
alt="phone"
58-
/>
59-
)}
6065
</section>
6166
);
6267
}

‎documentation/src/pages/index.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,7 @@ function HomepageHeader() {
3535

3636
<div className="py-10">
3737
<Link
38-
className="
39-
transition-all
40-
ease-in hover:bg-red-700 hover:text-white hover:text text-md text-white font-bold py-3 px-4 rounded bg-red-500 shadow-lg shadow-red-500/50"
38+
className="transition-all ease-in hover:bg-red-700 hover:text-white hover:text text-md text-white font-bold py-3 px-4 rounded bg-red-500 shadow-lg shadow-red-500/50"
4139
to="/docs/Introduction"
4240
>
4341
Get started
@@ -58,19 +56,28 @@ export default function Home(): JSX.Element {
5856
description="A React Native template for building solid applications, using JavaScript or Typescript (YOU choose)."
5957
wrapperClassName="relative overflow-hidden"
6058
>
61-
<div className="animate-blob opacity-80 absolute -top-20 -right-20 md:top-0 md:right-0 bg-gradient-to-r from-red-600 via-pink-700 to-pink-400 h-[310px] w-[310px] md:h-[350px] md:w-[350px] lg:h-[382px] lg:w-[382px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
62-
<div className="animate-blob-delay-1 opacity-80 absolute top-12 right-1/4 md:top-[250px] md:right-1/4 bg-gradient-to-r from-indigo-600 via-blue-700 to-blue-400 h-[180px] w-[180px] md:h-[230px] md:w-[230px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
59+
<div className="relative max-w-7xl m-auto">
60+
<div className="animate-blob opacity-80 absolute -top-20 -right-20 md:top-0 md:right-0 bg-gradient-to-r from-red-600 via-pink-700 to-pink-400 h-[310px] w-[310px] md:h-[350px] md:w-[350px] lg:h-[382px] lg:w-[382px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
61+
<div className="animate-blob-delay-1 opacity-80 absolute top-12 right-1/4 md:top-[250px] md:right-1/4 bg-gradient-to-r from-indigo-600 via-blue-700 to-blue-400 h-[180px] w-[180px] md:h-[230px] md:w-[230px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
62+
</div>
6363

6464
<div className="backdrop-blur-xl">
6565

66-
<div className="absolute top-[800px]"><Circles animate="animate-circle-delay-1" /></div>
67-
<div className="absolute top-[400px] right-0"><Circles color="white" /></div>
68-
69-
<HomepageHeader />
66+
<div className="relative max-w-7xl m-auto">
67+
<div className="absolute top-[800px]"><Circles animate="animate-circle-delay-1" /></div>
68+
<div className="absolute top-[400px] right-0"><Circles color="white" /></div>
69+
<HomepageHeader />
70+
</div>
7071

7172
<main className="relative">
72-
<HomepageFeatures />
73-
<Quickstart />
73+
<div className="relative max-w-7xl m-auto">
74+
<HomepageFeatures />
75+
</div>
76+
77+
<svg className="bottom-0 w-full sm:-mt-20 fill-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
78+
<path fill="current" fillOpacity="1" d="M0,320L60,272C120,224,240,128,360,128C480,128,600,224,720,234.7C840,245,960,171,1080,122.7C1200,75,1320,53,1380,42.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" />
79+
</svg>
80+
<Quickstart />
7481
<svg className="pointer-events-none absolute bottom-0 sm:bottom-[169px] sm:bottom-[99px] lg:bottom-[269px] w-full sm:-mt-20 fill-neutral-100 dark:fill-neutral-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
7582
<path fill="current" fillOpacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" />
7683
</svg>

0 commit comments

Comments
 (0)