Skip to content

Commit 997f753

Browse files
alebiavatialebiavati
authored
fix responsive layout for logos and open source section (#276)
1 parent 26ac276 commit 997f753

File tree

7 files changed

+90
-144
lines changed

7 files changed

+90
-144
lines changed

‎components/company-logo/index.js‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎components/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
export * from './media'
22
export { default as ArticlePreview } from './article-preview'
33
export { ApplyLink, Button } from './button'
4-
export { default as CompanyLogo } from './company-logo'
54
export { default as Footer } from './footer'
65
export { default as Form } from './form'
76
export { default as HighlightedText } from './highlighted-text'

‎components/logo/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import styled from 'styled-components'
66
import { StaticImage } from 'components'
77

88
const Anchor = styled.a`
9-
min-width: 11.25rem;
109
opacity: 0.5;
1110
transition: opacity 200ms ease-in-out;
1211
display: block;
12+
position: relative;
13+
width: 100%;
1314
1415
:hover {
1516
opacity: 0.75;

‎pages/about.js‎

Lines changed: 2 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { rem } from 'polished'
22
import styled from 'styled-components'
33

4-
import { CompanyLogo, Text, Footer, Page } from 'components'
4+
import { Text, Footer, Page } from 'components'
55
import {
66
DiversityAndInclusionSection,
77
EpBuiltStartupsSection,
@@ -13,8 +13,6 @@ import { TABLET_SMALL_SIZE, TABLET_LARGE_SIZE } from 'styles/constants'
1313

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

16-
const { small: SMALL_LOGO } = CompanyLogo.SIZE
17-
1816
const AboutHeroHeading = styled(HeroHeading)`
1917
margin-top: ${rem(140)};
2018
margin-bottom: 3rem;
@@ -50,56 +48,7 @@ const About = () => (
5048
</section>
5149
<DiversityAndInclusionSection />
5250
<ExecutiveTeamSection />
53-
<EpBuiltStartupsSection>
54-
<CompanyLogo
55-
url="https://www.hootsuite.com/"
56-
alt="Hootsuite logo"
57-
name="hootsuite.png"
58-
size={SMALL_LOGO}
59-
/>
60-
<CompanyLogo
61-
url="https://www.amazon.com/"
62-
alt="Amazon logo"
63-
name="amazon.png"
64-
size={SMALL_LOGO}
65-
/>
66-
<CompanyLogo
67-
url="https://www.paypal.com/"
68-
alt="PayPal logo"
69-
name="paypal.png"
70-
size={SMALL_LOGO}
71-
/>
72-
<CompanyLogo
73-
url="https://www.bench.co/"
74-
alt="Bench logo"
75-
name="bench.png"
76-
size={SMALL_LOGO}
77-
/>
78-
<CompanyLogo
79-
url="https://www.intel.com/"
80-
alt="Intel logo"
81-
name="intel.png"
82-
size={SMALL_LOGO}
83-
/>
84-
<CompanyLogo
85-
url="https://www.verisign.com/"
86-
alt="Verisign logo"
87-
name="verisign.png"
88-
size={SMALL_LOGO}
89-
/>
90-
<CompanyLogo
91-
url="https://www.cisco.com/"
92-
alt="Cisco logo"
93-
name="cisco.png"
94-
size={SMALL_LOGO}
95-
/>
96-
<CompanyLogo
97-
url="https://www.opendns.com/"
98-
alt="OpenDNS logo"
99-
name="opendns.png"
100-
size={SMALL_LOGO}
101-
/>
102-
</EpBuiltStartupsSection>
51+
<EpBuiltStartupsSection />
10352
<OpensourceSection />
10453
<Footer />
10554
</Page>

‎sections/ep-built-startups-section/index.js‎

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react'
22

3-
import { arrayOf, element } from 'prop-types'
3+
import { rem } from 'polished'
44
import styled from 'styled-components'
55

6-
import { RowContainer } from 'components'
6+
import { Logo, RowContainer } from 'components'
77
import { FlexSectionContent } from 'components/layout'
8+
import { TABLET_SMALL_SIZE } from 'styles/constants'
89

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

@@ -31,13 +32,29 @@ const StyledText = styled.div`
3132
text-align: center;
3233
font-family: 'Lato';
3334
line-height: 1.625rem;
35+
margin-right: -1rem;
36+
margin-left: -1rem;
3437
`
3538

36-
const LogoContainer = styled(RowContainer)`
39+
const LogosContainer = styled(RowContainer)`
3740
margin-top: 3rem;
3841
`
3942

40-
const EpBuiltStartupsSection = ({ children }) => (
43+
const MIN_LOGO_WIDTH = rem(125)
44+
45+
const LogoContainer = styled.div`
46+
padding: 1rem;
47+
min-width: ${MIN_LOGO_WIDTH};
48+
flex: 0 0 50%;
49+
max-width: 50%;
50+
51+
@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
52+
flex: 0 0 25%;
53+
max-width: 25%;
54+
}
55+
`
56+
57+
const EpBuiltStartupsSection = () => (
4158
<StyledSection>
4259
<StyledFlexSectionContent>
4360
<StyledHeading>Our Software Engineers</StyledHeading>
@@ -47,13 +64,62 @@ const EpBuiltStartupsSection = ({ children }) => (
4764
entrepreneurial, we apply lean startup and agile best practices to
4865
projects we’re passionate about.
4966
</StyledText>
50-
<LogoContainer>{children}</LogoContainer>
67+
<LogosContainer>
68+
<LogoContainer>
69+
<Logo
70+
url="https://www.hootsuite.com/"
71+
alt="Hootsuite logo"
72+
name="hootsuite.png"
73+
/>
74+
</LogoContainer>
75+
<LogoContainer>
76+
<Logo
77+
url="https://www.amazon.com/"
78+
alt="Amazon logo"
79+
name="amazon.png"
80+
/>
81+
</LogoContainer>
82+
<LogoContainer>
83+
<Logo
84+
url="https://www.paypal.com/"
85+
alt="PayPal logo"
86+
name="paypal.png"
87+
/>
88+
</LogoContainer>
89+
<LogoContainer>
90+
<Logo url="https://www.bench.co/" alt="Bench logo" name="bench.png" />
91+
</LogoContainer>
92+
<LogoContainer>
93+
<Logo
94+
url="https://www.intel.com/"
95+
alt="Intel logo"
96+
name="intel.png"
97+
/>
98+
</LogoContainer>
99+
<LogoContainer>
100+
<Logo
101+
url="https://www.verisign.com/"
102+
alt="Verisign logo"
103+
name="verisign.png"
104+
/>
105+
</LogoContainer>
106+
<LogoContainer>
107+
<Logo
108+
url="https://www.cisco.com/"
109+
alt="Cisco logo"
110+
name="cisco.png"
111+
/>
112+
</LogoContainer>
113+
<LogoContainer>
114+
<Logo
115+
url="https://www.opendns.com/"
116+
alt="OpenDNS logo"
117+
name="opendns.png"
118+
/>
119+
</LogoContainer>
120+
</LogosContainer>
51121
</StyledFlexSectionContent>
52122
</StyledSection>
53123
)
54124

55-
EpBuiltStartupsSection.propTypes = {
56-
children: arrayOf(element),
57-
}
58-
59125
export default EpBuiltStartupsSection

‎sections/opensource-section/index.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const StyledSection = styled.section`
2424
`
2525

2626
const TextContent = styled.div`
27-
width: 770px;
27+
max-width: 770px;
2828
padding: 40px 70px 70px;
2929
margin: 0 auto;
3030
text-align: center;
@@ -34,21 +34,16 @@ const TextContent = styled.div`
3434
}
3535
3636
@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
37-
width: 430px;
38-
padding: 0 0 40px;
37+
max-width: 430px;
38+
padding: 0 16px 40px;
3939
}
4040
4141
@media only screen and (max-width: ${MOBILE_SIZE}) {
42-
width: 342px;
43-
padding: 0 0 40px;
42+
max-width: 342px;
43+
padding: 0 16px 40px;
4444
}
4545
`
4646

47-
const StyledHeading = styled(SectionHeadingBold)`
48-
text-align: center;
49-
line-height: 1.5;
50-
`
51-
5247
const StyledText = styled(Text)`
5348
margin: 24px 0;
5449
text-align: center;
@@ -105,7 +100,7 @@ const OpensourceSection = () => {
105100
<StyledSection>
106101
<FlexSectionContent>
107102
<TextContent>
108-
<StyledHeading>Commit.dev as Opensource</StyledHeading>
103+
<SectionHeadingBold>Commit.dev as Opensource</SectionHeadingBold>
109104
<StyledText>
110105
Our commit.dev website runs as an opensource project within Commit
111106
where engineers are free to work on the website as they wish and

‎sections/sp-section/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,22 @@ const LogosContainer = styled(RowContainer)`
3333
}
3434
`
3535

36+
const MIN_LOGO_WIDTH = rem(198)
37+
3638
const LogoContainer = styled.div`
3739
max-width: 50%;
3840
flex: 0 0 50%;
3941
padding: 0 1rem;
4042
4143
@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
44+
padding: 0;
4245
max-width: 33.33%;
4346
flex: 0 0 33.33%;
4447
}
4548
4649
@media only screen and (min-width: ${TABLET_LARGE_SIZE}) {
47-
max-width: 160px;
48-
min-width: 160px;
50+
max-width: ${MIN_LOGO_WIDTH};
51+
min-width: ${MIN_LOGO_WIDTH};
4952
flex: 1;
5053
}
5154
`

0 commit comments

Comments
 (0)