<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