Closed RobTobias123 closed 6 months ago
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
There may potentially be some issue with the complexity of the SVGs working in the CSS background. Drew is investigating.
I've put together a draft PR for the space invaders.
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'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:
π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»πΎπΎπΎπΎπΎπ»π»π»π»π»π»π»π»π»π»π»π» π»πΎπΎπ»πΎπΎπΎπΎπΎπΎπ»πΎπΎπ»π»π»π»π»π»π»πΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π»π»π»π»π»π»π» π»πΎπΎπΎπ½πΎπΎπΎπΎπ½πΎπΎπΎπ»π»π»π»π»πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π»π»π»π»π»π» π»π»πΎπ½πΎπΎπΎπΎπΎπΎπ½πΎπ»π»π»π»π»πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π»π»π»π» π»π»π»πΏπΏπΎπΎπΎπΎπΏπΏπΎπΎπΎπ»π»πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π»π»π» π»π»πΎπ½πΏπΎπΎπΎπΎπΏπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π»π» π»πΎπΌπ½π½πΎπΎπΎπΎπ½π½π½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π» πΎπΌπΌπΎπ½πΌπΏπΏπΌπ½πΎπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π» πΎπΌπΎπΌπ»π»πΏπΏπ»π»πΌπΎπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π»π» πΎπΌπΎπΌπ»π»π»π»π»π»πΌπΎπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π» πΎπΌπΌπΎπΎπΎπΎπΎπΎπΎπΎπΌπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π» π»πΎπΌπΌπΌπΌπΌπΌπΌπΌπΌπΌπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π»π» π»πΎπΌπΌπΌπΌπΌπΌπΌπΌπΌπΌπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ»π» π»πΎπΌπΌπ»π»π»π»π»π»π»πΌπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπ½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ» π»π»πΎπΌπΌπ»π»π»π»π»πΌπΌπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ» π»π»π»πΎπΌπΌπ»π»π»π»πΌπΌπ½π½πΎπ½π½π½πΎπΎπΎπ½π½πΎπ½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎ π»π»π»π»πΎπΌπΌπ»π»π»πΌπ½π½π½π½π½π½π½π½π½π½π½π½πΎπ½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎ π»π»π»π»πΎπΌπΌπ»π»π»πΌπΌπ½π½π½πΌπΌπΌπ½π½π½πΌπΌπΎπΎπ½π½πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπΎ π»π»π»π»πΎπΌπΌπΌπΌπΌπΌπΎπ½π½π½πΎπΎπΎπΌπΌπΌπΎπΎπ»π»πΎπΎπ½π½π½πΎπΎπΎπΎπΎπΎπΎπ» π»πΎπΎπΎπΎπΎπΎπΌπΌπΌπΎπΎπΎπΎπΎπ»π»π»πΎπΎπΎπ»π»π»π»π»π»πΎπΎπΎπΎπΎπΎπΎπΎπΎπΎπ» πΎπ½π½π½πΎπΎπΎπΎπΎπΎπ½π½πΎπΎπ»π»π»π»π»π»π»π»π»π»π»π»πΎπ½π½π½πΎπΎπΎπΎπΎπΎπΎπ» π»πΎπΎπΎπΎπ»π»π»π»πΎπΎπΎπΎπ»π»π»π»π»π»π»π»π»π»π»π»π»π»πΎπΎπΎπΎπ»πΎπΎπΎπΎπΎπ» π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»πΎπΎπΎπΎπΎπ»π» π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»πΎπΎπΎπΎπΎπΎπΎπ»π»π» π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»π»πΎπΎπΎπΎπΎπΎπ»π»π»π»π»
ββββββββββ
ββββ ββββββββββββ ββββ ββββββββββββββββ
ββββββββββββββββββββββββ ββββββββββββββββββββββ
ββββββββββββββββββββ ββββββββββββββββββββββββββββ
ββββββββββββββββββββββ ββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββ ββββ ββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββ ββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββ ββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββββββ ββββββββββββββββββββββββ
ββββββββββββββββββββββββββββ ββββββ ββββββββββββββββββββ
ββββββββββββββββββββββββββββ ββββββββββββββββββββββ
ββββββββ ββββββββ ββββββββ ββββββββββ
ββββββββββ
ββββββββββββββ
ββββββββββββ
Closing this ticket, we can refer to the ideas in here if / when we want to pick this up again.
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