Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit 9400e1f

Browse files
nisarhassan12nisarhassan12
committed
mobile improvements.
1 parent be228b3 commit 9400e1f

File tree

12 files changed

+143
-152
lines changed

12 files changed

+143
-152
lines changed

‎src/components/AnnouncementBanner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const AnnoucementBanner = () => {
149149
hideTheBanner()
150150
}}
151151
>
152-
<svg xmlns="http://www.w3.org/2000/svg" width="29.86" height="29.86" data-name="Banner closing" viewBox="0 0 29.86 29.86">
152+
<svg xmlns="http://www.w3.org/2000/svg" width="29.86" height="29.86" data-name="Banner closing" viewBox="0 0 30.86 30.86">
153153
<g data-name="Gruppe 950">
154154
<g data-name="Pfad 1398">
155155
<path d="M14.93 29.86a14.93 14.93 0 1114.93-14.93 14.93 14.93 0 01-14.93 14.93z"></path>

‎src/components/Banner.tsx

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,84 +4,87 @@ import styled from '@emotion/styled'
44
import link from './Link'
55

66
const StyledBanner = styled.header`
7-
/* ------------------------------------------- */
8-
/* ----- Banner ----- */
9-
/* ------------------------------------------- */
10-
11-
display: flex;
12-
justify-content: space-between;
13-
align-items: center;
14-
padding: 14rem 0 10rem;
15-
16-
@media(max-width: 960px) {
17-
flex-direction: column-reverse;
18-
padding: 5rem 0;
7+
/* ------------------------------------------- */
8+
/* ----- Banner ----- */
9+
/* ------------------------------------------- */
10+
11+
display: flex;
12+
justify-content: space-between;
13+
align-items: center;
14+
padding: 14rem 0 10rem;
15+
16+
@media (max-width: 960px) {
17+
flex-direction: column-reverse;
18+
padding: 5rem 0;
19+
}
20+
21+
@media (max-width: 960px) {
22+
flex-direction: column-reverse;
23+
padding: 1rem 0 5rem;
24+
}
25+
26+
@media (max-width: 640px) {
27+
text-align: center;
28+
}
29+
30+
.para {
31+
margin-top: 3rem;
32+
33+
@media (min-width: 961px) {
34+
max-width: 50rem;
1935
}
36+
}
2037
21-
@media(max-width: 960px) {
22-
flex-direction: column-reverse;
23-
padding: 1rem 0 5rem;
24-
}
38+
.btn {
39+
margin: 5rem 2rem 2rem 0;
2540
26-
.para {
27-
margin-top: 3rem;
28-
29-
@media(min-width: 961px) {
30-
max-width: 50rem;
31-
}
41+
@media (max-width: 960px) {
42+
margin-top: 3rem;
3243
}
44+
}
3345
34-
.btn {
35-
margin: 5rem 2rem 2rem 0;
46+
p + .btn {
47+
margin-top: 3rem;
48+
}
3649
37-
@media(max-width: 960px) {
38-
margin-top: 3rem;
39-
}
40-
}
50+
object,
51+
img {
52+
display: block;
53+
height: 35rem;
4154
42-
p + .btn {
43-
margin-top: 3rem;
55+
@media (min-width: 961px) {
56+
margin-left: 3rem;
4457
}
4558
46-
47-
object, img {
48-
display: block;
49-
height: 35rem;
50-
51-
@media(min-width: 961px) {
52-
margin-left: 3rem;
53-
}
54-
55-
@media(max-width: 960px) {
56-
height: 20rem;
57-
margin: 5rem 0;
58-
}
59+
@media (max-width: 960px) {
60+
height: 20rem;
61+
margin: 5rem 0;
5962
}
60-
63+
}
6164
`
6265

6366
interface BannerProps {
64-
subtitle: string
65-
title: JSX.Element
66-
paragraph?: string | JSX.Element
67-
linkPath: string
68-
linkText: string
69-
img: JSX.Element
67+
subtitle: string
68+
title: JSX.Element
69+
paragraph?: string | JSX.Element
70+
linkPath: string
71+
linkText: string
72+
img: JSX.Element
7073
}
7174

72-
const Banner: React.SFC<BannerProps> = ({subtitle, title, paragraph, linkPath, linkText, img, children}) => (
73-
<div className="row pattern">
74-
<StyledBanner role="banner" className="banner">
75-
<div className="banner__text">
76-
<h3 className="sub">{subtitle}</h3>
77-
{title}
78-
{ paragraph ? <p className="para">{paragraph}</p> : null }
79-
{link(linkPath, linkText,'', true, false)}
80-
{children}
81-
</div>
82-
{img}
83-
</StyledBanner>
84-
</div>
75+
const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath, linkText, img, children }) => (
76+
<div className="row pattern">
77+
<StyledBanner role="banner" className="banner">
78+
<div className="banner__text">
79+
<h3 className="sub">{subtitle}</h3>
80+
{title}
81+
{paragraph ? <p className="para">{paragraph}</p> : null}
82+
{link(linkPath, linkText, '', true, false)}
83+
{children}
84+
</div>
85+
{img}
86+
</StyledBanner>
87+
</div>
8588
)
8689

8790
export default Banner

‎src/components/DropDown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,9 +148,9 @@ class DropDown extends React.Component<DropDownProps, {}> {
148148
onMouseLeave={this.handleMouseLeave}
149149
>
150150
<button
151-
onClick={this.handleClick}
152151
aria-label={ isRendered ? "Hide Dropdown's Content" : "Show Dropdown's Content"}
153152
aria-live="assertive"
153+
onFocus={this.handleMouseEnter}
154154
>
155155
<div>{title}</div>
156156
<img

‎src/components/FeatureCard.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContain
1212
1313
&:not(:last-child) {
1414
margin-bottom: 18rem;
15+
16+
@media (max-width: 500px) {
17+
margin-bottom: 10rem;
18+
}
1519
}
1620
1721
@media (max-width: ${sizes.breakpoints.sm}) {
@@ -66,7 +70,7 @@ const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContain
6670
}
6771
6872
@media (max-width: ${sizes.breakpoints.md}) {
69-
padding: 0 2rem;
73+
padding: 0 1rem;
7074
}
7175
7276
@media (max-width: ${sizes.breakpoints.sm}) {

‎src/components/PricingBox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
5858
}
5959
6060
@media(max-width: ${sizes.breakpoints.md}) {
61-
min-height: ${({ isTitleOutside }) => (isTitleOutside ? '40rem' : '51rem')};
61+
min-height: ${({ isTitleOutside }) => (isTitleOutside ? '40rem' : '49rem')};
6262
min-width: 30rem;
6363
padding: 2rem 3rem;
6464
}

‎src/components/features/StarFortFree.tsx

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,37 @@ import { Link } from 'gatsby'
44
import styled from '@emotion/styled'
55
import { colors } from '../../styles/variables'
66

7-
const Styled = styled.div`
8-
.start {
9-
text-align: center;
7+
const Styled = styled.section`
8+
padding-bottom: 0;
109
11-
h3 {
12-
font-weight: 400;
13-
margin: 3rem 0;
10+
.start {
11+
text-align: center;
1412
15-
span {
16-
font-weight: 600;
17-
color: ${colors.link};
18-
}
19-
}
13+
h3 {
14+
font-weight: 400;
15+
margin: 3rem 0;
16+
17+
span {
18+
font-weight: 600;
19+
color: ${colors.link};
20+
}
2021
}
22+
}
2123
`
2224

2325
const StartForFree = () => (
24-
<Styled>
25-
<div className="row">
26-
<section className="start">
27-
<Link to="/#get-started" className="btn btn--cta btn--big">Start for Free</Link>
28-
<h3>Prefix any GitLab, GitHub or Bitbucket URL with <span>gitpod.io/#</span></h3>
29-
</section>
30-
</div>
31-
</Styled>
26+
<Styled>
27+
<div className="row">
28+
<section className="start">
29+
<Link to="/#get-started" className="btn btn--cta btn--big">
30+
Start for Free
31+
</Link>
32+
<h3>
33+
Prefix any GitLab, GitHub or Bitbucket URL with <span>gitpod.io/#</span>
34+
</h3>
35+
</section>
36+
</div>
37+
</Styled>
3238
)
3339

3440
export default StartForFree

‎src/components/index/Banner.tsx

Lines changed: 31 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,14 @@ import Bitbucket from '../../resources/bitbucket.svg'
88
import { sizes, colors } from '../../styles/variables'
99

1010
const Styled = styled.div`
11-
height: 700px;
12-
margin-bottom: 47rem;
11+
.pattern {
12+
&::after {
13+
height: 75%;
1314
14-
@media (max-width: 1140px) {
15-
margin-bottom: 35%;
16-
}
17-
18-
@media (max-width: 1020px) {
19-
margin-bottom: 30%;
20-
}
21-
22-
@media (max-width: 800px) {
23-
height: 400px;
24-
margin-bottom: 50rem;
25-
}
26-
27-
@media (max-width: 740px) {
28-
margin-bottom: 45rem;
29-
}
30-
31-
@media (max-width: 640px) {
32-
margin-bottom: 40rem;
33-
}
34-
35-
@media (max-width: 560px) {
36-
margin-bottom: 30rem;
37-
}
38-
39-
@media (max-width: 360px) {
40-
margin-bottom: 25rem;
41-
}
42-
43-
@media (max-width: 320px) {
44-
margin-bottom: 22rem;
15+
@media (max-width: 800px) {
16+
height: 90%;
17+
}
18+
}
4519
}
4620
4721
.banner {
@@ -91,28 +65,30 @@ const Styled = styled.div`
9165
`
9266

9367
const Banner = () => (
94-
<Styled className="pattern">
95-
<div className="row">
96-
<header role="banner" className="banner">
97-
<div className="banner__text-box">
98-
<h1>
99-
<strong>Dev Environments</strong> Built for the Cloud.
100-
</h1>
101-
<p>Describe your dev environments as code and automate the last missing piece in your DevOps pipeline.</p>
102-
<a href="#get-started" className="btn btn--cta">
103-
Try Now
104-
</a>
105-
<p className="works-with">
106-
Works with
107-
<img src={GitLab} alt="GitLab" />
108-
<img src={GitHub} alt="GitHub" />
109-
<img src={Bitbucket} alt="Bitbucket" />
110-
</p>
111-
</div>
112-
<div className="banner__screenshot-container">
113-
<img alt="Gitpod Screenshot" src={Screenshot} className="banner__screenshot" />
114-
</div>
115-
</header>
68+
<Styled>
69+
<div className="pattern">
70+
<div className="row">
71+
<header role="banner" className="banner">
72+
<div className="banner__text-box">
73+
<h1>
74+
<strong>Dev Environments</strong> Built for the Cloud.
75+
</h1>
76+
<p>Describe your dev environments as code and automate the last missing piece in your DevOps pipeline.</p>
77+
<a href="#get-started" className="btn btn--cta">
78+
Try Now
79+
</a>
80+
<p className="works-with">
81+
Works with
82+
<img src={GitLab} alt="GitLab" />
83+
<img src={GitHub} alt="GitHub" />
84+
<img src={Bitbucket} alt="Bitbucket" />
85+
</p>
86+
</div>
87+
<div className="banner__screenshot-container">
88+
<img alt="Gitpod Screenshot" src={Screenshot} className="banner__screenshot" />
89+
</div>
90+
</header>
91+
</div>
11692
</div>
11793
</Styled>
11894
)

‎src/components/index/TextFeature.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ const StyledTextFeature = styled.div`
1313
1414
@media (max-width: 500px) {
1515
padding: 5rem 2rem;
16+
17+
h3 {
18+
text-align: center;
19+
}
1620
}
1721
1822
h3 + p {
@@ -23,20 +27,13 @@ const StyledTextFeature = styled.div`
2327
display: block;
2428
height: 8rem;
2529
margin-bottom: 4rem;
26-
27-
@media (min-width: 501px) {
28-
margin: 0 auto 4rem;
29-
}
30+
margin: 0 auto 4rem;
3031
}
3132
3233
.btn {
3334
display: block;
3435
max-width: 240px;
35-
margin-top: 4rem;
36-
37-
@media (min-width: 501px) {
38-
margin: 4rem auto 0;
39-
}
36+
margin: 4rem auto 0;
4037
}
4138
`
4239

‎src/components/pricing/PricingBoxes.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { Link } from 'gatsby'
1717
const Styled = styled.div`
1818
h1 {
1919
margin-bottom: 6rem;
20+
text-align: center;
2021
}
2122
2223
.pricing {

0 commit comments

Comments
 (0)