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

Commit 9f47a41

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

20 files changed

+98
-77
lines changed

‎gitpod

Submodule gitpod updated 1569 files

‎src/components/FeatureCard.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import { sizes } from '../styles/variables'
55
import Pattern from '../resources/pattern-2.jpg'
66
import IconTick from '../resources/icon-tick-2.svg'
77

8-
const Styled = styled.div<{
9-
direction?: string
10-
flexDirectionColumnForImgContainer?: boolean
11-
opposite?: boolean
12-
hasFigFootnote?: boolean
13-
}>`
8+
const Styled = styled.div<any>`
149
display: flex;
1510
justify-content: space-between;
1611
position: relative;
@@ -43,7 +38,7 @@ const Styled = styled.div<{
4338
4439
&:nth-of-type(2n) {
4540
@media (min-width: 1141px) {
46-
flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')};
41+
flex-direction: ${({ opposite }) => (opposite ? 'row' : 'row-reverse')};
4742
}
4843
4944
@media (min-width: 1141px) {
@@ -130,15 +125,15 @@ const Styled = styled.div<{
130125
}
131126
132127
@media (min-width: 1141px) {
133-
padding-right: ${({ direction }) => (direction === 'right' ? '8rem' : '')};
134-
padding-left: ${({ direction }) => (!(direction === 'right') ? '8rem' : '')};
128+
padding-right: ${(props) => (props["data-direction"] === 'right' ? '8rem' : '')};
129+
padding-left: ${(props) => (!(props["data-direction"] === 'right') ? '8rem' : '')};
135130
min-height: 520px;
136131
max-height: 500px;
137132
flex: 0 0 52%;
138133
139134
&::before {
140-
left: ${({ direction }) => (direction === 'right' ? '' : 0)};
141-
right: ${({ direction }) => (!(direction === 'right') ? '' : 0)};
135+
left: ${(props) => (props["data-direction"] === 'right' ? '' : 0)};
136+
right: ${(props) => (!(props["data-direction"] === 'right') ? '' : 0)};
142137
width: 60vw;
143138
}
144139
}
@@ -181,7 +176,7 @@ const Styled = styled.div<{
181176
182177
.in-view::before {
183178
@media (min-width: 1141px) {
184-
animation: ${({ direction }) => (direction === 'right' ? 'slideInLeft' : 'slideInRight')} 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
179+
animation: ${(props) => (props["data-direction"] === 'right' ? 'slideInLeft' : 'slideInRight')} 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
185180
forwards;
186181
}
187182
}
@@ -303,7 +298,7 @@ const FeatureCard = ({
303298
return (
304299
<Styled
305300
className="row"
306-
direction={direction}
301+
data-direction={direction}
307302
flexDirectionColumnForImgContainer={featuresList && featuresList.length ? true : false}
308303
opposite={opposite}
309304
hasFigFootnote={hasFigFootnote}

‎src/components/Footer.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,26 @@ const StyledFooter = styled.footer`
2424
}
2525
2626
@media(max-width: 650px) {
27-
justify-content: space-between;
27+
justify-content: center;
2828
2929
ul {
3030
padding-bottom: 4rem;
3131
border-bottom: 1px solid #ddd;
3232
width: 48%;
3333
text-align: center;
3434
35+
@media(max-width: 650px) {
36+
width: 46%;
37+
margin-left: 2%;
38+
margin-right: 2%;
39+
}
40+
41+
@media(max-width: 400px) {
42+
width: 48%;
43+
margin-left: 1%;
44+
margin-right: 1%;
45+
}
46+
3547
&:not(:last-child) {
3648
margin-bottom: 5rem;
3749
}
@@ -42,13 +54,16 @@ const StyledFooter = styled.footer`
4254
img {
4355
transform: translateX(1rem);
4456
}
57+
58+
@media(max-width: 650px) {
59+
transform: none;
60+
}
4561
}
4662
}
4763
}
4864
}
4965
5066
li {
51-
5267
&:not(:last-child) {
5368
margin-bottom: 1.6rem;
5469
}
@@ -87,6 +102,8 @@ const StyledFooter = styled.footer`
87102
}
88103
89104
.contact {
105+
max-width: 11rem;
106+
90107
li:not(:first-child) {
91108
display: inline-block;
92109
margin-left: 2rem;
@@ -181,7 +198,6 @@ const Footer: React.SFC<{}> = () => (
181198
</svg>
182199
</a>
183200
</li>
184-
<br aria-hidden={true} />
185201
<li>
186202
<a href="https://twitter.com/gitpod" target="_blank" rel="noopener" title="Twitter">
187203
<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/blog/PostPreview.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ const StyledPostPreview = styled.div`
4545
font-weight: 400;
4646
flex-wrap: wrap;
4747
}
48+
49+
.author-name {
50+
font-weight: 600;
51+
}
4852
`
4953

5054
interface BlogData {
@@ -120,7 +124,7 @@ const PostPreview: React.SFC<PostPreviewProps> = (props) => {
120124
<span>
121125
by {
122126
authors.map((author, idx) => <React.Fragment>
123-
<a href={`https://github.com/${author.socialProfiles.github}`} target="_blank">{author.name}</a>{idx < authors.length - 1 ? ', ' : ''}
127+
<span className="author-name">{author.name}</span>{idx < authors.length - 1 ? ', ' : ''}
124128
</React.Fragment>)
125129
}
126130
</span>

‎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
}

‎src/components/index/TextFeature.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const TextFeature = ({ img, title, text, btnText, href }: TextFeatureProps) => (
5353
<h3>
5454
<strong>{title}</strong>
5555
</h3>
56-
<p>{text}</p>
56+
<>{text}</>
5757
{btnText ? (
5858
<a href={href} target="_blank" className="btn">
5959
{btnText}

0 commit comments

Comments
 (0)