Scalable Square logo

index.html

<i class="square"></i>

style.sass

@import "compass"
/* edit this value to scale the square */
$square-dim: 33px


/* vars */
$square-middle-dim:    $square-dim  * .636363636
$square-middle-offset: $square-middle-dim * .285714286
$square-inner-dim:     $square-dim  * .212121212
$square-inner-offset:  $square-middle-offset + floor($square-middle-dim / 2) - ceil($square-inner-dim / 2)

$square-border-radius:        $square-dim * .151515152
$square-middle-border-radius: floor($square-border-radius / 2)
$square-inner-border-radius:  floor($square-middle-border-radius / 2)


/* styles */
html,
body
  height: 100%
  margin: 0
  overflow: hidden
  width: 100%
body
  box-align: center
  box-pack: center
  display: box

.square
  background: #444d52
  background: linear-gradient(top, #444c51, #3c4449)
  border-radius: $square-border-radius
  box-flex: 1
  display: inline-block
  position: relative
  height: $square-dim
  width: $square-dim

  &:before
    background: white
    border-radius: $square-middle-border-radius
    content: ""
    position: absolute
    left:   $square-middle-offset
    top:    $square-middle-offset
    height: $square-middle-dim
    width:  $square-middle-dim
  &:after
    background: #444d52
    background: linear-gradient(top, #444c52, #424a50)
    border: 1px solid #40484d
    border-bottom-color: #40494d
    border-left-color: #40494d
    border-radius: $square-inner-border-radius
    content: ""
    position: absolute
    left:   $square-inner-offset
    top:    $square-inner-offset
    height: $square-inner-dim
    width:  $square-inner-dim

Rendered (on Codepen): http://codepen.io/keithchu/pen/supnz