Skip to content

Commit b95f1dc

Browse files
richardvanthofrichardvanthof
committed
Made base files for extended global styling
Copied current base files, made startups-page and changed styling-dependencies to new styling files
1 parent 44bc431 commit b95f1dc

File tree

7 files changed

+628
-0
lines changed

7 files changed

+628
-0
lines changed

‎src/layouts/MainLayoutExtended/MainLayout.components.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styled from 'styled-components';
2+
import Helmet from 'react-helmet';
3+
import React from 'react';
4+
5+
export const Main = styled.main<{ padded?: boolean }>`
6+
max-width: 100vw !important;
7+
overflow-x: hidden;
8+
padding-top: ${(props) => (props.padded ? '15vh' : 0)};
9+
`;
10+
11+
export const HeadElements: React.FC<Record<string, never>> = () => (
12+
<Helmet>
13+
<meta name="robots" content="index, follow" />
14+
<link type="text/plain" rel="author" href="/humans.txt" />
15+
<link
16+
href="https://fonts.googleapis.com/css?family=Cousine|Lato:300,400,700&display=swap"
17+
rel="stylesheet"
18+
/>
19+
</Helmet>
20+
);

‎src/layouts/MainLayoutExtended/MainLayout.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { useEffect, useState } from 'react';
2+
import SEO from '../SEO/SEO';
3+
import Navbar from '../../containers/Navbar/Navbar';
4+
import Footer from '../Footer/Footer';
5+
import { GlobalStyles, TypographyClassStyling } from '../../styles/extended/global-css';
6+
import HeadScripts from '../../lib/GetHeadScripts';
7+
import NewsletterSubscribe from '../../containers/NewsletterSubscribe/NewsletterSubscribe';
8+
import { Main, HeadElements } from './MainLayout.components';
9+
import LayoutProps from './MainLayout.types';
10+
11+
const Layout: React.FC<LayoutProps> = ({
12+
children,
13+
pageSettings,
14+
padded = false,
15+
newsLetter = 0,
16+
}) => {
17+
const { title, description, keywords } = pageSettings;
18+
const [popup, setPopup] = useState(false);
19+
const [popupClosed, setPopupClosed] = useState(false);
20+
21+
const handleScroll = () => {
22+
const position = window.pageYOffset;
23+
const pageHeight = window.document.body.scrollHeight;
24+
const windowHeight = window.innerHeight;
25+
if ((position + windowHeight) / pageHeight > newsLetter) {
26+
setPopup(true);
27+
}
28+
};
29+
const closePopup = () => {
30+
setPopupClosed(true);
31+
};
32+
const MaybeRenderPopup = () => {
33+
if (popup && !popupClosed && newsLetter)
34+
return <NewsletterSubscribe popup closePopup={closePopup} />;
35+
return null;
36+
};
37+
38+
useEffect(() => {
39+
window.addEventListener('scroll', handleScroll, { passive: true });
40+
window.addEventListener('resize', handleScroll);
41+
return () => {
42+
window.removeEventListener('scroll', handleScroll);
43+
window.removeEventListener('resize', handleScroll);
44+
};
45+
}, []);
46+
return (
47+
<>
48+
<HeadElements />
49+
<HeadScripts />
50+
<GlobalStyles />
51+
<SEO title={title} description={description} keywords={keywords} />
52+
<Navbar background />
53+
<Main padded={padded}>
54+
<TypographyClassStyling />
55+
{children}
56+
<MaybeRenderPopup />
57+
</Main>
58+
<Footer />
59+
</>
60+
);
61+
};
62+
63+
export default Layout;

‎src/layouts/MainLayoutExtended/MainLayout.types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
export default interface LayoutProps {
4+
children: React.ReactNode;
5+
padded?: boolean;
6+
pageSettings: {
7+
title: string;
8+
description: string;
9+
keywords: string;
10+
};
11+
newsLetter?: number;
12+
}

‎src/pages/startups.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Layout from '../layouts/MainLayoutExtended/MainLayout';
4+
5+
const pageSettings = {
6+
title: `Maatwerk Web & Mobiel Ontwikkeling`,
7+
description: `Een kleinschalig full-service webbureau gespecialiseerd in platformontwikkeling op maat. Passie, kwaliteit en betrouwbaarheid als kernwaarden`,
8+
keywords: 'bytecode, digital agency',
9+
};
10+
11+
const Startups = () => (
12+
<Layout pageSettings={pageSettings}>
13+
<p>Hello world</p>
14+
</Layout>
15+
);
16+
17+
export default Startups;

‎src/styles/extended/global-css.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/*Enhanced/extended styles for the startup development landingpage*/
2+
3+
/* eslint-disable prettier/prettier */
4+
// Prettier has been disabled due to a weird bug with the code on line 44
5+
import { reset, debug } from 'styled-components-style-utils';
6+
import { css, createGlobalStyle } from 'styled-components';
7+
import theme, {Typography} from './theme';
8+
import textScaler from './textScaler';
9+
10+
const typographyElements = [
11+
'h1',
12+
'h2',
13+
'h3',
14+
'h4',
15+
'h5',
16+
'h6',
17+
'p',
18+
'li',
19+
'ul',
20+
'body',
21+
];
22+
23+
const typographyClasses = [
24+
'introduction',
25+
'caption',
26+
'subtitle',
27+
'button',
28+
'menuitem',
29+
'form',
30+
];
31+
32+
const addStylingExceptions = (element: string) => {
33+
switch (element) {
34+
case 'subtitle':
35+
return 'text-transform: uppercase;';
36+
case 'button':
37+
return 'text-decoration: none;';
38+
default:
39+
return '';
40+
}
41+
};
42+
43+
const typographyElementStyling = typographyElements.map(
44+
(element) => css`
45+
${element} {
46+
font-size: ${theme.typography[element as keyof Typography].size};
47+
line-height: ${theme.typography[element as keyof Typography].height};
48+
letter-spacing: ${theme.typography[element as keyof Typography].spacing};
49+
font-family: ${theme.typography[element as keyof Typography].font};
50+
font-weight: ${theme.typography[element as keyof Typography].weight};
51+
color: ${theme.typography[element as keyof Typography].color};
52+
margin-top: ${theme.typography[element as keyof Typography].marginTop};
53+
margin-bottom: ${theme.typography[element as keyof Typography].marginBottom};
54+
margin-left: ${theme.typography[element as keyof Typography].marginLeft};
55+
margin-right: ${theme.typography[element as keyof Typography].marginRight};
56+
${addStylingExceptions(element)};
57+
}
58+
`,
59+
);
60+
61+
export const TypographyClassStyling = createGlobalStyle`
62+
${typographyClasses
63+
.map(
64+
(element) => `.${element} {
65+
font-size: ${theme.typography[element as keyof Typography].size};
66+
line-height: ${theme.typography[element as keyof Typography].height};
67+
letter-spacing: ${theme.typography[element as keyof Typography].spacing};
68+
font-family: ${theme.typography[element as keyof Typography].font};
69+
font-weight: ${theme.typography[element as keyof Typography].weight};
70+
color: ${theme.typography[element as keyof Typography].color};
71+
margin:
72+
${theme.typography[element as keyof Typography].marginTop};
73+
${theme.typography[element as keyof Typography].marginRight};
74+
${theme.typography[element as keyof Typography].marginBottom};
75+
${theme.typography[element as keyof Typography].marginLeft};
76+
${addStylingExceptions(element)};
77+
}`,
78+
)
79+
.join('\n')}
80+
`;
81+
82+
const enableCssReset = false;
83+
const GlobalStyles = createGlobalStyle`
84+
${reset()}
85+
${enableCssReset ? debug() : ''}
86+
html { font-size: 1em; background: ${theme.colors.background} }
87+
a { color: ${theme.colors.primary}; text-decoration: none }
88+
img { width: 100%; height: auto; margin:0; padding: 0}
89+
${typographyElementStyling}
90+
91+
body { overflow-x: hidden; }
92+
textarea { resize: vertical; }
93+
::selection {
94+
background: ${theme.colors.tertiary};
95+
color: ${theme.colors.white}
96+
}
97+
strong { font-weight: 700; }
98+
em { font-style: italic; }
99+
${textScaler}
100+
ul { list-style: circle};
101+
ol {
102+
list-style: decimal;
103+
padding-left: 1rem;
104+
};
105+
blockquote {
106+
margin-left: 10%;
107+
font-style: italic;
108+
position: relative;
109+
::before {
110+
content: '‘‘';
111+
color: ${theme.colors.primary};
112+
font-size: 60px;
113+
position: absolute;
114+
top: 10px;
115+
left: -30px;
116+
letter-spacing: -4px;
117+
font-family: "Times New Roman", Times, serif;
118+
}
119+
}
120+
code { font-family: monospace; }
121+
pre {
122+
white-space: pre-wrap;
123+
font-size: 80%;
124+
}
125+
hr { margin: 42px 0; }
126+
`;
127+
128+
export { GlobalStyles };

‎src/styles/extended/textScaler.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { css } from 'styled-components';
2+
import theme from './theme';
3+
import calcHeaderSize from '../../lib/calcHeaderSizes';
4+
5+
const mediaQueries = theme.mediaQueryMin;
6+
7+
const base = {
8+
fontSize: '1.15em',
9+
scale: {
10+
desktop: 1.33,
11+
mobile: 1.15,
12+
},
13+
lineHeight: {
14+
paragraph: '1.33em',
15+
header: '1em',
16+
},
17+
};
18+
19+
const headerSize = {
20+
desktop: calcHeaderSize(base.scale.desktop, 1 * 1.125),
21+
mobile: calcHeaderSize(base.scale.mobile, 1 * 1.125),
22+
};
23+
24+
// SCSS-version
25+
const textScaler = css`
26+
${headerSize.mobile}
27+
@media (${mediaQueries.sm}) {
28+
${headerSize.desktop}
29+
}
30+
body {
31+
/* Base Font Size */
32+
font-size: ${base.fontSize};
33+
line-height: ${base.lineHeight.paragraph};
34+
max-width: 100vw;
35+
36+
h1,
37+
h2,
38+
h3,
39+
h4,
40+
h5,
41+
h6 {
42+
line-height: ${base.lineHeight.header};
43+
}
44+
/* ${headerSize.mobile} */
45+
@media (${mediaQueries.xxl}) {
46+
font-size: calc(${base.fontSize}*1.5);
47+
}
48+
@media (${mediaQueries.xl}) {
49+
font-size: calc(${base.fontSize}*1.4);
50+
}
51+
@media (${mediaQueries.lg}) {
52+
font-size: calc(${base.fontSize}*1.3);
53+
}
54+
@media (${mediaQueries.md}) {
55+
font-size: calc(${base.fontSize} * 1.15);
56+
line-height: calc(${base.lineHeight.paragraph});
57+
}
58+
}
59+
`;
60+
61+
export default textScaler;

0 commit comments

Comments
 (0)