<div class="logo">
  <div class="rivets">
    <div class="seal">
      <div class="type">
        <h1>100% Geek</h1>
        <em>since 1984</em>
      </div>
    </div>    
  </div>
</div>

@import "compass/css3";

$background1: #000;

$background2: #0097c0 url( "http://stash.rachelnabors.com/codepen/badge/brillant_trans.png") 50% 50%;

$diameter: 6em;

%circle {
  @include border-radius(100%);
}

%centering {
  position: absolute;
  top: 50%; left: 50%;
}

.logo {
  $logo-diameter: $diameter+1em;
  $rounded-corners: 1.5em;
  background: $background1;
  @include border-radius($rounded-corners);
  color: #fff;
  margin: 2em auto;
  position: relative;
  width: $logo-diameter; height: $logo-diameter;
  z-index: -2;
  &:before {
    background: $background1;
    @include border-radius($rounded-corners);
    content:"";
    position: absolute;
    top: 0; left: 0;
    @include rotate(30deg);
    width: $logo-diameter; height: $logo-diameter;
    z-index: -2;
  }
  &:after {
    background: $background1;
    @include border-radius($rounded-corners);
    content:"";
    position: absolute;
    top: 0; left: 0;
    @include rotate(-30deg);
    width: $logo-diameter; height: $logo-diameter;
    z-index: -2;
  }
}

.rivets {
  $rivets-diameter: $diameter+1em;
  width: $rivets-diameter; height: $rivets-diameter;
  &:before, &:after {
    content: " ";
    background: $background1;
    @extend %circle;
    position: absolute;
    top: 50%;
    margin-top: -.25em;
    width: .5em; height: .5em;
  }
  &:before {
    left: -.75em;
  }
  &:after {
    right: -.75em;
  }  
}

.seal {
  $seal-diameter: $diameter + 1em;
  @extend %circle;
  @extend %centering;
  background: $background1;
  margin-top: -($seal-diameter/2); margin-left: -($seal-diameter/2);
  width: $seal-diameter; height: $seal-diameter;
  &:before {
    @extend %centering;
    $width: $diameter * 1.75;
    $height: 1.25em;
    background: $background2;
    content: '';
    margin-top: -($height);
    margin-left: -($width/2);    
    z-index: -1;
    width: $width; height: 0;
    border: $height solid rgba(0, 0, 0, 0);
    border-left: $height/2 solid #fff;
    border-right: $height/2 solid #fff;
    @include box-sizing(border-box);
    /*Fix to make the borders appear on the ribbon ends also*/
    background-origin: border-box;
  }
}

.type {
  @extend %circle;
  @include transform-origin(50%, 50%);
  @include rotate(-30deg);
  @include box-sizing(border-box);
  background: $background2;  
  font-family: "Lato", sans-serif;
  text-align: center;
  text-transform: uppercase;
  padding-top: 1em;
  @extend %centering;
  margin-top: -($diameter/2); margin-left: -($diameter/2); 
  width: $diameter; height: $diameter;
  h1 {  
    font-size: 1.5em; 
    font-weight: 900;
  }
  em {
    display: block;
    font-size: .75em;
    font-style: italic;
    font-weight: 300;
  }
}