I want to celebrate the launch of the http://WebPlatform.org! A place to document the web for everybody. It's the first version and it should definitely be improved & simplified. You can see the single elements on ```h1:hover``` ## Web What? http://bl

index.html

<h1>WebPlatform<span>.org</span></h1>

script.js

/**
  WebPlatform.org logo
  
  # What? #
  I want to celebrate the launch of the WebPlatform.org! 
  A place to document the web for everybody. 


  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Bitter:700);

$background: #f7f4f0;

$orange: rgba(247, 147, 17, 1);
$red: rgba(221, 35, 15, .8);
$purple: rgba(88, 56, 153, .65);
$cyan: rgba(46, 179, 196, 1);

$middle: #873E77;

body {
  background:$background;
  margin:0;
}

h1 {
  position:absolute;
  left:50%;
  top:60%;
  margin:0 0 0 -4em;
  height:.5em;
  width:.5em;
  font:bold 2em/2.5em 'Bitter', Georgia, serif;
  letter-spacing:-.04em;
  color:#474646;
  border-radius:50%;
  box-shadow:
    /* left - cross */
    3.7em -2.4em 0 -.065em $background,
    2.25em -.95em 0 -.065em $background,
    3.7em -2.4em 0 .25em $middle,
    2.25em -.95em 0 .25em $red,
    
    /* left - vertical */
    2.25em -3.55em 0 -.065em $background,
    2.25em -3.55em 0 .25em $orange,
    2.25em -.95em 0 .25em $orange,
    
    /* right - cross */
    5.155em -.95em 0 -.065em $background,
    5.155em -.95em 0 .25em $purple,
    
    /* right - vertical */
    5.155em -3.55em 0 -.065em $background,
    5.155em -3.55em 0 .25em $cyan,
    5.155em -.95em 0 .25em $cyan
  ;
}

h1:hover {
  -webkit-filter:grayscale(.65);
  filter:grayscale(.65);
}

h1:before,
h1:after,
h1 span:before,
h1 span:after {
  position:absolute;
  content:'';
  width:1em;
}

/* left - vertical */
h1:after {
  z-index:-2;
  height:2.55em;
  top:-3.25em;
  left:2em;
  background:$orange;
}

/* left - cross */
h1:before {
  z-index:-1;
  height:2em;
  top:-2.45em;
  left:2.76em;
  background:$red;
  transform:rotate(45deg);
}

h1 span {
  position:absolute;
  left:6.475em;
  top:0;
  color:#a3a2a2;
}

/* right - vertical */
h1 span:after {
  z-index:-2;
  height:2.55em;
  top:-3.25em;
  left:-1.57em;
  background:$cyan;
}

/* right - cross */
h1 span:before {
  z-index:-1;
  height:2em;
  top:-2.45em;
  left:-2.325em;
  background:$purple;
  transform:rotate(-45deg);
}