a(class='logo', href='http://www.schantz.com/')
  .first sch
  .icon
    .triangle
    .triangle-small
  .last ntz 
  
View Compiled
@import compass

$brand-color-light: #FF8600
$brand-color-dark: #717171
  
html, body    
  font-family: 'Montserrat', sans-serif
  font-size: 20px
  @media (min-width: 500px)
    font-size: 50px
  @media (min-width: 1100px)
    font-size: 120px
    
  margin-top: 40px
  text-align: center  
a
  text-decoration: none
  
$triangle-size: 1em
$triangle-small-size: 0.5em

.logo  
  &:hover
    color: $brand-color-light
  &:hover .icon
    transform: translateX(-0.5em) scaleX(-1)
    
        
  transition: all 1s
  display: inline-block
  color: $brand-color-dark
  text-transform: uppercase
  letter-spacing: 0.5em
  font-weigth: 700      
  > .first
    display: inline-block    
  > .icon
    transition: all 0.5s      
    position: relative
    top: 0.09em
    margin-left: -0.70em
    margin-right: -0.80em
    display: inline-block
    > .triangle
      transition: all 0.5s      
      position: relative
      width: 0
      height: 0
      border-style: solid
      border-width: $triangle-size/2 0 0 $triangle-size
      border-color: transparent transparent transparent $brand-color-light
      transform: rotate(90deg * 0.33) 
    > .triangle-small
      transition: all 0.5s      
      width: 0
      height: 0
      border-style: solid
      border-width: $triangle-small-size/2 0 0 $triangle-small-size
      border-color: transparent transparent transparent $brand-color-dark
      transform: rotate(90deg * 0.33 + 90deg)        
      position: relative
      left: -0.34em
      top: -0.08em
  > .last
    display: inline
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.