mandymichael

export const Collection = styled('div')(({ theme }) => ({
    display: 'grid',
    gridGap: 12,
    gridTemplateColumns: '1fr',
    paddingBottom: 8,
    borderBottom: '4px double grey',

    '& > div:not(:first-child)': {
        position: 'relative',

mandymichael

if ( 'AmbientLightSensor' in window ) {
    const sensor = new AmbientLightSensor();
    sensor.onreading = () => {
        if ( sensor.illuminance < 20) {
           element.style.setProperty('--bg', 'black’);
        } else {
           element.style.setProperty('--bg', 'blue’);
        }
   };
   sensor.start();

mandymichael

componentDidMount() {
    this.detectInViewport()
    addListener('scroll', this.detectInViewport)
    addListener('resize', this.detectInViewport)
}

detectInViewport = () => {
    const { top, bottom, height } = this.innerRef.getBoundingClientRect()
    // Calculate if on screen and distance from the viewport...
    this.setState({ inViewport: viewportPosition, viewportHeight, distanceFromViewport })

mandymichael

## Inspiration

### SWISS Design
1. https://www.designspiration.net/save/534385462519/
2. Google Swiss Design


## Useful Links

mandymichael

<h1 data-text="Hello">Hello</h1>