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

Commit d2519a9

Browse files
nisarhassan12nisarhassan12
committed
make site valid in accordance to W3C validator..
Fixes gitpod-io/website#842
1 parent 49c7da9 commit d2519a9

24 files changed

+111
-83
lines changed

‎src/components/Banner.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const StyledBanner = styled.header`
2727
text-align: center;
2828
}
2929
30+
.sub {
31+
display: block;
32+
}
33+
3034
.para {
3135
margin-top: 3rem;
3236
@@ -76,10 +80,10 @@ const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath,
7680
<div className="row pattern">
7781
<StyledBanner role="banner" className="banner">
7882
<div className="banner__text">
79-
<header>
80-
<p className="sub h3">{subtitle}</p>
83+
<h1>
84+
<span className="sub h3">{subtitle}</span>
8185
{title}
82-
</header>
86+
</h1>
8387
{paragraph ? <p className="para">{paragraph}</p> : null}
8488
{link(linkPath, linkText, '', true, false)}
8589
{children}

‎src/components/FeatureCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const Styled = styled.div<{
4343
4444
&:nth-of-type(2n) {
4545
@media (min-width: 1141px) {
46-
flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')};
46+
flex-direction: ${({ opposite }) => (opposite ? 'row' : 'row-reverse')};
4747
}
4848
4949
@media (min-width: 1141px) {

‎src/components/Footer.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,26 @@ const StyledFooter = styled.footer`
1616
flex-wrap: wrap;
1717
1818
@media(max-width: 650px) {
19-
justify-content: space-between;
19+
justify-content: center;
2020
2121
ul {
2222
padding-bottom: 4rem;
2323
border-bottom: 1px solid #ddd;
2424
width: 48%;
2525
text-align: center;
2626
27+
@media(max-width: 650px) {
28+
width: 46%;
29+
margin-left: 2%;
30+
margin-right: 2%;
31+
}
32+
33+
@media(max-width: 400px) {
34+
width: 48%;
35+
margin-left: 1%;
36+
margin-right: 1%;
37+
}
38+
2739
&:not(:last-child) {
2840
margin-bottom: 5rem;
2941
}
@@ -34,13 +46,16 @@ const StyledFooter = styled.footer`
3446
img {
3547
transform: translateX(1rem);
3648
}
49+
50+
@media(max-width: 650px) {
51+
transform: none;
52+
}
3753
}
3854
}
3955
}
4056
}
4157
4258
li {
43-
4459
&:not(:last-child) {
4560
margin-bottom: 1.6rem;
4661
}
@@ -79,6 +94,8 @@ const StyledFooter = styled.footer`
7994
}
8095
8196
.contact {
97+
max-width: 11rem;
98+
8299
li:not(:first-child) {
83100
display: inline-block;
84101
margin-left: 2rem;
@@ -173,7 +190,6 @@ const Footer: React.SFC<{}> = () => (
173190
</svg>
174191
</a>
175192
</li>
176-
<br aria-hidden={true} />
177193
<li>
178194
<a href="https://twitter.com/gitpod" target="_blank" rel="noopener" title="Twitter">
179195
<svg

‎src/components/MoreInfo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,14 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
9191
return (
9292
<div
9393
className="pattern-bg"
94-
style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
94+
style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', ...(backgroundShouldBeWhite && {background: 'none'}) }}
9595
>
9696
<div className="row">
9797
<StyledPricingLinks>
9898
{Img}
9999
<div>
100100
<h2>{Title}</h2>
101-
<p>{Text}</p>
101+
{Text}
102102
<span className="btn-wrapper">{Links}</span>
103103
</div>
104104
</StyledPricingLinks>

‎src/components/Nav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ const Nav = () => {
242242
<div className="nav__burger-container">
243243
<Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
244244
<div className="btns">
245-
<a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
245+
<a href="https://gitpod.io/login/" rel="noopener" style={{...(isNavRendered && { display: 'none'})}}>Log In</a>
246246
<div className="nav__btn-container" aria-live="assertive">
247247
<button
248248
className="nav__btn"

‎src/components/PopOver.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const StyledDescripion = styled.span`
7777
}
7878
`
7979

80-
class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string }, {}> {
80+
class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string; questionMarkShouldNotBeAButton?: boolean }, {}> {
8181
state = {
8282
isRendered: false
8383
}
@@ -96,7 +96,7 @@ class Description extends React.Component<{ description: string | JSX.Element; t
9696

9797
render() {
9898
const { isRendered } = this.state
99-
const { description } = this.props
99+
const { description, questionMarkShouldNotBeAButton } = this.props
100100
const positionBottom = this.props.textPosition === 'bottom'
101101

102102
return (
@@ -107,7 +107,9 @@ class Description extends React.Component<{ description: string | JSX.Element; t
107107
onFocus={this.handleMouseEnter}
108108
onBlur={this.handleMouseLeave}
109109
>
110-
<button onClick={this.handleClick}>?</button>
110+
{
111+
questionMarkShouldNotBeAButton ? <span onClick={this.handleClick} tabIndex={1}>?</span> : <button onClick={this.handleClick}>?</button>
112+
}
111113
{isRendered ? <div className={`${positionBottom ? 'bottom' : ''} description__text`}>{description}</div> : null}
112114
</StyledDescripion>
113115
)

‎src/components/TrustedBy.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const StyledTrustedBy = styled.section`
7878
}
7979
`
8080

81-
const StyledBrandImage = styled.img<{ transform?: string }>`
81+
const StyledBrandImage = styled.img<{ transformValue?: string }>`
8282
width: 9.5rem;
8383
8484
@media(max-width: ${sizes.breakpoints.lg}) {
@@ -90,7 +90,7 @@ const StyledBrandImage = styled.img<{ transform?: string }>`
9090
}
9191
9292
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
93-
transform: ${({ transform }) => (transform ? transform : 'none')};
93+
transform: ${({ transformValue }) => (transformValue ? transformValue : 'none')};
9494
}
9595
`
9696

@@ -117,7 +117,7 @@ const TrustedBy = ({ brands, title, styles }: TrustedByProps) => (
117117
<div className="logos">
118118
{brands.map((b: Brand) => (
119119
<a href={b.url} target="_blank" className="trustedBy">
120-
<StyledBrandImage src={b.svg} alt={b.alt} transform={b.transform} className={b.className} />
120+
<StyledBrandImage src={b.svg} alt={b.alt} transformValue={b.transform} className={b.className} />
121121
</a>
122122
))}
123123
</div>

‎src/components/features/Intro.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Intro = () => (
6363
<div className="row">
6464
<Styled>
6565
<section className="intro pattern">
66-
<object role="presentation" tabIndex={-1} data={IceStick} className="ice-stick" />
66+
<object tabIndex={-1} data={IceStick} className="ice-stick" />
6767
<h1>Features</h1>
6868
<div className="features">
6969
{features.map((f, i) => (

‎src/components/index/GetStarted.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const GetStarted = () => (
7474
{projects.map((project, i) => (
7575
<Project
7676
key={i}
77-
image={<object role="presentation" tabIndex={-1} data={project.image} />}
77+
image={<object tabIndex={-1} data={project.image} />}
7878
title={project.title}
7979
githubUrl={project.githubUrl}
8080
gitlabUrl={project.gitlabUrl}

‎src/components/index/PrefixInput.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -272,41 +272,41 @@ const PrefixInput = () => {
272272

273273
return (
274274
<Styled>
275-
<div className="header" aria-hidden="true">
276-
<div className="dots">
275+
<span className="header" aria-hidden="true">
276+
<span className="dots">
277277
<span>&nbsp;</span>
278278
<span>&nbsp;</span>
279279
<span>&nbsp;</span>
280-
</div>
281-
<div className="tab">
282-
<div className="bar">
280+
</span>
281+
<span className="tab">
282+
<span className="bar">
283283
&nbsp;
284-
</div>
284+
</span>
285285
<img src={Close} />
286-
</div>
287-
<div className="new-tab">
286+
</span>
287+
<span className="new-tab">
288288
<img src={Plus} />
289-
</div>
290-
</div>
291-
<div className="main">
292-
<div className="bar-container" aria-hidden="true">
293-
<div className="bar">&nbsp;</div>
294-
<div className="bar">&nbsp;</div>
295-
<div className="bar">&nbsp;</div>
296-
</div>
297-
<div className="input-container">
298-
<div className="label">
289+
</span>
290+
</span>
291+
<span className="main">
292+
<span className="bar-container" aria-hidden="true">
293+
<span className="bar">&nbsp;</span>
294+
<span className="bar">&nbsp;</span>
295+
<span className="bar">&nbsp;</span>
296+
</span>
297+
<span className="input-container">
298+
<span className="label">
299299
<img src={World} aria-hidden="true" />
300300
<span>https://gitpod.io/#</span>
301-
</div>
301+
</span>
302302
<span className="wrapper">
303303
<input
304304
defaultValue={url}
305305
onKeyPress={handleReturn}
306306
onChange={handleChange}
307307
type="text"
308308
/>
309-
<div className="message" style={ error ? {color: '#bf4338'} : {}}>
309+
<span className="message" style={ error ? {color: '#bf4338'} : {}}>
310310
<>
311311
<p>
312312
{ error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' }
@@ -320,13 +320,13 @@ const PrefixInput = () => {
320320
Start Workspace
321321
</a>
322322
</>
323-
</div>
323+
</span>
324324
</span>
325-
</div>
326-
</div>
327-
<div className="info">
325+
</span>
326+
</span>
327+
<span className="info">
328328
&nbsp;
329-
</div>
329+
</span>
330330
</Styled>
331331
)
332332
}

0 commit comments

Comments
 (0)