Skip to content

fix responsive layout for logos and open source section #276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alebiavati merged 1 commit into from
Apr 14, 2021
Merged

fix responsive layout for logos and open source section #276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 0 additions & 67 deletions components/company-logo/index.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export * from './media'
export { default as ArticlePreview } from './article-preview'
export { ApplyLink, Button } from './button'
export { default as CompanyLogo } from './company-logo'
export { default as Footer } from './footer'
export { default as Form } from './form'
export { default as HighlightedText } from './highlighted-text'
Expand Down
3 changes: 2 additions & 1 deletion components/logo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import styled from 'styled-components'
import { StaticImage } from 'components'

const Anchor = styled.a`
min-width: 11.25rem;
opacity: 0.5;
transition: opacity 200ms ease-in-out;
display: block;
position: relative;
width: 100%;

:hover {
opacity: 0.75;
Expand Down
55 changes: 2 additions & 53 deletions pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { rem } from 'polished'
import styled from 'styled-components'

import { CompanyLogo, Text, Footer, Page } from 'components'
import { Text, Footer, Page } from 'components'
import {
DiversityAndInclusionSection,
EpBuiltStartupsSection,
Expand All @@ -13,8 +13,6 @@ import { TABLET_SMALL_SIZE, TABLET_LARGE_SIZE } from 'styles/constants'

import { HeroHeading } from '../components/heading'

const { small: SMALL_LOGO } = CompanyLogo.SIZE

const AboutHeroHeading = styled(HeroHeading)`
margin-top: ${rem(140)};
margin-bottom: 3rem;
Expand Down Expand Up @@ -50,56 +48,7 @@ const About = () => (
</section>
<DiversityAndInclusionSection />
<ExecutiveTeamSection />
<EpBuiltStartupsSection>
<CompanyLogo
url="https://www.hootsuite.com/"
alt="Hootsuite logo"
name="hootsuite.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.amazon.com/"
alt="Amazon logo"
name="amazon.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.paypal.com/"
alt="PayPal logo"
name="paypal.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.bench.co/"
alt="Bench logo"
name="bench.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.intel.com/"
alt="Intel logo"
name="intel.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.verisign.com/"
alt="Verisign logo"
name="verisign.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.cisco.com/"
alt="Cisco logo"
name="cisco.png"
size={SMALL_LOGO}
/>
<CompanyLogo
url="https://www.opendns.com/"
alt="OpenDNS logo"
name="opendns.png"
size={SMALL_LOGO}
/>
</EpBuiltStartupsSection>
<EpBuiltStartupsSection />
<OpensourceSection />
<Footer />
</Page>
Expand Down
84 changes: 75 additions & 9 deletions sections/ep-built-startups-section/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react'

import { arrayOf, element } from 'prop-types'
import { rem } from 'polished'
import styled from 'styled-components'

import { RowContainer } from 'components'
import { Logo, RowContainer } from 'components'
import { FlexSectionContent } from 'components/layout'
import { TABLET_SMALL_SIZE } from 'styles/constants'

import { SectionHeadingBold } from '../../components/heading'

Expand All @@ -31,13 +32,29 @@ const StyledText = styled.div`
text-align: center;
font-family: 'Lato';
line-height: 1.625rem;
margin-right: -1rem;
margin-left: -1rem;
`

const LogoContainer = styled(RowContainer)`
const LogosContainer = styled(RowContainer)`
margin-top: 3rem;
`

const EpBuiltStartupsSection = ({ children }) => (
const MIN_LOGO_WIDTH = rem(125)

const LogoContainer = styled.div`
padding: 1rem;
min-width: ${MIN_LOGO_WIDTH};
flex: 0 0 50%;
max-width: 50%;

@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
flex: 0 0 25%;
max-width: 25%;
}
`

const EpBuiltStartupsSection = () => (
<StyledSection>
<StyledFlexSectionContent>
<StyledHeading>Our Software Engineers</StyledHeading>
Expand All @@ -47,13 +64,62 @@ const EpBuiltStartupsSection = ({ children }) => (
entrepreneurial, we apply lean startup and agile best practices to
projects we’re passionate about.
</StyledText>
<LogoContainer>{children}</LogoContainer>
<LogosContainer>
<LogoContainer>
<Logo
url="https://www.hootsuite.com/"
alt="Hootsuite logo"
name="hootsuite.png"
/>
</LogoContainer>
<LogoContainer>
<Logo
url="https://www.amazon.com/"
alt="Amazon logo"
name="amazon.png"
/>
</LogoContainer>
<LogoContainer>
<Logo
url="https://www.paypal.com/"
alt="PayPal logo"
name="paypal.png"
/>
</LogoContainer>
<LogoContainer>
<Logo url="https://www.bench.co/" alt="Bench logo" name="bench.png" />
</LogoContainer>
<LogoContainer>
<Logo
url="https://www.intel.com/"
alt="Intel logo"
name="intel.png"
/>
</LogoContainer>
<LogoContainer>
<Logo
url="https://www.verisign.com/"
alt="Verisign logo"
name="verisign.png"
/>
</LogoContainer>
<LogoContainer>
<Logo
url="https://www.cisco.com/"
alt="Cisco logo"
name="cisco.png"
/>
</LogoContainer>
<LogoContainer>
<Logo
url="https://www.opendns.com/"
alt="OpenDNS logo"
name="opendns.png"
/>
</LogoContainer>
</LogosContainer>
</StyledFlexSectionContent>
</StyledSection>
)

EpBuiltStartupsSection.propTypes = {
children: arrayOf(element),
}

export default EpBuiltStartupsSection
17 changes: 6 additions & 11 deletions sections/opensource-section/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const StyledSection = styled.section`
`

const TextContent = styled.div`
width: 770px;
max-width: 770px;
padding: 40px 70px 70px;
margin: 0 auto;
text-align: center;
Expand All @@ -34,21 +34,16 @@ const TextContent = styled.div`
}

@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
width: 430px;
padding: 0 0 40px;
max-width: 430px;
padding: 0 16px 40px;
}

@media only screen and (max-width: ${MOBILE_SIZE}) {
width: 342px;
padding: 0 0 40px;
max-width: 342px;
padding: 0 16px 40px;
}
`

const StyledHeading = styled(SectionHeadingBold)`
text-align: center;
line-height: 1.5;
`

const StyledText = styled(Text)`
margin: 24px 0;
text-align: center;
Expand Down Expand Up @@ -105,7 +100,7 @@ const OpensourceSection = () => {
<StyledSection>
<FlexSectionContent>
<TextContent>
<StyledHeading>Commit.dev as Opensource</StyledHeading>
<SectionHeadingBold>Commit.dev as Opensource</SectionHeadingBold>
<StyledText>
Our commit.dev website runs as an opensource project within Commit
where engineers are free to work on the website as they wish and
Expand Down
7 changes: 5 additions & 2 deletions sections/sp-section/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,22 @@ const LogosContainer = styled(RowContainer)`
}
`

const MIN_LOGO_WIDTH = rem(198)

const LogoContainer = styled.div`
max-width: 50%;
flex: 0 0 50%;
padding: 0 1rem;

@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
padding: 0;
max-width: 33.33%;
flex: 0 0 33.33%;
}

@media only screen and (min-width: ${TABLET_LARGE_SIZE}) {
max-width: 160px;
min-width: 160px;
max-width: ${MIN_LOGO_WIDTH};
min-width: ${MIN_LOGO_WIDTH};
flex: 1;
}
`
Expand Down