Skip to content

Commit 7ecb179

Browse files
YousefEDYousefED
committed
improve mobile site
1 parent ef70680 commit 7ecb179

File tree

4 files changed

+78
-77
lines changed

4 files changed

+78
-77
lines changed

‎packages/editor/src/app/documentRenderers/project/ProjectRenderer.module.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,18 @@
2525
padding: 10px;
2626
overflow-y: auto;
2727
}
28+
29+
@media only screen and (max-width: 768px) {
30+
.projectContainer {
31+
flex-direction: column;
32+
}
33+
34+
.sidebarContainer {
35+
display: none;
36+
border: 0;
37+
background: rgb(250, 250, 250);
38+
border-bottom: 1px solid rgb(239, 241, 244);
39+
width: 100%;
40+
max-width: 100%;
41+
}
42+
}

‎packages/editor/src/app/main/Main.module.css

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
1616
}
1717

1818
.main.homepage {
19-
background: radial-gradient(
20-
circle at 15% 35%,
21-
#dbe4ff,
22-
rgba(255, 255, 255, 0) 25%
19+
background: linear-gradient(
20+
180deg,
21+
rgba(0, 255, 255, 0) 0%,
22+
rgba(0, 255, 255, 0) 400px,
23+
rgba(255, 255, 255, 1) 700px
2324
),
25+
radial-gradient(circle at 15% 35%, #dbe4ff, rgba(255, 255, 255, 0) 25%),
2426
radial-gradient(circle at 85% 20%, #e3fafc, rgba(255, 255, 255, 0) 25%),
2527
white;
2628
background-repeat: no-repeat;

‎packages/editor/src/app/main/components/startscreen/StartScreen.module.css

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.page {
2+
padding: 0 1em;
23
font-size: 18px;
34
}
45

@@ -14,7 +15,7 @@
1415
.introduction {
1516
display: flex;
1617
align-items: center;
17-
padding: 3em 0 11em 0;
18+
padding: 3em 0;
1819
position: relative;
1920
/* background: url(./assets/background_pattern.png),
2021
linear-gradient(0deg, #eff7fc, #eff7fc); */
@@ -24,7 +25,7 @@
2425
#7cee6f 0%,
2526
white 100%
2627
); */
27-
min-height: 50vh;
28+
min-height: 80vh;
2829
}
2930

3031
.introduction .github {
@@ -34,11 +35,6 @@
3435
padding: 2em 1.5em;
3536
}
3637

37-
.introduction .row {
38-
text-align: center;
39-
justify-content: center;
40-
}
41-
4238
.introduction .logo {
4339
margin-top: 1em;
4440
margin-bottom: 2em;
@@ -59,22 +55,21 @@
5955
}
6056

6157
.demo {
62-
background-color: white;
58+
/* background-color: white; */
6359
position: relative;
6460
display: flex;
6561
justify-content: center;
6662
}
6763

68-
.demo .code_block {
69-
overflow: hidden;
70-
position: relative;
71-
top: -8em;
72-
text-align: center;
64+
.code_block {
65+
display: block;
66+
margin: 5em 0;
7367
}
7468

75-
.demo .code_block img {
76-
border: 1px solid #ececec;
77-
border-radius: 5px;
69+
.code_block img {
70+
box-shadow: rgb(0 0 0 / 25%) 0px 10px 30px -20px;
71+
border-radius: 20px;
72+
border: 1px solid rgba(0, 0, 0, 0.08);
7873
width: 90%;
7974
}
8075

@@ -96,14 +91,15 @@
9691
}
9792

9893
.perksSection {
99-
background: white;
94+
/* background: white; */
10095
}
10196

10297
.perks .perk {
10398
/* display: flex;
10499
flex-direction: column;
105100
flex: 1 1;
106101
align-items: center; */
102+
background: white;
107103
flex: 0 0 auto;
108104
place-self: start;
109105
text-align: left;
@@ -141,7 +137,7 @@
141137
}
142138

143139
.notebooks {
144-
background: white;
140+
/* background: white; */
145141
padding: 6em 0;
146142
text-align: center;
147143
}
@@ -265,18 +261,12 @@
265261
font-size: 1.6em;
266262
}
267263

268-
.introduction .buttons {
264+
.buttons {
269265
flex-direction: column;
266+
gap: 1em !important;
270267
}
271268

272-
.introduction .buttons a:first-child {
273-
margin-bottom: 1em;
274-
margin-right: 0;
275-
}
276-
277-
.demo .code_block img {
278-
border: 1px solid #ececec;
279-
border-radius: 0px;
269+
.code_block img {
280270
width: 100%;
281271
}
282272

‎packages/editor/src/app/main/components/startscreen/StartScreen.tsx

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ export const StartScreen = observer(() => {
4444
</GitHubButton>
4545
</div> */}
4646
<div className="container">
47-
<div className={styles.row}>
47+
<div>
4848
<h1>Create &amp; share live interactive notebooks</h1>
4949
<p>
5050
TypeCell is an open source Typescript live programming
5151
environment. <br /> Running code has never been easier :)
5252
</p>
5353
</div>
54-
<div className={styles.row + " " + styles.buttons + " row"}>
54+
<div className={styles.buttons}>
5555
<Link className="button primary" to={toTutorial()}>
5656
Try interactive tutorial
5757
</Link>
@@ -63,11 +63,6 @@ export const StartScreen = observer(() => {
6363
Create new notebook
6464
</a>
6565
</div>
66-
</div>
67-
</section>
68-
69-
<section className={styles.demo}>
70-
<div className="container">
7166
<div className={styles.code_block}>
7267
<img src={intro} alt="TypeCell Demo" />
7368
</div>
@@ -224,54 +219,53 @@ export const StartScreen = observer(() => {
224219
</div>
225220
</div>
226221
</section>
222+
</div>
223+
<footer className={styles.footer}>
224+
<div className="container">
225+
<div className={styles.links}>
226+
<ul>
227+
<li>
228+
<Link to={toTutorial()}>
229+
<span>Interactive introduction</span>
230+
</Link>
231+
</li>
232+
<li>
233+
<Link to={toDocs()}>
234+
<span>Documentation</span>
235+
</Link>
236+
</li>
227237

228-
<footer className={styles.footer}>
229-
<div className="container">
230-
<div className={styles.links}>
231-
<ul>
232-
<li>
233-
<Link to={toTutorial()}>
234-
<span>Interactive introduction</span>
235-
</Link>
236-
</li>
237-
<li>
238-
<Link to={toDocs()}>
239-
<span>Documentation</span>
240-
</Link>
241-
</li>
242-
243-
{/* <li>
238+
{/* <li>
244239
<a
245240
target="_blank"
246241
href="https://github.com/YousefED/typecell-next"
247242
rel="noreferrer">
248243
<span>Find us on GitHub</span>
249244
</a>
250245
</li> */}
251-
<li>
252-
<a
253-
target="_blank"
254-
href="https://discord.gg/TcJ9TRC3SV"
255-
rel="noreferrer">
256-
<span>Chat on discord</span>
257-
</a>
258-
</li>
259-
<li>
260-
<a
261-
target="_blank"
262-
href="https://matrix.to/#/#typecell-space:matrix.org"
263-
rel="noreferrer">
264-
<span>Chat on Matrix</span>
265-
</a>
266-
</li>
267-
</ul>
268-
</div>
269-
<div className={styles.bottom}>
270-
<span>{new Date().getFullYear()} TypeCell live programming</span>
271-
</div>
246+
<li>
247+
<a
248+
target="_blank"
249+
href="https://discord.gg/TcJ9TRC3SV"
250+
rel="noreferrer">
251+
<span>Chat on discord</span>
252+
</a>
253+
</li>
254+
<li>
255+
<a
256+
target="_blank"
257+
href="https://matrix.to/#/#typecell-space:matrix.org"
258+
rel="noreferrer">
259+
<span>Chat on Matrix</span>
260+
</a>
261+
</li>
262+
</ul>
272263
</div>
273-
</footer>
274-
</div>
264+
<div className={styles.bottom}>
265+
<span>{new Date().getFullYear()} TypeCell live programming</span>
266+
</div>
267+
</div>
268+
</footer>
275269
</>
276270
);
277271
});

0 commit comments

Comments
 (0)