doctype html
html lang="en"
  head
    meta charset="UTF-8"
      title Calendar
      link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700" rel="stylesheet" type="text/css"
  body
    header role="banner"
      time
        | August
        em
          | 2013
      a href="#"
        | Add event
    section role="main"
      ul.m-box--weeks
        li Sun
        li Mon
        li Tue
        li Wed
        li Thu
        li Fri
        li Sat
      ul.m-box--date
        li.l-date--passed 28
        li.l-date--passed 29
        li.l-date--passed 30
        li.l-date--passed 31
        li 1
        li 2
        li 3
      ul.m-box--date
        li 4
        li 5
        li 6
        li.l-date--event data-event="15:00 - New Haircut"
          i.m-bullet--event>
          | 7
        li 8
        li 9
        li 10
      ul.m-box--date
        li 11
        li 12
        li 13
        li 14
        li 15
        li 16
        li 17
      ul.m-box--date
        li 18
        li 19
        li 20
        li 21
        li 22
        li 23
        li 24
      ul.m-box--date
        li 25
        li 26
        li 27
        li 28
        li 29
        li 30
        li 31

@import compass

/* Dirty ! Dirty ! Dirty ! (Code smell according @_flexbox) */

*
  margin: 0 
  padding: 0

html
  background: #249991

body 
  margin: 5% auto 0
  width: 280px 

time 
  color: white 
  text-transform: uppercase
  font-weight: 300 
  font-size: 38px
  em 
    display: block
    font-weight: 300 
    font-style: normal 
    font-size: 16px

header 
  padding: 50px 0
  background: #4ecdc4 
  text-align: center 
  font-family: 'Roboto Condensed', sans-serif
  a 
    display: inline-block 
    padding: 5px 20px 
    border-radius: 20px 
    background: #44b3ab
    color: white 
    text-decoration: none 
    text-transform: uppercase 
    font-weight: 300 
    font-size: 12px
    transition: all .3s ease-in-out
    &:hover
      background: #249991
      color: #ccc

[role="main"] 
  overflow: hidden 
  padding: 15px
  background: white 
  font-family: 'Helvetica'

section 
  ul
    list-style-type: none
  li 
    position: relative 
    display: inline-block 
    float: left
    width: 35px 
    height: 35px 
    text-align: center 
    line-height: 35px 
    zoom: 1 
    *display: inline
.l-date--event
  cursor: pointer
  transition: background .3s ease-in-out
  &:hover 
    background: #efefef

.m-bullet--event
  position: absolute 
  top: 5px 
  right: 5px 
  display: block 
  width: 5px 
  height: 5px 
  border-radius: 50%
  background: #ff6b6b

.m-box--weeks 
  color: #e66b6b
  text-transform: uppercase 
  font-weight: bold 
  font-size: 10px

.m-box--date
  color: #555 
  font-size: 14px

.l-date--passed
  color: #bababa
  
.eventTip 
  position: absolute
  width: 150px
  left: 50%
  top: -125%
  margin-left: -75px
  background: #249991
  color: white
  &:before 
    content: '\25BE'
    position: absolute
    font-size: 25px
    color: #249991
    bottom: -19px
    left: 46%
  
   
    

$('.l-date--event').on('mouseenter', function(){
  var EventTip = $('<span class="eventTip" />');
  var EventDescribe = $(this).attr('data-event');
  EventTip.html(EventDescribe);
  $(this).append(EventTip);
});

$('.l-date--event').on('mouseleave', function(){
  $('.eventTip').remove();
});