DreamHost Logo ala CSS

This was done by Clee, my coworker. I tweaked it, prefacing things with dh to make it more portable and then slapping it into a shortcode so I could embed it here:

The code is as follows (you can see his original code at codepen):

<div id="dhbackground">
  <div id="dhmoon">
    <div id="dheclipse">
      <div id="dhchevron">
      </div>
    </div>
  </div>
</div>

@dhbg: rgba(27, 53, 100, 1);
@size: 240px;
@corner: (0.16 * @size);
@offset: (@corner - 6px);
@chevron: (0.36 * @size);

div#background {
  background-color: @dhbg;
  width: @size;
  height: @size;
  border-radius: @corner;
  margin: auto;
}

div#moon {
  background-color: #fff;
  width: @size - (2 * @corner);
  height: @size - (2 * @corner);
  position: relative;
  top: @corner;
  margin: auto auto;
  border-radius: 50%;
}

div#eclipse {
  background-color: @dhbg;
  position: relative;
  width: @size - (2 * @corner);
  height: @size - (2 * @corner);
  top: -@offset;
  left: -@offset;
  border-radius: 50%;
}

div#chevron {
  background-color: rgba(51, 104, 156, 1);
  position: relative;
  width: @chevron;
  height: @chevron;
  left: @offset;
  top: @offset;
  border-radius: @corner 0px (2 * @corner) 0px;
}

Now actually that’s not CSS, it’s LESS, which I can’t inline apparently (or maybe I just don’t know how). Either way, it’s a funky cool CSS trick!