Footer - define the fun overun

[RobTobias123]

Outcome

A unique and fun footer background for Nucleus Docs that appears when the footer 'edit links' section is scrolled past. (To replace the existing borrowed placeholder)

Scope

• Investigate concepts

[RobTobias123]

3 concepts were explored;

a tiled 'scale' approach of a duplicated and tesalting part of the Nucleus Logo
a Gratuitous Space Invader (+ variations)
a masthead illustration tiled pattern

[RobTobias123]

Link to the explorations:

https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=290%3A5503&mode=design&t=SpdB59P0efZOhOdg-1

[RobTobias123]

There may potentially be some issue with the complexity of the SVGs working in the CSS background. Drew is investigating.

[andij]

I've put together a draft PR for the space invaders.

• Feature/footer decoration #385

As the SVG has lots of paths, the file size is very big at 336KB!

Here's the preview:
https://feature-footer-decoration.nucleus-docs.pages.dev/components/ns-accordion/

Observations:

• It looks high contrast in dark-mode and quite subtle in light-mode.
• Comparing the happy-toast vs space-invaders. I notice the fun/humour is missing.

It's possible to 'layer' svg images, so a way that we can reduce the weight is to create the space-invaders as paths, then have another svg as a circle with some opacity (which is repeated) or we can apply a CSS mask.

References:

• https://www.svgbackgrounds.com/how-to-add-svgs-with-css-background-image/
• https://www.svgbackgrounds.com/tools/svg-to-css/

[jholt1]

🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻
🏻🏾🏾🏻🏾🏾🏾🏾🏾🏾🏻🏾🏾🏻🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻
🏻🏾🏾🏾🏽🏾🏾🏾🏾🏽🏾🏾🏾🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻🏻🏻🏻🏻
🏻🏻🏾🏽🏾🏾🏾🏾🏾🏾🏽🏾🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻🏻🏻
🏻🏻🏻🏿🏿🏾🏾🏾🏾🏿🏿🏾🏾🏾🏻🏻🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻🏻
🏻🏻🏾🏽🏿🏾🏾🏾🏾🏿🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻
🏻🏾🏼🏽🏽🏾🏾🏾🏾🏽🏽🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻
🏾🏼🏼🏾🏽🏼🏿🏿🏼🏽🏾🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻
🏾🏼🏾🏼🏻🏻🏿🏿🏻🏻🏼🏾🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻
🏾🏼🏾🏼🏻🏻🏻🏻🏻🏻🏼🏾🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻
🏾🏼🏼🏾🏾🏾🏾🏾🏾🏾🏾🏼🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻
🏻🏾🏼🏼🏼🏼🏼🏼🏼🏼🏼🏼🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻
🏻🏾🏼🏼🏼🏼🏼🏼🏼🏼🏼🏼🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻🏻
🏻🏾🏼🏼🏻🏻🏻🏻🏻🏻🏻🏼🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻
🏻🏻🏾🏼🏼🏻🏻🏻🏻🏻🏼🏼🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻
🏻🏻🏻🏾🏼🏼🏻🏻🏻🏻🏼🏼🏽🏽🏾🏽🏽🏽🏾🏾🏾🏽🏽🏾🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾
🏻🏻🏻🏻🏾🏼🏼🏻🏻🏻🏼🏽🏽🏽🏽🏽🏽🏽🏽🏽🏽🏽🏽🏾🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾
🏻🏻🏻🏻🏾🏼🏼🏻🏻🏻🏼🏼🏽🏽🏽🏼🏼🏼🏽🏽🏽🏼🏼🏾🏾🏽🏽🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾
🏻🏻🏻🏻🏾🏼🏼🏼🏼🏼🏼🏾🏽🏽🏽🏾🏾🏾🏼🏼🏼🏾🏾🏻🏻🏾🏾🏽🏽🏽🏾🏾🏾🏾🏾🏾🏾🏻
🏻🏾🏾🏾🏾🏾🏾🏼🏼🏼🏾🏾🏾🏾🏾🏻🏻🏻🏾🏾🏾🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏾🏾🏾🏾🏾🏻
🏾🏽🏽🏽🏾🏾🏾🏾🏾🏾🏽🏽🏾🏾🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏾🏽🏽🏽🏾🏾🏾🏾🏾🏾🏾🏻
🏻🏾🏾🏾🏾🏻🏻🏻🏻🏾🏾🏾🏾🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏻🏾🏾🏾🏾🏾🏻
🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏻🏻
🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏾🏾🏻🏻🏻
🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏻🏾🏾🏾🏾🏾🏾🏻🏻🏻🏻🏻

[jholt1]

                                          ▓▓▓▓▓▓▓▓▓▓                        
  ▓▓▓▓  ▓▓▓▓▓▓▓▓▓▓▓▓  ▓▓▓▓              ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓                    
  ▓▓▓▓▓▓▒▒▓▓▓▓▓▓▓▓▒▒▓▓▓▓▓▓          ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓                  
    ▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▓▓          ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓              
      ████▓▓▓▓▓▓▓▓████▓▓▓▓▓▓    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓            
    ▓▓▒▒██▓▓▓▓▓▓▓▓██▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓          
  ▓▓░░▒▒▒▒▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓        
▓▓░░░░▓▓▒▒░░████░░▒▒▓▓░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓        
▓▓░░▓▓░░    ████    ░░▓▓▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓        
▓▓░░▓▓░░            ░░▓▓░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓      
▓▓░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓      
  ▓▓░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓      
  ▓▓░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓    
  ▓▓░░░░              ░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  
    ▓▓░░░░          ░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  
      ▓▓░░░░        ░░░░▒▒▒▒▓▓▒▒▒▒▒▒▓▓▓▓▓▓▒▒▒▒▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
        ▓▓░░░░      ░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
        ▓▓░░░░      ░░░░▒▒▒▒▒▒░░░░░░▒▒▒▒▒▒░░░░▓▓▓▓▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
        ▓▓░░░░░░░░░░░░▓▓▒▒▒▒▒▒▓▓▓▓▓▓░░░░░░▓▓▓▓    ▓▓▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓  
  ▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░▓▓▓▓▓▓▓▓▓▓      ▓▓▓▓▓▓            ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  
▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▓▓▓▓                        ▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓  
  ▓▓▓▓▓▓▓▓        ▓▓▓▓▓▓▓▓                            ▓▓▓▓▓▓▓▓  ▓▓▓▓▓▓▓▓▓▓  
                                                              ▓▓▓▓▓▓▓▓▓▓    
                                                        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓      
                                                      ▓▓▓▓▓▓▓▓▓▓▓▓          

[andij]

Closing this ticket, we can refer to the ideas in here if / when we want to pick this up again.