Skip to content

Commit 6d6315b

Browse files
author
Jeroen van Steijn
committed
Merge branch 'feature/case-layout' into 'develop'
Feature/case layout See merge request bytecode/bytecode-website!122
2 parents da30487 + 1b5599f commit 6d6315b

File tree

121 files changed

+2845
-1857
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+2845
-1857
lines changed

‎content/posts/Image.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ const Figure = styled.figure`
99

1010
const Figcaption = styled.figcaption`
1111
font-size: 0.8em;
12+
margin: 0 1em;
13+
opacity: 0.8;
1214
`;
1315

1416
const Image = props => {
15-
const { src, alt, title } = props;
17+
const { src, alt, caption } = props;
1618
const image = require(`../../src/images/img/articles/${src}`);
1719
return (
1820
<Figure>
1921
<img src={image} alt={alt} />
20-
{title && <Figcaption>{title}</Figcaption>}
22+
{caption && <Figcaption>{caption}</Figcaption>}
2123
</Figure>
2224
);
2325

‎content/posts/bytecast-ep1-outsourcing.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: 'In de allereerste aflevering van de Bytecast spreekt Thomas met Lu
55
keywords: 'bytecast podcast outsourcing'
66
posted_on: '8 januari 2020'
77
slug: 'bytecast-ep1-outsourcing'
8-
article_image_url: 'bytecast-icon.jpg'
8+
article_image_url: 'bytecast-albumart.png'
99
author_name: 'Luciano Nooijen'
1010
author_role: 'Co-founder & technical lead'
1111
author_image_url: 'luciano.jpg'

‎content/posts/bytecast-ep2-marktonderzoek.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: 'De tweede aflevering van de Bytecast staat in het teken van markto
55
keywords: 'bytecast podcast marktonderzoek'
66
posted_on: '1 februari 2020'
77
slug: 'bytecast-ep2-marktonderzoek'
8-
article_image_url: 'bytecast-icon.jpg'
8+
article_image_url: 'bytecast-albumart.png'
99
author_name: 'Thomas Bodlaender'
1010
author_role: 'Accountmanager'
1111
author_image_url: 'thomas.jpeg'

‎src/components/ArrowButton.jsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* eslint-disable react/jsx-props-no-spreading */
2+
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
import styled from 'styled-components';
6+
import { Link } from 'gatsby';
7+
import theme from '../styles/theme';
8+
9+
const ButtonBase = ({ href, useGatsbyLink, className, children, ...props }) => {
10+
if (useGatsbyLink) {
11+
return (
12+
<Link to={href} className={`button ${className}`} {...props}>
13+
{children}
14+
</Link>
15+
);
16+
}
17+
return (
18+
<a href={href} className={`button ${className}`} {...props}>
19+
{children}
20+
</a>
21+
);
22+
};
23+
24+
ButtonBase.propTypes = {
25+
href: PropTypes.string.isRequired,
26+
useGatsbyLink: PropTypes.bool,
27+
className: PropTypes.string,
28+
children: PropTypes.node.isRequired,
29+
};
30+
31+
ButtonBase.defaultProps = {
32+
useGatsbyLink: false,
33+
className: '',
34+
};
35+
36+
const ArrowButton = styled(ButtonBase)`
37+
display: inline-block;
38+
background: transparent;
39+
padding: 0.66em 2em;
40+
border-color: ${theme.colors.tertiary};
41+
border-style: solid;
42+
border-width: 0.15rem;
43+
border-radius: 10rem;
44+
transition: all 0.2s ease;
45+
&:hover {
46+
color: ${theme.colors.white};
47+
background: ${theme.colors.primary};
48+
border-color: ${theme.colors.primary};
49+
}
50+
`;
51+
52+
export default ArrowButton;

‎src/components/Case.jsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import styled from 'styled-components';
44
import PropTypes from 'prop-types';
55

66
import theme from '../styles/theme';
7-
import { Big } from './Typography';
87

98
export const Checklist = styled.ul`
109
margin: 2em 0;
@@ -31,9 +30,7 @@ export const CheckListItem = props => {
3130
return (
3231
<CheckListItemBase>
3332
<img src={require('../images/icons/ui/check.svg')} alt="- " />
34-
<p>
35-
<Big>{children}</Big>
36-
</p>
33+
<p>{children}</p>
3734
</CheckListItemBase>
3835
);
3936
};

‎src/components/ImageBlock.jsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,13 @@ const { mediaQueryMin, colors } = theme;
88
const ImageBlockFigure = styled.figure`
99
margin: 0;
1010
height: 100vh;
11-
img {
12-
height: 100vh;
13-
width: auto;
14-
}
11+
object-fit: cover;
12+
object-position: bottom;
1513
@media (${mediaQueryMin.xs}) {
16-
max-height: 75vh;
14+
max-height: 90vh;
1715
display: block;
1816
position: relative;
1917
right: 0px;
20-
margin-left: 5%;
21-
margin-top: 4rem;
2218
overflow: hidden;
2319
}
2420
&:after {
@@ -35,9 +31,6 @@ const ImageBlockFigure = styled.figure`
3531
.content {
3632
transition: all 0.3s ease;
3733
}
38-
&:hover img {
39-
transform: scale(1.05);
40-
}
4134
4235
@media (min-width: ${theme.breakpointMobileMenu}) {
4336
&:after {

‎src/containers/Client.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import Container from './Container';
5+
import theme from '../styles/theme';
6+
7+
const { mediumgray } = theme.colors;
8+
const { sm } = theme.breakpoint;
9+
10+
const Content = styled(Container)`
11+
padding: 1em;
12+
background: ${mediumgray};
13+
padding: 5vh 0;
14+
display: flex;
15+
justify-content: center;
16+
display: flex;
17+
align-items: flex-start;
18+
flex-direction: column;
19+
padding: 1em;
20+
@media (${sm}) {
21+
align-items: center;
22+
flex-direction: row !important;
23+
justify-content: space-around;
24+
flex-basis: 50%;
25+
margin: 0 5sem;
26+
& > * {
27+
width: 50%;
28+
max-width: 75rem;
29+
}
30+
* {
31+
margin: 0;
32+
}
33+
}
34+
`;
35+
36+
const Bio = styled.p`
37+
opacity: 0.5;
38+
`;
39+
40+
const Logo = styled.img`
41+
height: 2em;
42+
margin: 1em 0;
43+
@media (${sm}) {
44+
height: 3rem;
45+
margin: 0;
46+
}
47+
width: unset;
48+
`;
49+
50+
const Client = ({ logo, name, description }) => (
51+
<Content>
52+
<div>{logo ? <Logo src={logo} alt={name} /> : <h5>{name}</h5>}</div>
53+
<Bio className="caption">{description}</Bio>
54+
</Content>
55+
);
56+
57+
export default Client;
58+
59+
Client.propTypes = {
60+
logo: PropTypes.string,
61+
name: PropTypes.string.isRequired,
62+
description: PropTypes.string.isRequired,
63+
};
64+
65+
Client.defaultProps = {
66+
logo: null,
67+
};

‎src/containers/Container.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styled from 'styled-components';
2+
import theme from '../styles/theme';
3+
4+
const { mediaQueryMin, containerWidth } = theme;
5+
6+
const Container = styled.section`
7+
padding: 1em ${containerWidth.xs};
8+
display: flex;
9+
flex-direction: column;
10+
align-items: ${props => props.align || 'inherit'};
11+
@media (${mediaQueryMin.sm}) {
12+
padding: 0 ${containerWidth.sm};
13+
}
14+
@media (${mediaQueryMin.md}) {
15+
padding: 0 ${containerWidth.md};
16+
}
17+
@media (${mediaQueryMin.lg}) {
18+
padding: 0 ${containerWidth.lg};
19+
}
20+
@media (${mediaQueryMin.xxl}) {
21+
padding: 0 ${containerWidth.xl};
22+
}
23+
`;
24+
25+
export default Container;

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

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
import styled from 'styled-components';
22
import theme from '../../styles/theme';
33

4-
const container = theme.containerWidth;
5-
const { mediaQueryMin } = theme;
4+
const { mediaQueryMin, containerWidth } = theme;
65

76
export const TextAndImageBase = styled.div`
87
max-width: 100% !important;
98
display: flex;
109
flex-direction: column;
1110
align-items: center;
12-
@media (${mediaQueryMin.sm}) {
11+
@media (${mediaQueryMin.xs}) {
1312
display: grid;
14-
grid-template: auto / ${container.sm} 1fr 1fr ${container.sm};
13+
grid-template: auto / ${containerWidth.sm} 1fr 1fr ${containerWidth.sm};
1514
grid-template-areas: 'imgLeft imgLeft imgRight imgRight';
16-
padding: 5vh 0;
17-
grid-column-gap: 3em;
15+
padding: ${props => (props.padded ? '2em' : 0)} 0;
16+
grid-column-gap: ${props => props.gutter};
1817
}
1918
@media (${mediaQueryMin.md}) {
20-
grid-template: auto / ${container.md} 1fr 1fr ${container.md};
19+
grid-template: auto / ${containerWidth.sm} ${props => props.grid} ${containerWidth.sm};
2120
}
2221
@media (${mediaQueryMin.lg}) {
23-
grid-template: auto / ${container.lg} 1fr 1fr ${container.lg};
24-
grid-column-gap: 6em;
25-
}
26-
@media (${mediaQueryMin.xl}) {
27-
grid-template: auto / ${container.xl} 1fr 1fr ${container.xl};
22+
grid-template: auto / ${props =>
23+
props.fluid ? containerWidth.md : containerWidth.xl} ${props =>
24+
props.grid} ${containerWidth.md};
2825
}
2926
`;
3027

3128
export const ImageWrapper = styled.figure`
3229
grid-area: ${props => props.pos};
3330
34-
margin: 5em 0;
31+
margin: 1em 1em;
32+
@media (${mediaQueryMin.sm}) {
33+
margin: 5em 0;
34+
}
3535
@media (${mediaQueryMin.sm}) {
3636
margin: 1em 0;
3737
transform: translateX(${props => props.translate});
@@ -46,9 +46,39 @@ export const ContentWrapper = styled.div`
4646
max-width: 100vw;
4747
@media (${mediaQueryMin.xs}) {
4848
margin: 3em 1em;
49+
grid-area: ${props => (props.reverse ? reversed : normal)};
4950
}
5051
@media (${mediaQueryMin.sm}) {
5152
margin: 0;
52-
grid-area: ${props => (props.reverse ? reversed : normal)};
53+
}
54+
@media (${mediaQueryMin.lg}) {
55+
width: ${props => (props.fluid ? '100%' : '85%')};
56+
}
57+
`;
58+
59+
export const GalleryWrapper = styled.section`
60+
display: flex;
61+
& > * {
62+
width: ${props => props.width || 100}%;
63+
padding: 0.5em;
64+
}
65+
`;
66+
67+
const introPadding = '5em';
68+
69+
export const IntroductionBase = styled.div`
70+
padding: 10vh ${containerWidth.sm};
71+
@media (${mediaQueryMin.sm}) {
72+
width: 75%;
73+
}
74+
@media (${mediaQueryMin.md}) {
75+
padding: ${introPadding} ${containerWidth.md};
76+
width: 70%;
77+
}
78+
@media (${mediaQueryMin.lg}) {
79+
padding: ${introPadding} ${containerWidth.lg};
80+
}
81+
@media (${mediaQueryMin.xl}) {
82+
padding: ${introPadding} ${containerWidth.xl};
5383
}
5484
`;

0 commit comments

Comments
 (0)