make site valid in accordance to W3C validator..

Fixes gitpod-io/website#842
gitpod-io · Jan 18, 2021 · 835f452 · 835f452
1 parent ba0cacd
commit 835f452
Show file tree

Hide file tree

Showing 19 changed files with 94 additions and 73 deletions.
diff --git a/gitpod b/gitpod
diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx
@@ -5,12 +5,7 @@ import { sizes } from '../styles/variables'
 import Pattern from '../resources/pattern-2.jpg'
 import IconTick from '../resources/icon-tick-2.svg'
 
-const Styled = styled.div<{
-  direction?: string
-  flexDirectionColumnForImgContainer?: boolean
-  opposite?: boolean
-  hasFigFootnote?: boolean
-}>`
+const Styled = styled.div<any>`
   display: flex;
   justify-content: space-between;
   position: relative;
@@ -43,7 +38,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) {
@@ -130,15 +125,15 @@ const Styled = styled.div<{
     }
 
     @media (min-width: 1141px) {
-      padding-right: ${({ direction }) => (direction === 'right' ? '8rem' : '')};
-      padding-left: ${({ direction }) => (!(direction === 'right') ? '8rem' : '')};
+      padding-right: ${(props) => (props["data-direction"] === 'right' ? '8rem' : '')};
+      padding-left: ${(props) => (!(props["data-direction"] === 'right') ? '8rem' : '')};
       min-height: 520px;
       max-height: 500px;
       flex: 0 0 52%;
 
       &::before {
-        left: ${({ direction }) => (direction === 'right' ? '' : 0)};
-        right: ${({ direction }) => (!(direction === 'right') ? '' : 0)};
+        left: ${(props) => (props["data-direction"] === 'right' ? '' : 0)};
+        right: ${(props) => (!(props["data-direction"] === 'right') ? '' : 0)};
         width: 60vw;
       }
     }
@@ -181,7 +176,7 @@ const Styled = styled.div<{
 
   .in-view::before {
     @media (min-width: 1141px) {
-      animation: ${({ direction }) => (direction === 'right' ? 'slideInLeft' : 'slideInRight')} 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
+      animation: ${(props) => (props["data-direction"] === 'right' ? 'slideInLeft' : 'slideInRight')} 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
         forwards;
     }
   }
@@ -303,7 +298,7 @@ const FeatureCard = ({
   return (
     <Styled
       className="row"
-      direction={direction}
+      data-direction={direction}
       flexDirectionColumnForImgContainer={featuresList && featuresList.length ? true : false}
       opposite={opposite}
       hasFigFootnote={hasFigFootnote}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -24,14 +24,26 @@ const StyledFooter = styled.footer`
         }
 
         @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;
                 }
@@ -42,13 +54,16 @@ const StyledFooter = styled.footer`
                     img {
                         transform: translateX(1rem);
                     }
+
+                    @media(max-width: 650px) {
+                        transform: none;
+                    }
                 }
             }
         }
     }
 
     li {
-
         &:not(:last-child) {
             margin-bottom: 1.6rem;
         }
@@ -87,6 +102,8 @@ const StyledFooter = styled.footer`
     }
 
     .contact {
+        max-width: 11rem;
+
         li:not(:first-child) {
             display: inline-block;
             margin-left: 2rem;
@@ -181,7 +198,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/blog/PostPreview.tsx b/src/components/blog/PostPreview.tsx
@@ -45,6 +45,10 @@ const StyledPostPreview = styled.div`
         font-weight: 400;
         flex-wrap: wrap;
     }
+
+    .author-name {
+        font-weight: 600;
+    }
 `
 
 interface BlogData {
@@ -120,7 +124,7 @@ const PostPreview: React.SFC<PostPreviewProps> = (props) => {
                     <span>
                         by {
                             authors.map((author, idx) => <React.Fragment>
-                                <a href={`https://github.com/${author.socialProfiles.github}`} target="_blank">{author.name}</a>{idx < authors.length - 1 ? ', ' : ''}
+                                <span className="author-name">{author.name}</span>{idx < authors.length - 1 ? ', ' : ''}
                             </React.Fragment>)
                         }
                     </span>

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
@@ -53,7 +53,7 @@ const TextFeature = ({ img, 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
@@ -273,7 +273,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}
@@ -282,7 +282,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
@@ -174,7 +174,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"
@@ -218,17 +218,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>
@@ -261,12 +260,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>
@@ -297,7 +296,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"
@@ -307,7 +306,7 @@ export const features: FeatureCardProps[] = [
           ></path>
         </g>
         <defs>
-          <clipPath id="clip0">
+          <clipPath id="clip3">
             <path d="M0 0H56.062V48.399H0z"></path>
           </clipPath>
         </defs>