<ThemeProvider theme={theme}>
<>
<StyledPage>
<Meta siteName={siteName} />
{/* TODO add Header */}
<Header />
<Inner>{children}</Inner>
{/* TODO add Footer */}
{/* TODO add QuickAction */}
</StyledPage>
<GlobalStyle theme={theme} />
</>
</ThemeProvider>function isInViewportAddClass(element) {
if (typeof isInViewportAddClass.elements === 'undefined') {
isInViewportAddClass.elements = [];
}
if (element instanceof Element) isInViewportAddClass.elements.push(element);
isInViewportAddClass.elements.forEach(ele => {
if (isInViewport(ele)) {
if (!ele.classList.contains('in-viewport')) {
ele.classList.add('in-viewport');
}
} else if (ele.classList.contains('in-viewport')) {
ele.classList.remove('in-viewport');
}
});
return element;
}html {
box-sizing: border-box;
font-size: 10px;
}
*, *:before, *:after {
box-sizing: border-box;
}<ThemeProvider theme={theme}>
<>
<StyledPage>
<Meta siteName={siteName} />
{/* TODO add Header */}
<Header />
<Inner>{children}</Inner>
{/* TODO add Footer */}
{/* TODO add QuickAction */}
</StyledPage>
<GlobalStyle theme={theme} />
</>
</ThemeProvider>function isInViewportAddClass(element) {
if (typeof isInViewportAddClass.elements === 'undefined') {
isInViewportAddClass.elements = [];
}
if (element instanceof Element) isInViewportAddClass.elements.push(element);
isInViewportAddClass.elements.forEach(ele => {
if (isInViewport(ele)) {
if (!ele.classList.contains('in-viewport')) {
ele.classList.add('in-viewport');
}
} else if (ele.classList.contains('in-viewport')) {
ele.classList.remove('in-viewport');
}
});
return element;
}html {
box-sizing: border-box;
font-size: 10px;
}
*, *:before, *:after {
box-sizing: border-box;
}I'm a Full Stack Web Developer making exciting apps.
I create practical products as a freelance developer, graphic designer, and entrepreneur.
Check out my work