aebsr · February 24, 2014 21:48 · Feb 24, 2014
diff --git a/BMORESPONSIVE-CSS-Logo-Mark.markdown b/BMORESPONSIVE-CSS-Logo-Mark.markdown
@@ -0,0 +1,7 @@
+BMORESPONSIVE CSS Logo Mark
+---------------------------
+
+
+A [Pen](http://codepen.io/aebsr/pen/FwLuG) by [Antoine Butler](http://codepen.io/aebsr) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/aebsr/pen/FwLuG/license).
diff --git a/index.jade b/index.jade
@@ -0,0 +1,9 @@
+p
+  = "A CSS version of the "
+  a(href="http://bmoresponsive.com/") Bmoresponsive
+  = " logomark"
+
+h1
+  span.icon
+  = "Bmoresponsive"
+  span.grid
diff --git a/style.less b/style.less
@@ -0,0 +1,84 @@
+@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;
+}