Solar system simplified

A solar system simplified made with just HTML and LESS

by Adrián Gómez Llorente

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js  Copy"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Adrián Gómez Llorente - http://adgllorente.com -->
<h1 class="title">Solar system simplified (scale 1px/3185kms)</h1>
<div class="solar-system">
  <span class="element sun" element-name="sun" radius="695508kms"></span>
  <span class="element mercury" element-name="mercury" radius="2440kms"></span>
  <span class="element venus" element-name="venus" radius="6052kms"></span>
  <span class="element earth" element-name="earth" radius="6371kms"></span>
  <span class="element mars" element-name="mars" radius="3389kms"></span>
  <span class="element jupiter" element-name="jupiter" radius="69911kms"></span>
  <span class="element saturn" element-name="saturn" radius="58232kms"></span>
  <span class="element uranus" element-name="uranus" radius="25362kms"></span>
  <span class="element neptune" element-name="neptune" radius="24622kms"></span>
</div>

CSS

/**
 * Adrián Gómez Llorente
 * http://adgllorente.com
 */

// Element sizes
@scale: 3185px; // Half earth.
@sun-diameter: 695508px / @scale;
@mercury-diameter: 2440px / @scale;
@venus-diameter: 6052px / @scale;
@earth-diameter: 6371px / @scale;
@mars-diameter: 3389px / @scale;
@jupiter-diameter: 69911px / @scale;
@saturn-diameter: 58232px / @scale;
@uranus-diameter: 25362px / @scale;
@neptune-diameter: 24622px / @scale;

// Text
@line-height: 130px;

body {
  background-color: #100515;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: white;
  font-family: 'Courier New';
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px dashed white;
  display: inline-block;
}

.solar-system {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.element {
  position: relative;
  border: 0;
  background-color: white;
  margin: 80px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 5px solid #100515;
  
  &:hover{
    &:after {
      position: absolute;
      bottom: 50%;
      left: 50%;
      content: '';
      height: @line-height;
      border-left: 1px dashed white;
    }
    
    &:before {
      position: absolute;
      bottom: 50%;
      left: 50%;
      margin-bottom: @line-height;
      border-bottom: 1px dashed white;
      color: white;
      text-transform: uppercase;
      content: attr(element-name) ' r:' attr(radius);
      font-family: 'Courier New';
    }
  }
}

.sun {
  background-color: #db3026;
  width: @sun-diameter;
  height: @sun-diameter;
}

.mercury {
  background-color: #333983;
  width: @mercury-diameter;
  height: @mercury-diameter;
}

.venus {
  background-color: #f3b677;
  width: @venus-diameter;
  height: @venus-diameter;
}

.earth {
  background-color: #49cdde;
  width: @earth-diameter;
  height: @earth-diameter;
}

.mars {
  background-color: #ba5700;
 ...

JavaScript

/**
 * LESS Compiler
 */
(function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()