make site valid in accordance to W3C validator..

Fixes gitpod-io/website#842
gitpod-io · Jan 5, 2021 · 9d3a5ab · 9d3a5ab
1 parent 49c7da9
commit 9d3a5ab
Show file tree

Hide file tree

Showing 20 changed files with 84 additions and 67 deletions.
diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx
@@ -43,7 +43,7 @@ const Styled = styled.div<{
 
   &:nth-of-type(2n) {
     @media (min-width: 1141px) {
-      flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')};
+      flex-direction: ${({ opposite }) => (opposite ? 'row' : 'row-reverse')};
     }
 
     @media (min-width: 1141px) {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -16,14 +16,26 @@ const StyledFooter = styled.footer`
         flex-wrap: wrap;
 
         @media(max-width: 650px) {
-            justify-content: space-between;
+            justify-content: center;
 
             ul {
                 padding-bottom: 4rem;
                 border-bottom: 1px solid #ddd;
                 width: 48%;
                 text-align: center;
 
+                @media(max-width: 650px) {
+                    width: 46%;
+                    margin-left: 2%;
+                    margin-right: 2%;
+                }
+
+                @media(max-width: 400px) {
+                    width: 48%;
+                    margin-left: 1%;
+                    margin-right: 1%;
+                }
+
                 &:not(:last-child) {
                     margin-bottom: 5rem;
                 }
@@ -34,13 +46,16 @@ const StyledFooter = styled.footer`
                     img {
                         transform: translateX(1rem);
                     }
+
+                    @media(max-width: 650px) {
+                        transform: none;
+                    }
                 }
             }
         }
     }
 
     li {
-
         &:not(:last-child) {
             margin-bottom: 1.6rem;
         }
@@ -79,6 +94,8 @@ const StyledFooter = styled.footer`
     }
 
     .contact {
+        max-width: 11rem;
+
         li:not(:first-child) {
             display: inline-block;
             margin-left: 2rem;
@@ -173,7 +190,6 @@ const Footer: React.SFC<{}> = () => (
                             </svg>
                         </a>
                     </li>
-                    <br aria-hidden={true} />
                     <li>
                         <a href="https://twitter.com/gitpod" target="_blank" rel="noopener" title="Twitter">
                             <svg

diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx
@@ -91,14 +91,14 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
   return (
     <div
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', ...(backgroundShouldBeWhite && {background: 'none'}) }}
     >
       <div className="row">
         <StyledPricingLinks>
           {Img}
           <div>
             <h2>{Title}</h2>
-            <p>{Text}</p>
+            {Text}
             <span className="btn-wrapper">{Links}</span>
           </div>
         </StyledPricingLinks>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -242,7 +242,7 @@ const Nav = () => {
                     <div className="nav__burger-container">
                         <Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
                         <div className="btns">
-                            <a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
+                            <a href="https://gitpod.io/login/" rel="noopener" style={{...(isNavRendered && { display: 'none'})}}>Log In</a>
                             <div className="nav__btn-container" aria-live="assertive">
                                 <button
                                     className="nav__btn"

diff --git a/src/components/PopOver.tsx b/src/components/PopOver.tsx
@@ -77,7 +77,7 @@ const StyledDescripion = styled.span`
     }
 `
 
-class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string }, {}> {
+class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string; questionMarkShouldNotBeAButton?: boolean }, {}> {
   state = {
     isRendered: false
   }
@@ -96,7 +96,7 @@ class Description extends React.Component<{ description: string | JSX.Element; t
 
   render() {
     const { isRendered } = this.state
-    const { description } = this.props
+    const { description, questionMarkShouldNotBeAButton } = this.props
     const positionBottom = this.props.textPosition === 'bottom'
 
     return (
@@ -107,7 +107,9 @@ class Description extends React.Component<{ description: string | JSX.Element; t
         onFocus={this.handleMouseEnter}
         onBlur={this.handleMouseLeave}
       >
-        <button onClick={this.handleClick}>?</button>
+        {
+            questionMarkShouldNotBeAButton ? <span onClick={this.handleClick} tabIndex={1}>?</span> : <button onClick={this.handleClick}>?</button>
+        } 
         {isRendered ? <div className={`${positionBottom ? 'bottom' : ''} description__text`}>{description}</div> : null}
       </StyledDescripion>
     )

diff --git a/src/components/TrustedBy.tsx b/src/components/TrustedBy.tsx
@@ -78,7 +78,7 @@ const StyledTrustedBy = styled.section`
   }
 `
 
-const StyledBrandImage = styled.img<{ transform?: string }>`
+const StyledBrandImage = styled.img<{ transformValue?: string }>`
     width: 9.5rem;
 
     @media(max-width: ${sizes.breakpoints.lg}) {
@@ -90,7 +90,7 @@ const StyledBrandImage = styled.img<{ transform?: string }>`
     }
 
     @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
-        transform: ${({ transform }) => (transform ? transform : 'none')};
+        transform: ${({ transformValue }) => (transformValue ? transformValue : 'none')};
     }
 `
 
@@ -117,7 +117,7 @@ const TrustedBy = ({ brands, title, styles }: TrustedByProps) => (
       <div className="logos">
         {brands.map((b: Brand) => (
           <a href={b.url} target="_blank" className="trustedBy">
-            <StyledBrandImage src={b.svg} alt={b.alt} transform={b.transform} className={b.className} />
+            <StyledBrandImage src={b.svg} alt={b.alt} transformValue={b.transform} className={b.className} />
           </a>
         ))}
       </div>

diff --git a/src/components/features/Intro.tsx b/src/components/features/Intro.tsx
@@ -63,7 +63,7 @@ const Intro = () => (
   <div className="row">
     <Styled>
       <section className="intro pattern">
-        <object role="presentation" tabIndex={-1} data={IceStick} className="ice-stick" />
+        <object tabIndex={-1} data={IceStick} className="ice-stick" />
         <h1>Features</h1>
         <div className="features">
           {features.map((f, i) => (

diff --git a/src/components/index/GetStarted.tsx b/src/components/index/GetStarted.tsx
@@ -74,7 +74,7 @@ const GetStarted = () => (
         {projects.map((project, i) => (
           <Project
             key={i}
-            image={<object role="presentation" tabIndex={-1} data={project.image} />}
+            image={<object tabIndex={-1} data={project.image} />}
             title={project.title}
             githubUrl={project.githubUrl}
             gitlabUrl={project.gitlabUrl}

diff --git a/src/components/index/PrefixInput.tsx b/src/components/index/PrefixInput.tsx
@@ -272,41 +272,41 @@ const PrefixInput = () => {
 
     return (
         <Styled>
-            <div className="header" aria-hidden="true">
-                <div className="dots">
+            <span className="header" aria-hidden="true">
+                <span className="dots">
                     <span>&nbsp;</span>
                     <span>&nbsp;</span>
                     <span>&nbsp;</span>
-                </div>
-                <div className="tab">
-                    <div className="bar">
+                </span>
+                <span className="tab">
+                    <span className="bar">
                         &nbsp;
-                </div>
+                </span>
                     <img src={Close} />
-                </div>
-                <div className="new-tab">
+                </span>
+                <span className="new-tab">
                     <img src={Plus} />
-                </div>
-            </div>
-            <div className="main">
-                <div className="bar-container" aria-hidden="true">
-                    <div className="bar">&nbsp;</div>
-                    <div className="bar">&nbsp;</div>
-                    <div className="bar">&nbsp;</div>
-                </div>
-                <div className="input-container">
-                    <div className="label">
+                </span>
+            </span>
+            <span className="main">
+                <span className="bar-container" aria-hidden="true">
+                    <span className="bar">&nbsp;</span>
+                    <span className="bar">&nbsp;</span>
+                    <span className="bar">&nbsp;</span>
+                </span>
+                <span className="input-container">
+                    <span className="label">
                         <img src={World} aria-hidden="true" />
                         <span>https://gitpod.io/#</span>
-                    </div>
+                    </span>
                     <span className="wrapper">
                         <input
                             defaultValue={url}
                             onKeyPress={handleReturn}
                             onChange={handleChange}
                             type="text"
                         />
-                        <div className="message" style={ error ? {color: '#bf4338'} : {}}>
+                        <span className="message" style={ error ? {color: '#bf4338'} : {}}>
                             <>
                                 <p>
                                     { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' }
@@ -320,13 +320,13 @@ const PrefixInput = () => {
                                     Start Workspace
                                 </a>
                             </>
-                        </div>
+                        </span>
                     </span>
-                </div>
-            </div>
-            <div className="info">
+                </span>
+            </span>
+            <span className="info">
                 &nbsp;
-            </div>
+            </span>
         </Styled>
     )
 }

diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx
@@ -52,7 +52,7 @@ const TextFeature = ({ path, alt, title, text, btnText, href }: TextFeatureProps
     <h3>
       <strong>{title}</strong>
     </h3>
-    <p>{text}</p>
+    <>{text}</>
     {btnText ? (
       <a href={href} target="_blank" className="btn">
         {btnText}

diff --git a/src/components/pricing/PricingBoxes.tsx b/src/components/pricing/PricingBoxes.tsx
@@ -52,7 +52,7 @@ const selfHostedPlans: PricingBoxProps[] = [
   {
     title: 'Free',
     duration: 'Unlimited users',
-    img: <object role="presentation" tabIndex={-1} data={Cloud} />,
+    img: <object tabIndex={-1} data={Cloud} />,
     features: ['Unlimited Use', 'Private & Public Repos'],
     price: (
       <>
@@ -84,7 +84,7 @@ const selfHostedPlans: PricingBoxProps[] = [
 const plans: PricingBoxProps[] = [
   {
     title: 'Free',
-    img: <object role="presentation" tabIndex={-1} data={IconOpenSource} />,
+    img: <object tabIndex={-1} data={IconOpenSource} />,
     price: (
       <>
         {isEurope() ? '€0' : '$0'}
@@ -95,7 +95,7 @@ const plans: PricingBoxProps[] = [
   },
   {
     title: 'Personal',
-    img: <object role="presentation" tabIndex={-1} data={LightBulb} />,
+    img: <object tabIndex={-1} data={LightBulb} />,
     price: (
       <>
         {isEurope() ? '€8' : '$9'}
@@ -145,7 +145,7 @@ const plans: PricingBoxProps[] = [
   },
   {
     title: 'Unlimited',
-    img: <object role="presentation" tabIndex={-1} data={MagicCap} />,
+    img: <object tabIndex={-1} data={MagicCap} />,
     price: (
       <>
         {isEurope() ? '€35' : '$39'}
@@ -278,7 +278,7 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => {
               ))}
             </div>
             <div className={`pricing__boxes ${isRendered ? 'show' : 'hide'}`}>
-              <object role="presentation" tabIndex={-1} data={Cloud} className="cloud-img cloud-img--1" />
+              <object tabIndex={-1} data={Cloud} className="cloud-img cloud-img--1" />
               {selfHostedPlans.map((plan, i) => (
                 <PricingBox 
                     key={i} 
@@ -287,7 +287,7 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => {
                     headingLevel="h2"
                 />
               ))}
-              <object role="presentation" tabIndex={-1} data={Cloud} className="cloud-img cloud-img--2" />
+              <object tabIndex={-1} data={Cloud} className="cloud-img cloud-img--2" />
             </div>
           </div>
           <p>

diff --git a/src/contents/features.tsx b/src/contents/features.tsx
@@ -186,7 +186,7 @@ export const features: FeatureCardProps[] = [
       </>
     ),
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" width="128.354" height="29.009" transform="scale(.9)">
+      <svg xmlns="http://www.w3.org/2000/svg" width="128.354" height="29.009" style={{transform: 'scale(.9)'}}>
         <g data-name="Gruppe 1199">
           <path
             d="M94.739 0a1.152 1.152 0 00-.857.359.983.983 0 00-.256.84l4.727 26.641a1.485 1.485 0 001.48 1.173h22.668a1.093 1.093 0 001.113-.868l4.725-26.941a.983.983 0 00-.256-.84 1.152 1.152 0 00-.857-.359zm19.9 19.251h-7.237l-1.959-9.5h10.947z"
@@ -233,17 +233,16 @@ export const features: FeatureCardProps[] = [
         <p>Collaborate with your friends, colleagues, and clients and run software or hunt down bugs together.</p>
         <p>
           More about <Link to="/docs/sharing-and-collaboration/">Sharing Workspaces.</Link>
-          <div className=""></div>
         </p>
       </>
     ),
     icon: (
       <svg xmlns="http://www.w3.org/2000/svg" width="50" height="49" fill="#BCBCBC" viewBox="0 0 50 49">
-        <g clip-path="url(#clip0)">
+        <g clip-path="url(#clip1)">
           <path d="M40.953 31.664a8.43 8.43 0 00-6.126 2.636l-18.01-8.817c.138-.828.14-1.672.005-2.5l17.983-8.721a8.452 8.452 0 10-2.314-5.8c.003.413.037.826.1 1.234l-17.983 8.72a8.46 8.46 0 10-.021 11.627l18.01 8.817a8.456 8.456 0 108.357-7.2l-.001.004z"></path>
         </g>
         <defs>
-          <clipPath id="clip0">
+          <clipPath id="clip1">
             <path fill="#fff" d="M0 0H49.414V48.587H0z"></path>
           </clipPath>
         </defs>
@@ -277,12 +276,12 @@ export const features: FeatureCardProps[] = [
     ),
     icon: (
       <svg xmlns="http://www.w3.org/2000/svg" width="54" height="42" viewBox="0 0 54 42" fill="#BCBCBC">
-        <g clip-path="url(#clip0)">
+        <g clip-path="url(#clip2)">
           <path d="M49.15 6.555h-8.676l-5.193-5.244s-.026-.026-.039-.026l-.026-.026A4.201 4.201 0 0032.223 0h-10.8a4.251 4.251 0 00-3.162 1.4v.013l-5.077 5.141H4.319A4.268 4.268 0 000 10.822V36.8a4.323 4.323 0 004.319 4.331H49.15a4.33 4.33 0 004.319-4.331V10.822a4.275 4.275 0 00-4.319-4.267zM26.734 34.639a11.9 11.9 0 1111.876-11.9 11.912 11.912 0 01-11.876 11.9zM48.34 13.431a1.812 1.812 0 11-.024-3.624 1.812 1.812 0 01.024 3.624z"></path>
           <path d="M26.734 13.74a9 9 0 108.971 9 8.976 8.976 0 00-8.971-9z"></path>
         </g>
         <defs>
-          <clipPath id="clip0">
+          <clipPath id="clip2">
             <path fill="#fff" d="M0 0H53.469V41.13H0z"></path>
           </clipPath>
         </defs>
@@ -314,7 +313,7 @@ export const features: FeatureCardProps[] = [
     ),
     icon: (
       <svg xmlns="http://www.w3.org/2000/svg" width="57" height="49" viewBox="0 0 57 49" fill="#BCBCBC">
-        <g clip-path="url(#clip0)">
+        <g clip-path="url(#clip3)">
           <path d="M53.735 0H2.542C1.257 0 .215 1.356.215 3.028L0 33.847c0 1.673 1.042 3.028 2.327 3.028h31.431L45.768 48.4l-3.089-11.524H53.52c1.285 0 2.327-1.356 2.327-3.028l.215-30.819C56.062 1.356 55.02 0 53.735 0z"></path>
           <path
             className="white"
@@ -324,7 +323,7 @@ export const features: FeatureCardProps[] = [
           ></path>
         </g>
         <defs>
-          <clipPath id="clip0">
+          <clipPath id="clip3">
             <path d="M0 0H56.062V48.399H0z"></path>
           </clipPath>
         </defs>

diff --git a/src/contents/moreInfoContents.tsx b/src/contents/moreInfoContents.tsx
@@ -13,7 +13,7 @@ export const MoreInfoContents = {
     text: (
       <>
         <h3>Unleash Developer Productivity.</h3>
-        Run your own Gitpod and enjoy automated setups, better collaboration, higher code quality, and a more streamlined workflow.
+        <p>Run your own Gitpod and enjoy automated setups, better collaboration, higher code quality, and a more streamlined workflow.</p>
       </>
     ),
     links: (

diff --git a/src/pages/education.tsx b/src/pages/education.tsx
@@ -31,7 +31,7 @@ const EducationPage: React.SFC<{}> = () => (
                 paragraph="Gitpod simplifies the onboarding process, makes coding accessible from any device, and provides a productive learning environment."
                 linkPath="/education/#education"
                 linkText="Choose your Solution"
-                img={<object role="presentation" tabIndex={-1} style={{transform:"scale(0.8)"}} data={Saturn}/>}
+                img={<object tabIndex={-1} style={{transform:"scale(0.8)"}} data={Saturn}/>}
             />
 
         <div className="grey-container">