Satellites

Satellites travel the orbits. A .satellite sits on a ring and carries your content in a .capsule; Orbit spreads all the satellites of a ring evenly around it.

A satellite is a circle one lane across, with no border or background until you give it one. Put content in a .capsule inside it, never directly in the satellite: the capsule keeps it centered and upright. See Capsules.

Size

Set --o-size-ratio, in lanes, on the satellite, its ring or the .gravity-spot. For one satellite there are also classes, which win over any ratio set around them:

.shrink-5 to .shrink-100 make it smaller than a lane: shrink-30 is 0.7 lanes.
.grow-1x to .grow-12x make it 2 to 24 lanes. Decimals add fifths of a lane: grow-1.2x is 2.4 lanes.
.grow-0.1x to .grow-0.9x add tenths of a lane: grow-0.5x is 1.5 lanes.

Clockwise from the top: half a lane, one lane, 1.5, 2, 3 and 4 lanes.

Shape and look

Satellites are round. .box makes one square and .rounded-box a square with soft corners. Anything else is plain CSS: backgrounds, borders, images, SVG.

Clockwise from the top: round, .box, .rounded-box, a gradient and a border.

Position on the lane

A satellite is centered on its lane. .inner-orbit moves it in so its outer edge touches the lane, and .outer-orbit moves it out so its inner edge does. .quarter-inner-orbit and .quarter-outer-orbit move it part of the way. For any other offset, set --o-alignment: a positive length moves it in, a negative one out.

Clockwise from the top: outer-orbit, quarter-outer-orbit, default, quarter-inner-orbit, inner-orbit.

An exact angle

.angle-0 to .angle-360 place a satellite at that angle, clockwise from the top, instead of its turn on the ring. It ignores the ring's --o-from.

Facing the center

A satellite keeps its content upright wherever it is. With .spin-lock it turns with its angle instead, so the top of its content always points at the center, like the labels on a wheel. Add .flip to the capsule to make it point outward. Left, the default; right, spin-lock.

Left, every arrow points up. Right, with spin-lock, every arrow points at the center.

Which way is out

Each satellite exposes --o-dir-x and --o-dir-y: the direction from the center of its system to the satellite, from -1 to 1. x grows to the right and y grows down, so a satellite at the top has 0 and -1, and a .satellite.at-center has both at 0. Its content inherits them, so CSS can push a label outward whatever the angle:

Each label moves away from the center along its own direction.

How Orbit thinks shows the other common use: labels that hang above the satellites of the upper half and below the rest.

A satellite is a universe

Put a .gravity-spot directly inside a satellite and it reaches the satellite's edge: a moon system around a planet, a gauge inside a menu item. Make the satellite thicker to give it room. See Gravity spot.

Reference

Class or property	Default	What it does
`--o-size-ratio`	`1`	Diameter, in lanes.
`.shrink-5` … `.shrink-100`		Smaller than a lane: `shrink-N` is 1 − N/100 lanes.
`.grow-1x` … `.grow-12x`, `.grow-0.1x` …		Bigger: `grow-Nx` is 2N lanes.
`.box`, `.rounded-box`, `.circle`	round	Shape.
`.inner-orbit`, `.outer-orbit`, `.quarter-inner-orbit`, `.quarter-outer-orbit`		Moves it in or out from its lane.
`--o-alignment`	`0px`	Any offset from the lane; positive is inward.
`.angle-0` … `.angle-360`		An exact angle, clockwise from the top.
`.spin-lock`		Turns with its angle instead of staying upright.
`.at-center`		In `orbit-0`: the satellite sits at the center.
`.at-top-left` … `.at-bottom-right`		Where the capsule sits inside the satellite.
`--o-dir-x` / `--o-dir-y`	read only	Direction from the center, from -1 to 1.