.satellite CSS class

Elements with .satellite are placed along an .orbit or .orbit-* path serving as content place and/or to nest .orbits using .gravity-spot. By default, up to 60 satellites can be placed in an orbit.

Look and feel

Satellites can be customized by adding CSS border and background properties.


.satellite {
background-color: var(--o-indigo);
border: none;
}
.one {
background-color: var(--o-orange);
border: none;
}
.two {
background: radial-gradient(circle, rgba(246,246,246,1) 4%, rgba(52,249,67,1) 28%, rgba(0,0,0,1) 82%, rgba(0,0,0,1) 96%);
border: none;
}
.three {
background-color: var(--o-blue-lighter);
border: 2px solid var(--o-blue);
}
.four {
background-color: transparent;
border: 2px dashed var(--o-indigo);
}
.five {
background-color: var(--o-pink);

}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite one"></div>
      <div class="satellite two"></div>
      <div class="satellite three"></div>
      <div class="satellite four"></div>
      <div class="satellite five"></div>
    </div>
  </div>
</div>

.satellite {
background-color: var(--o-indigo);
border: none;
}
.one {
background-color: var(--o-orange);
border: none;
}
.two {
background: radial-gradient(circle, rgba(246,246,246,1) 4%, rgba(52,249,67,1) 28%, rgba(0,0,0,1) 82%, rgba(0,0,0,1) 96%);
border: none;
}
.three {
background-color: var(--o-blue-lighter);
border: 2px solid var(--o-blue);
}
.four {
background-color: transparent;
border: 2px dashed var(--o-indigo);
}
.five {
background-color: var(--o-pink);

}

In addition, a few set of CSS shapes utilities are provided (.circle, .box, .rounded-box). Nevertheless, users can set any shapes using svg, images, etc.


.satellite {
background-color: var(--o-indigo);
border: none;
}
.box {
background-color: var(--o-orange);
border: none;
}
.rounded-box {
background-color: var(--o-green);
border: none;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite"></div>
      <div class="satellite"></div>
      <div class="satellite box"></div>
      <div class="satellite box"></div>
      <div class="satellite rounded-box"></div>
      <div class="satellite rounded-box"></div>
    </div>
  </div>
</div>

.satellite {
background-color: var(--o-indigo);
border: none;
}
.box {
background-color: var(--o-orange);
border: none;
}
.rounded-box {
background-color: var(--o-green);
border: none;
}

Adjust Satellite size

Each .satellite has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the satellite to shrink by a specified percentage.


.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-pink)
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite "></div>
      <div class="satellite shrink-30"></div>
      <div class="satellite shrink-60"></div>
      <div class="satellite shrink-90"></div>

    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-pink)
}

On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing the satellite to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.


.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-pink)
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite grow-0.5x "></div>
      <div class="satellite grow-2x"></div>
      <div class="satellite grow-3x"></div>
      <div class="satellite grow-3.5x"></div>

    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-pink)
}

Using satellites for nesting orbits

Satellites allow nest orbits to created complex radial designs. See orbit secction for more information.


.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <div class="satellite">
        <div class="gravity-spot">
          <div class="orbit"></div>
          <div class="orbit"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

Adjusting radial layout

Arbitrary satellite angle.

.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.


.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-cyan)
}