A Pen by Antoine Butler.

BMORESPONSIVE-CSS-Logo-Mark.markdown

BMORESPONSIVE CSS Logo Mark

A Pen by Antoine Butler on CodePen.

License.

index.jade

p
  = "A CSS version of the "
  a(href="http://bmoresponsive.com/") Bmoresponsive
  = " logomark"

h1
  span.icon
  = "Bmoresponsive"
  span.grid

style.less

@import url(http://fonts.googleapis.com/css?family=Noticia+Text:700);

*, *:before, *:after {
  box-sizing: border-box;
}

@border-width: 2px;
@border-radius: 10px;

h1 {
  font: 2.5em/1 'Noticia Text', serif;
  text-transform: uppercase;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
  
  .icon,
  .grid {
    height: 2.0625em;
    width: 2.625em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    transform: translateY(0.25em);
    
    &:before {
      width: 50%;
      height: 166%;
      bottom: -@border-width;
      left: 0;
      z-index: 1;
    }
    
    &:after {
      height: 105%;
      width: 56%;
      bottom: 58%;
      left: 17%;
      z-index: 2;
    }
    
    &:before, &:after {
      content: '';
      display: block;
      position: absolute;
    }
    
    &, &:before, &:after {
      border-radius: @border-radius;
      border: @border-width solid #fff;
    }
  }
  
  .icon {
    background: rgb(38,169,224);
    position: relative;
    
    &:before { background: rgb(121,200,234); }
    &:after { background: rgb(90,187,229); }
  }
  
  .grid {
    position: absolute;
    left: 0;
    z-index: 2;
  }
}

p {
  font-size: 0.75em;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fd8c25;
}