Skip to content

Commit e6fcfac

Browse files
richardvanthofrichardvanthof
committed
Replaced ContentPageHeader with Header
On mulitple pages (contact, about and services) I put in the new header-element to improve the ledgebility of the text against the background.
1 parent 561e641 commit e6fcfac

File tree

6 files changed

+23
-21
lines changed

6 files changed

+23
-21
lines changed

‎src/containers/Header.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import styled from 'styled-components';
33
import PropTypes from 'prop-types';
44
import theme from '../styles/theme';
5+
import ArrowButton from '../components/ArrowButton';
56

67
const { colors, mediaQueryMin, containerWidth } = theme;
78

@@ -20,7 +21,7 @@ const HeaderBase = styled.header`
2021
padding: 3em ${containerWidth.sm};
2122
background: linear-gradient(
2223
to top,
23-
rgba(0, 0, 0, 0.85),
24+
rgba(0, 0, 0, 0.9),
2425
transparent 50%
2526
),
2627
url(${props => props.backgroundImage});
@@ -29,10 +30,10 @@ const HeaderBase = styled.header`
2930
padding: 2em ${containerWidth.md};
3031
}
3132
@media (${mediaQueryMin.lg}) {
32-
padding: 1em ${containerWidth.lg};
33+
padding: 3em ${containerWidth.lg};
3334
}
3435
@media (${mediaQueryMin.xxl}) {
35-
padding: 1em ${containerWidth.xl};
36+
padding: 7em ${containerWidth.xl};
3637
}
3738
`;
3839

@@ -45,7 +46,7 @@ const HeaderInformation = styled.div`
4546
@media (${mediaQueryMin.xs}) {
4647
justify-content: space-between;
4748
flex-direction: row;
48-
align-items: end;
49+
align-items: center;
4950
& > * {
5051
width: 50%;
5152
padding: 1em;
@@ -71,19 +72,22 @@ const ArrowDown = styled.img`
7172
opacity: 0.5;
7273
`;
7374

74-
const Header = ({ title, subtitle, tagline, img, children }) => {
75+
76+
77+
const Header = ({ title, subtitle, text, href, button, tagline, img, children, useGatsbyLink }) => {
7578
return (
7679
<HeaderBase backgroundImage={img}>
7780
<HeaderInformation>
7881
<div>
7982
<StyledSubtitle className="white subtitle">
8083
{subtitle}
8184
</StyledSubtitle>
82-
<h3>{title}</h3>
85+
<h2>{title}</h2>
8386
</div>
8487
<div>
85-
<p>{tagline}</p>
88+
<p>{tagline || text}</p>
8689
{children}
90+
{href && <ArrowButton useGatsbyLink={useGatsbyLink} href={href}>{button || 'Lees meer'}</ArrowButton>}
8791
</div>
8892
</HeaderInformation>
8993
<ArrowDown src={arrowDown} />

‎src/pages/contact.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Layout from '../layouts/MainLayout';
44
import ContactForm from '../containers/ContactForm/ContactForm';
55
import { Container, Row, Col } from '../lib/Grid';
66
import Button from '../components/Button';
7-
import ContentPageHeader from '../containers/ContentPageHeader/ContentPageHeader';
7+
import Header from '../containers/Header';
88

99
const pageSettings = {
1010
title: `Contact - Bytecode Digital Agency B.V.
@@ -22,17 +22,15 @@ const ContactHeading = styled.h4`
2222

2323
const Contact = () => (
2424
<Layout pageSettings={pageSettings}>
25-
<ContentPageHeader
25+
<Header
2626
img={require('../images/img/header/telefoon.jpg')}
2727
subtitle="Contact"
2828
title="Een keertje langskomen? Gezellig!"
29-
href="https://calendly.com/bytecode"
3029
text="Geef ons een belletje of stuur een mailtje
3130
en het is zo geregeld.
3231
De koffie, thee en koekjes staan al klaar.
3332
Bij wijze van spreken, natuurlijk. Koffie en thee moeten warm zijn.
3433
Dat weten wij ook wel."
35-
button="Plan een afspraak"
3634
bgSize="cover"
3735
shadow
3836
/>

‎src/pages/over.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import Layout from '../layouts/MainLayout';
33
import TextBlock from '../containers/TextBlock/TextBlock';
4-
import ContentPageHeader from '../containers/ContentPageHeader/ContentPageHeader';
4+
import Header from '../containers/Header';
55
import TeamMember from '../containers/TeamMember/TeamMember';
66
import { Container, Row, Col } from '../lib/Grid';
77
import ContactForm from '../containers/ContactForm/ContactForm';
@@ -16,7 +16,7 @@ const pageSettings = {
1616

1717
const Over = () => (
1818
<Layout pageSettings={pageSettings}>
19-
<ContentPageHeader
19+
<Header
2020
img={require('../images/img/content/teamv2.png')}
2121
subtitle="Over ons"
2222
title="Partner in jouw ambities"

‎src/pages/services.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Container, Row, Col } from '../lib/Grid';
55
import ContactForm from '../containers/ContactForm/ContactForm';
66
import ImageBlock from '../components/ImageBlock';
77
import Process from '../containers/Process/Process';
8-
import ContentPageHeader from '../containers/ContentPageHeader/ContentPageHeader';
8+
import Header from '../containers/Header';
99
import Wrapper from '../components/Wrapper';
1010
import Service from '../containers/Service/Service';
1111
import DigitalOceanPartnerLogo from '../components/DigitalOceanPartnerLogo';
@@ -20,7 +20,7 @@ const pageSettings = {
2020

2121
const Services = () => (
2222
<Layout pageSettings={pageSettings}>
23-
<ContentPageHeader
23+
<Header
2424
img={require('../images/img/header/postit-shadow.jpg')}
2525
subtitle="Services"
2626
title="Wij doen alles om het beste digitale resultaat te behalen."

‎src/styles/textScaler.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import calcHeaderSize from '../lib/calcHeaderSizes';
55
const mediaQueries = theme.mediaQueryMin;
66

77
const base = {
8-
fontSize: '1.125em',
8+
fontSize: '1.15em',
99
scale: {
10-
desktop: 1.25,
10+
desktop: 1.33,
1111
mobile: 1.15,
1212
},
1313
lineHeight: {
@@ -17,7 +17,7 @@ const base = {
1717
};
1818

1919
const headerSize = {
20-
desktop: calcHeaderSize(base.scale.desktop, 1 * 1.5),
20+
desktop: calcHeaderSize(base.scale.desktop, 1 * 1.125),
2121
mobile: calcHeaderSize(base.scale.mobile, 1 * 1.125),
2222
};
2323

@@ -45,10 +45,10 @@ const textScaler = css`
4545
font-size: calc(${base.fontSize}*1.5);
4646
};
4747
@media (${mediaQueries.xl}) {
48-
font-size: calc(${base.fontSize}*1.6);
48+
font-size: calc(${base.fontSize}*1.5);
4949
};
5050
@media (${mediaQueries.xl}) and (${mediaQueries.xxl}) {
51-
font-size: calc(${base.fontSize}*1.66);
51+
font-size: calc(${base.fontSize}*1.6);
5252
};
5353
}
5454

‎src/styles/theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const bytecode = {
127127
},
128128
introduction: {
129129
size: '1.22em',
130-
height: '1.33em',
130+
height: '1.44em',
131131
spacing: '0.01em',
132132
font: paragraph,
133133
weight: regular,

0 commit comments

Comments
 (0)