<div class="container">
  <h1 class="row skew-title">  
    <span>S</span><span>K</span><span>E</span><span>W</span><span>E</span><span class="last">D</span>
    &nbsp; 
    <span>T</span><span>E</span><span>X</span><span class="last">T</span>
    &nbsp;
    <span class="alt">C</span><span class="alt">S</span><span class="alt">S</span><span class="alt last">3</span>
  </h1>
  <p class="row row--intro">Add some depth to page titles with CSS3 'SkewY' transform and optional JS hover.</p>
</div>

skew-angle = 15deg
default-bg = darken(#2896d7, 40%)
alt-bg     = darken(#f06826, 20%)
alt-bg     = darken(#c82672, 10%)
alt-bg     = darken(desaturate(#f65429, 33%), 20%)
panel-x    = 40px
panel-y    = 50px
contrast   = 15%

body
  margin-top: 180px
  background-color: #112
  background-color: darken(#2896d7, 70%)
  font-family: Roboto, 'helvetica neue', Helvetica, Arial, sans-serif

.container
  width: 800px
  margin: auto

.row
  position: relative
  height: 50px  
  z-index: 1
  clear: both
  margin-bottom: 30px
  text-align: center

.row--intro
  padding-top: 20px  
  font-size: 16px
  line-height: 28px
  font-weight: 300
  color: #fff
  opacity: 0.4

  span
    font-size: 11px

.skew-title
  font-size: (panel-y / 2)

.skew-title span
  position: relative  
  display: inline-block  
  width: panel-x
  height: panel-y
  margin: auto
  z-index: 2
  text-align: center
  color: #fff
  font-family: 'roboto condensed'
  font-weight: 700
  font-size: (panel-y / 1.4) 
  line-height: panel-y 
  transform: skewY(-(skew-angle))
  transform-origin: 0 100%
  transition: all 0.2s
  cursor: default
    
  &:after,
  &:before
    display: block
    top: 0
    left: 0
    width: panel-x
    height: panel-y
    position: absolute
    background: default-bg
    content: ' '
    z-index: -1
    transition: all 0.2s
    
  &:before
    background: rgba(0,0,0,0.1)
    transform: skewY((skew-angle))
    transform-origin: 0 0
  
  &:nth-child(even)
    background-color: darken(default-bg, contrast)
    transform: skewY(skew-angle)
    transform-origin: 100% 100%
    color: darken(#fff, contrast)
    
    &:after
      background-color: darken(default-bg, contrast)
    
    &:before
      transform-origin: 100% 0
      transform: skewY(-(skew-angle))
  
  &.flat
    transform: skewY(0)
    color: #fff
    &:before
      transform: skewY(0)  
    &:nth-child(even) 
      &:after
        background-color: default-bg
   
  &.alt
    &:after
      background-color: alt-bg
    &:nth-child(even)
      &:after
        background-color: darken(alt-bg, contrast)
    &.flat
      &:nth-child(even)
        &:after
          background-color: alt-bg
      
      

# We must use JS as we need to select previous
# elements which can't be done with CSS.

$('.skew-title').children('span').hover (->
  $el = $(this)
  n = $el.index() + 1
  $el.addClass 'flat'
  if n % 2 is 0
    $el.prev().addClass 'flat'
  else
    unless $el.hasClass 'last'
      $el.next().addClass 'flat'
), ->
  $('.flat').removeClass 'flat'