The .gravity-spot CSS class serves as a container for organizing Orbit elements within a radial layout. It is fundamental in every Orbit project, acting as the parent container for all other Orbit elements.
By default, .gravity-spot extends 500px, influencing its child elements’ dimensions. For instance, .orbit-12 will have a 500px diameter. To adjust this, directly modify the --o-force CSS custom variable either inline or through custom CSS classes. It’s important to note that each usage of .gravity-spot resets to default values, so modify the --o-force property within the .gravity-spot class for persistent changes.
Note
For responsive designs, consider using the optional Orbit.resize() JavaScript function, which adjusts --o-force dynamically when the parent element of .gravity-spot is resized.
.from-*x: Set initial orbit size from 1x to 12x. It acts as initial offset .
.gravity-spot can be nested within .satellite elements, allowing for the creation of intricate radial layouts.
.gravity-spot place its children element at center. This behavior can be altered using alignment utility classes such as .at-center (default), .at-center-left, .at-center-right, .at-top, .at-top-left, .at-top-right, .at-bottom, .at-bottom-left, and .at-bottom-right.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4