Skip to content

Commit 618638b

Browse files
author
laksjfalksjf
committed
Updated margina, case image content
Adjusted margins Delivery.jsx en Header.jsx to line out elements, also updated imagery on case single to give more perspective and updated text underlays on Header.jsx to improve ledgebility while not obscuring the image background too much.
1 parent 2a1f5c6 commit 618638b

28 files changed

+165
-351
lines changed

‎src/containers/ContentBlocks/ContentBlocks.components.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const TextAndImageBase = styled.div`
2222
grid-template: auto / ${containerWidth.lg} 1fr 1fr ${containerWidth.lg};
2323
grid-column-gap: 5vw;
2424
} */
25-
@media (${mediaQueryMin.xl}) {
25+
@media (${mediaQueryMin.lg}) {
2626
grid-template: auto / ${props => props.fluid ? containerWidth.md : containerWidth.xl} ${props => props.grid} ${containerWidth.md};
2727
}
2828
`;
@@ -55,7 +55,7 @@ export const ContentWrapper = styled.div`
5555
5656
}
5757
@media (${mediaQueryMin.lg}) {
58-
width: 85%;
58+
width: ${props => props.fluid ? '100%' : '85%'};
5959
}
6060
`;
6161

@@ -67,7 +67,7 @@ export const GalleryWrapper = styled.section`
6767
}
6868
`;
6969

70-
const introPadding = '17vh';
70+
const introPadding = '5em';
7171

7272
export const IntroductionBase = styled.div`
7373
padding: 10vh ${containerWidth.sm};
@@ -76,7 +76,7 @@ export const IntroductionBase = styled.div`
7676
}
7777
@media (${mediaQueryMin.md}) {
7878
padding: ${introPadding} ${containerWidth.md};
79-
width: 60%;
79+
width: 70%;
8080
}
8181
@media (${mediaQueryMin.lg}) {
8282
padding: ${introPadding} ${containerWidth.lg};

‎src/containers/ContentBlocks/ContentBlocks.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const TextAndImage = ({
7272
>
7373
<img src={img} alt={alt} />
7474
</ImageWrapper>
75-
<ContentWrapper reverse={reverse}>{children}</ContentWrapper>
75+
<ContentWrapper fluid={fluid} reverse={reverse}>{children}</ContentWrapper>
7676
</TextAndImageBase>
7777
);
7878
};

‎src/containers/Deliverables.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ const DeliverablesContent = styled.div`
2929
justify-content: center;
3030
@media (${mediaQueryMin.xs}) {
3131
columns: 2;
32-
padding: 5vw;
32+
padding: 10em 10vw;
3333
}
3434
@media (${mediaQueryMin.md}) {
3535
columns: 3;
36-
padding: 10em 10vw;
36+
3737
}
3838
`;
3939

@@ -43,12 +43,15 @@ const ClientInfo = styled.div`
4343
padding: 0;
4444
display: flex;
4545
justify-content: flex-end;
46-
align-items: baseline;
4746
flex-direction: column;
47+
align-items: last baseline;
4848
& > * {
49-
padding: 1em;
49+
padding: 0 1em;
5050
}
51-
@media (${mediaQueryMin.md}) {
51+
p {
52+
margin: 0;
53+
}
54+
@media (${mediaQueryMin.sm}) {
5255
max-height: 10em;
5356
flex-direction: row;
5457
& > * {

‎src/containers/Header.jsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ const { colors, mediaQueryMin, containerWidth } = theme;
66
const { secondary } = colors;
77

88
const HeaderBase = styled.header`
9-
background: linear-gradient(to top, rgba(0,0,0,0.95), transparent), url(${props => props.backgroundImage});
9+
background: linear-gradient(to top, rgba(0,0,0,0.95), transparent 60%), url(${props => props.backgroundImage});
1010
background-size: cover !important;
11-
background-position: center;
11+
background-position: center !important;
1212
height: 100vh;
1313
padding: 5vh ${containerWidth.xs};
1414
display: flex;
@@ -18,10 +18,12 @@ const HeaderBase = styled.header`
1818
}
1919
@media (${mediaQueryMin.md}) {
2020
padding: 2em ${containerWidth.md};
21+
background: linear-gradient(to top, rgba(0,0,0,0.66), transparent 50%),
22+
url(${props => props.backgroundImage});
2123
}
2224
@media (${mediaQueryMin.lg}) {
2325
padding: 2em ${containerWidth.lg};
24-
background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 10%), linear-gradient(to top, rgba(0,0,0,0.90), transparent 45%), url(${props => props.backgroundImage});
26+
2527
}
2628
@media (${mediaQueryMin.xxl}) {
2729
padding: 5em ${containerWidth.xl};
@@ -30,25 +32,37 @@ const HeaderBase = styled.header`
3032

3133
const HeaderInformation = styled.div`
3234
display: flex;
33-
align-items: left;
34-
justify-content: center;
35+
width: 100%;
36+
justify-content: space-around
3537
flex-direction: column;
38+
align-items: flex-end;
39+
justify-content: space-between;
3640
@media (${mediaQueryMin.sm}) {
37-
flex-direction: row;
41+
3842
& > * {
3943
width: 50%;
4044
justify-content: center;
4145
}
4246
}
47+
@media (${mediaQueryMin.md}) {
48+
flex-direction: row;
49+
& > * {
50+
width: 40%;
51+
}
52+
}
53+
`;
54+
55+
const StyledSubtitle = styled.p`
56+
color: ${colors.lightgray2};
4357
`;
4458

4559
const Header = ({ title, subtitle, tagline, img, children }) => {
4660
return (
4761
<HeaderBase backgroundImage={img}>
4862
<HeaderInformation>
4963
<div>
50-
<p className="subtitle">{subtitle}</p>
51-
<h1>{title}</h1>
64+
<StyledSubtitle className="white subtitle">{subtitle}</StyledSubtitle>
65+
<h3>{title}</h3>
5266
</div>
5367
<div>
5468
<p>{tagline}</p>

‎src/containers/Navbar/Navbar.components.jsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import { transparentize } from 'polished'; // TODO: Remove dependency
55
import { Link } from 'gatsby';
66
import theme from '../../styles/theme';
77

8-
const { mediaQueryMin } = theme;
8+
const { mediaQueryMin, colors } = theme;
9+
10+
const NavBarLi = styled.li`
11+
margin: 1em 0;
12+
`;
913

1014
export const NavbarContainer = styled.nav`
1115
position: absolute;
@@ -23,6 +27,9 @@ export const NavbarContainer = styled.nav`
2327
display: flex;
2428
justify-content: space-between;
2529
}
30+
@media (min-width: ${theme.breakpointMobileMenu}) {
31+
background: ${props => props.background ? `linear-gradient(to bottom, ${colors.secondary}, transparent)` : 'transparent'};
32+
}
2633
2734
@media (${mediaQueryMin.md}) {
2835
}
@@ -37,7 +44,6 @@ export const NavbarContent = styled.div`
3744
display: flex;
3845
align-items: center;
3946
justify-content: space-between;
40-
height: 6rem;
4147
@media (max-width: ${theme.breakpointMobileMenu}) {
4248
display: block;
4349
width: 100%;
@@ -88,11 +94,11 @@ const StyledLink = styled(Link)`
8894
`;
8995

9096
const NavbarItemBase = ({ className, href, text }) => (
91-
<li className={className}>
97+
<NavBarLi className={className}>
9298
<StyledLink to={href} className="menuitem">
9399
{text}
94100
</StyledLink>
95-
</li>
101+
</NavBarLi>
96102
);
97103

98104
NavbarItemBase.propTypes = {
@@ -107,7 +113,7 @@ NavbarItemBase.defaultProps = {
107113

108114
export const NavbarItem = styled(NavbarItemBase)`
109115
display: inline-block;
110-
padding: 0 2rem;
116+
padding: 0 1.33rem;
111117
&:last-child {
112118
padding-right: 0;
113119
}

‎src/containers/Navbar/Navbar.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,14 @@ const hamburger = require('../../images/img/hamburger-menu.svg');
1818
const closeMenu = require('../../images/img/close-menu.svg');
1919

2020
class Navbar extends React.Component {
21-
constructor() {
22-
super();
21+
constructor(props) {
22+
super(props);
2323
this.state = {
2424
menuIsOpen: false,
2525
};
2626
this.openMenu = this.openMenu.bind(this);
2727
this.closeMenu = this.closeMenu.bind(this);
28+
2829
}
2930

3031
openMenu() {
@@ -38,7 +39,7 @@ class Navbar extends React.Component {
3839
render() {
3940
const { menuIsOpen } = this.state;
4041
return (
41-
<NavbarContainer>
42+
<NavbarContainer background={this.props.background}>
4243
<Link to="/" aria-label="homePage">
4344
<MobileNavLogo src={logoMin} alt="Logo" />
4445
</Link>

‎src/images/img/cases/breda-actief/Artboard Copy.png‎

-3.22 MB
Binary file not shown.

‎src/images/img/cases/breda-actief/Artboard [email protected]‎

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

‎src/images/img/cases/breda-actief/Featured.svg‎

Lines changed: 6 additions & 6 deletions
Loading

‎src/images/img/cases/breda-actief/Responsive.svg‎

Lines changed: 19 additions & 19 deletions
Loading

0 commit comments

Comments
 (0)