From b96ebcf040f9cde2613ab5a7531d5ad028dbeec7 Mon Sep 17 00:00:00 2001 From: Nisar Hassan Naqvi Date: Thu, 7 Jan 2021 09:10:21 +0000 Subject: [PATCH] make site valid in accordance to W3C validator.. Fixes gitpod-io/website#842 --- src/components/Banner.tsx | 10 +++-- src/components/FeatureCard.tsx | 2 +- src/components/Footer.tsx | 22 +++++++-- src/components/MoreInfo.tsx | 4 +- src/components/Nav.tsx | 2 +- src/components/PopOver.tsx | 8 ++-- src/components/TrustedBy.tsx | 6 +-- src/components/blog/PostPreview.tsx | 6 ++- src/components/features/Intro.tsx | 2 +- src/components/index/GetStarted.tsx | 2 +- src/components/index/PrefixInput.tsx | 50 ++++++++++----------- src/components/index/TextFeature.tsx | 2 +- src/components/pricing/PricingBoxes.tsx | 12 ++--- src/contents/features.tsx | 15 +++---- src/contents/moreInfoContents.tsx | 2 +- src/pages/careers.tsx | 1 + src/pages/education.tsx | 4 +- src/pages/enterprise.tsx | 4 +- src/pages/github-student-developer-pack.tsx | 8 ++-- src/pages/github-teacher-toolbox.tsx | 8 ++-- src/pages/gitpod-vs-github-codespaces.tsx | 13 ++++-- src/pages/recruiting.tsx | 4 +- src/pages/self-hosted.tsx | 6 +-- src/pages/vendor.tsx | 4 +- src/styles/base.ts | 3 +- 25 files changed, 116 insertions(+), 84 deletions(-) diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index b8dc751c9..b377a365c 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -27,6 +27,10 @@ const StyledBanner = styled.header` text-align: center; } + .sub { + display: block; + } + .para { margin-top: 3rem; @@ -76,10 +80,10 @@ const Banner: React.SFC = ({ subtitle, title, paragraph, linkPath,
-
-

{subtitle}

+

+ {subtitle} {title} -

+ {paragraph ?

{paragraph}

: null} {link(linkPath, linkText, '', true, false)} {children} diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx index ecef5a927..4ffd5c73d 100644 --- 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 index e46d650c1..be4326b82 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -16,7 +16,7 @@ const StyledFooter = styled.footer` flex-wrap: wrap; @media(max-width: 650px) { - justify-content: space-between; + justify-content: center; ul { padding-bottom: 4rem; @@ -24,6 +24,18 @@ const StyledFooter = styled.footer` 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<{}> = () => ( -
  • {Img}

    {Title}

    -

    {Text}

    + {Text} {Links}
    diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 697c17919..66e36277a 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -242,7 +242,7 @@ const Nav = () => {
    Gitpod Logo
    - Log In + Log In
    + { + questionMarkShouldNotBeAButton ? ? : + } {isRendered ?
    {description}
    : null} ) diff --git a/src/components/TrustedBy.tsx b/src/components/TrustedBy.tsx index a1f8ad753..d3820c4da 100644 --- 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) => (
    {brands.map((b: Brand) => ( - + ))}
    diff --git a/src/components/blog/PostPreview.tsx b/src/components/blog/PostPreview.tsx index 40d5964a6..d16b030b9 100644 --- a/src/components/blog/PostPreview.tsx +++ b/src/components/blog/PostPreview.tsx @@ -48,6 +48,10 @@ const StyledPostPreview = styled.div` font-weight: 400; flex-wrap: wrap; } + + .author-name { + font-weight: 600; + } ` interface BlogData { @@ -102,7 +106,7 @@ const PostPreview: React.SFC = (props) => { by { authors.map((author, idx) => - {author.name}{idx < authors.length - 1 ? ', ' : ''} + {author.name}{idx < authors.length - 1 ? ', ' : ''} ) } diff --git a/src/components/features/Intro.tsx b/src/components/features/Intro.tsx index a1fe00a95..564500bf2 100644 --- a/src/components/features/Intro.tsx +++ b/src/components/features/Intro.tsx @@ -63,7 +63,7 @@ const Intro = () => (
    - +

    Features

    {features.map((f, i) => ( diff --git a/src/components/index/GetStarted.tsx b/src/components/index/GetStarted.tsx index f1cbb7f97..1cb4c093d 100644 --- a/src/components/index/GetStarted.tsx +++ b/src/components/index/GetStarted.tsx @@ -74,7 +74,7 @@ const GetStarted = () => ( {projects.map((project, i) => ( } + image={} title={project.title} githubUrl={project.githubUrl} gitlabUrl={project.gitlabUrl} diff --git a/src/components/index/PrefixInput.tsx b/src/components/index/PrefixInput.tsx index 877486d2f..56458274e 100644 --- a/src/components/index/PrefixInput.tsx +++ b/src/components/index/PrefixInput.tsx @@ -272,33 +272,33 @@ const PrefixInput = () => { return ( - -
    - -
    -
    + + + + + + https://gitpod.io/# -
    + { onChange={handleChange} type="text" /> -
    + <>

    { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' } @@ -320,13 +320,13 @@ const PrefixInput = () => { Start Workspace -

    +     -
    -
    -
    + + +   -
    +     ) } diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx index 73988e73b..06d117978 100644 --- 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

    {title}

    -

    {text}

    + <>{text} {btnText ? ( {btnText} diff --git a/src/components/pricing/PricingBoxes.tsx b/src/components/pricing/PricingBoxes.tsx index a220cf9bc..8143844e9 100644 --- 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: , + img: , features: ['Unlimited Use', 'Private & Public Repos'], price: ( <> @@ -84,7 +84,7 @@ const selfHostedPlans: PricingBoxProps[] = [ const plans: PricingBoxProps[] = [ { title: 'Free', - img: , + img: , price: ( <> {isEurope() ? '€0' : '$0'} @@ -95,7 +95,7 @@ const plans: PricingBoxProps[] = [ }, { title: 'Personal', - img: , + img: , price: ( <> {isEurope() ? '€8' : '$9'} @@ -145,7 +145,7 @@ const plans: PricingBoxProps[] = [ }, { title: 'Unlimited', - img: , + img: , price: ( <> {isEurope() ? '€35' : '$39'} @@ -278,7 +278,7 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => { ))}
    - + {selfHostedPlans.map((plan, i) => ( { headingLevel="h2" /> ))} - +

    diff --git a/src/contents/features.tsx b/src/contents/features.tsx index 2eb0d911e..9cb33f95e 100644 --- a/src/contents/features.tsx +++ b/src/contents/features.tsx @@ -186,7 +186,7 @@ export const features: FeatureCardProps[] = [ ), icon: ( - + Collaborate with your friends, colleagues, and clients and run software or hunt down bugs together.

    More about Sharing Workspaces. -

    ), icon: ( - + - + @@ -277,12 +276,12 @@ export const features: FeatureCardProps[] = [ ), icon: ( - + - + @@ -314,7 +313,7 @@ export const features: FeatureCardProps[] = [ ), icon: ( - + - + diff --git a/src/contents/moreInfoContents.tsx b/src/contents/moreInfoContents.tsx index 41f4ddadf..c08febeb4 100644 --- a/src/contents/moreInfoContents.tsx +++ b/src/contents/moreInfoContents.tsx @@ -13,7 +13,7 @@ export const MoreInfoContents = { text: ( <>

    Unleash Developer Productivity.

    - Run your own Gitpod and enjoy automated setups, better collaboration, higher code quality, and a more streamlined workflow. +

    Run your own Gitpod and enjoy automated setups, better collaboration, higher code quality, and a more streamlined workflow.

    ), links: ( diff --git a/src/pages/careers.tsx b/src/pages/careers.tsx index 894d31d06..21dc02189 100644 --- a/src/pages/careers.tsx +++ b/src/pages/careers.tsx @@ -169,6 +169,7 @@ const Careers = () => (
    +

    Gitpod Team

    diff --git a/src/pages/education.tsx b/src/pages/education.tsx index 1f166788e..eadd0cdb8 100644 --- a/src/pages/education.tsx +++ b/src/pages/education.tsx @@ -27,11 +27,11 @@ const EducationPage: React.SFC<{}> = () => ( > Let’s Focus on Teaching Code,
    not Tedious Setups!} + title={<>Let’s Focus on Teaching Code,
    not Tedious Setups!} 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={} + img={} />
    diff --git a/src/pages/enterprise.tsx b/src/pages/enterprise.tsx index ab5304455..11047d2f9 100644 --- a/src/pages/enterprise.tsx +++ b/src/pages/enterprise.tsx @@ -26,11 +26,11 @@ const EnterprisePage: React.SFC<{}> = () => ( Unleash Developer Productivity} + title={<>Unleash Developer Productivity} paragraph="Adding Gitpod to your development tools means less waiting, faster onboarding, faster development cycles, higher code quality, and a smooth consistent workflow." linkPath="/enterprise/#enterprise" linkText="Choose your Solution" - img={} + img={} />
    diff --git a/src/pages/github-student-developer-pack.tsx b/src/pages/github-student-developer-pack.tsx index c29e3fe13..1011e596a 100644 --- a/src/pages/github-student-developer-pack.tsx +++ b/src/pages/github-student-developer-pack.tsx @@ -18,7 +18,7 @@ import Offers from '../components/Offers' const offers: PricingBoxProps[] = [ { title: 'Open-Source', - img: , + img: , price: 'Free', duration: '50 hours / month', hideButton: true, @@ -27,7 +27,7 @@ const offers: PricingBoxProps[] = [ }, { title: 'Student', - img: , + img: , price: <>{(isEurope() ? '€8' : '$9')} Free, duration: '100 hours / month', hideButton: true, @@ -46,7 +46,7 @@ const offers: PricingBoxProps[] = [ }, { title: 'Student Unlimited', - img: , + img: , price: <>{(isEurope() ? '€35' : '$39')} {(isEurope() ? '€8' : '$9')}, duration: 'Unlimited hours / month', hideButton: true, @@ -59,7 +59,7 @@ const GithubStudentPackPage: React.SFC<{}> = () => ( Make Your Life Easier with Gitpod} + title={<>Make Your Life Easier with Gitpod} paragraph={With Gitpod you have no more tedious setups, you save hours of compiling code, and you can start coding from any device, immediately.} linkPath="https://gitpod.io/subscription/" linkText="Claim Offer" diff --git a/src/pages/github-teacher-toolbox.tsx b/src/pages/github-teacher-toolbox.tsx index c0d0d6458..cd61376d2 100644 --- a/src/pages/github-teacher-toolbox.tsx +++ b/src/pages/github-teacher-toolbox.tsx @@ -20,7 +20,7 @@ import Offers from '../components/Offers' const offers: PricingBoxProps[] = [ { title: 'Open-Source', - img: , + img: , price: 'Free', duration: '50 hours / month', hideButton: true, @@ -29,7 +29,7 @@ const offers: PricingBoxProps[] = [ }, { title: 'Teacher', - img: , + img: , price: <>{(isEurope() ? '€8' : '$9')} Free, duration: '100 hours / month', hideButton: true, @@ -48,7 +48,7 @@ const offers: PricingBoxProps[] = [ }, { title: 'Gitpod Education', - img: , + img: , price: <>From {(isEurope() ? '€0.8' : '$0.9')}, duration: 'Per user/month', feature: Learn More, @@ -62,7 +62,7 @@ const GithubTeacherToolBoxPage: React.SFC<{}> = () => ( Let’s Focus on Teaching Code, not Tedious Setups!} + title={<>Let’s Focus on Teaching Code, not Tedious Setups!} paragraph={With Gitpod you can create coding exams and exercises easily, help out your students via live tutoring, and benefit from a simple onboarding with any device. Learn more} linkPath="https://gitpod.io/subscription/" linkText="Claim Offer" diff --git a/src/pages/gitpod-vs-github-codespaces.tsx b/src/pages/gitpod-vs-github-codespaces.tsx index 9962f79d3..d02379963 100644 --- a/src/pages/gitpod-vs-github-codespaces.tsx +++ b/src/pages/gitpod-vs-github-codespaces.tsx @@ -67,6 +67,11 @@ const StyledGitpodVsGitHubCodespacesPage = styled.div` .glance { text-align: center; } + + .th__title { + font-size: 3rem; + color: ${colors.textDark}; + } ` const GitpodVsGitHubCodespacesPage = () => ( @@ -92,7 +97,7 @@ const GitpodVsGitHubCodespacesPage = () => ( -
    +
    Gitpod vs GitHub Codespaces at a Glance} @@ -106,10 +111,10 @@ const GitpodVsGitHubCodespacesPage = () => (   -

    Gitpod

    + Gitpod -

    GitHub Codespaces

    + GitHub Codespaces @@ -287,7 +292,7 @@ const GitpodVsGitHubCodespacesPage = () => (
    -
    + diff --git a/src/pages/recruiting.tsx b/src/pages/recruiting.tsx index aa4a56cef..dd83cbc1f 100644 --- a/src/pages/recruiting.tsx +++ b/src/pages/recruiting.tsx @@ -23,10 +23,10 @@ const RecrutingPage: React.SFC<{}> = () => ( Make Sure You’re Discovering Your
    Best Applicants    } + title={<>Make Sure You’re Discovering Your
    Best Applicants    } linkPath="/recruiting/#recruiting" linkText="Choose your Solution" - img={} + img={} />
    diff --git a/src/pages/self-hosted.tsx b/src/pages/self-hosted.tsx index 9c0a4668c..06211b0c1 100644 --- a/src/pages/self-hosted.tsx +++ b/src/pages/self-hosted.tsx @@ -46,14 +46,14 @@ const SelfHostedPage: React.SFC<{}> = () => ( + <> Self-Host Gitpod
    on Your Own Infrastructure. - + } linkPath="/self-hosted/#install" linkText="Install Now" paragraph="Free for unlimited Users." - img={} + img={} /> {/* ----- Section Features ----- */} diff --git a/src/pages/vendor.tsx b/src/pages/vendor.tsx index fa7f8ef0b..938f67d85 100644 --- a/src/pages/vendor.tsx +++ b/src/pages/vendor.tsx @@ -23,10 +23,10 @@ const VendorPage: React.SFC<{}> = () => ( Use Gitpod as a Showroom for
    Your Developer Products} + title={<>Use Gitpod as a Showroom for
    Your Developer Products} linkPath="/vendor/#vendor" linkText="Choose your Solution" - img={} + img={} />
    diff --git a/src/styles/base.ts b/src/styles/base.ts index 0f560e6e3..1418fed73 100644 --- a/src/styles/base.ts +++ b/src/styles/base.ts @@ -40,7 +40,8 @@ export default ` overflow-x: hidden; } - section { + section, + .section { padding: 12rem 0; @media(max-width: ${sizes.breakpoints.md}) {