A Pen by Adam Henley.

Hat,-Moustache-&-Monocle.markdown

Hat, Moustache & Monocle

Inspired by a flier I saw on Facebook for a bar's 8th birthday party

A Pen by Adam Henley on CodePen.

License.

index.haml

#wrap
    #hat
    #monocle
    #moustache
        #left
        #right

style.less

@bg:black; @fg:white;
body{background-color:@bg;}
:after,:before{content:" ";position:absolute; display:block; background-color:@fg}

.circle(@d){ width:@d; height:@d; .border-radius(50%);}
.border-top-radius(@v){ .border-top-left-radius(@v); .border-top-right-radius(@v);}
.border-bottom-radius(@v){.border-bottom-left-radius(@v); .border-bottom-right-radius(@v);}

div{ background-color:@fg;}
@hat_width:170px;
@hat_height:100px;
#wrap{width: 300px;height:150px; 
      position:relative; 
    top:10px; right: 0; left:0;margin:auto; background-color:@bg;}

div#hat{ 
  .border-top-radius(30% 70%); 
  .border-bottom-radius(5%);  
  width:@hat_width; 
  height:@hat_height;  
}
div#hat:after,div#hat:before{ width:50px; height:18px; .border-radius(50%); top:(@hat_height - 21px);}
@brim_twist:20deg;
div#hat:before{ left:-38px;  .rotate(@brim_twist);}
div#hat:after{ left:(@hat_width - 13px); .rotate(-@brim_twist);}


#monocle{ 
    border:2px solid @fg; 
    background-color: @bg; 
    .circle(40px);
    margin-top:25px;
    margin-left:10px;
}

#monocle:before{
  width:8px; height:80px;
  border-top: 4px solid @fg;
  border-left: 2px solid @fg;
  background-color:transparent;
  left:0px; top:100% - 4px;
}

#moustache {
  position:absolute;display:block;
  margin-top:22%;
  background:transparent;
  width:@hat_width;
  overflow:show;
}

#moustache #left, #moustache #right{  
  position:absolute;
  width:95px; height:40px;
  top:0px;
}
#moustache #right{  
  border-radius:50% 50% 80% 70%;
  right:0;  
  .rotate( 10deg);
}
#moustache #left{  
  border-radius:70% 50% 50% 80%;
  left:0;  
  .rotate( -9deg);
}
#moustache > #right:after, #moustache > #left:after{  
  display:inline-block;
  background-color:@bg;
  height:20px; width:54%;
  top: -8px;
}
#moustache > #left:after{ border-radius:1% 50% 60% 50%; .rotate(-25deg); left:8%;}
#moustache > #right:after{ border-radius:50% 60% 50% 1%; right:5%; .rotate(25deg);}