a(class='logo', href='http://www.budget.dk/')
  .logo-icon
    .triangle.triangle-left
    .triangle.triangle-right
  .logo-title
    | Budget
    .trademark
      | ®
View Compiled
@import compass

// adjustable values
$brand-icon-left-color: #ED5505
$brand-icon-right-color: #F78B00
$brand-color: #00285F
$icon-height: 2.5em
$transition-delay: 1s

//calculated values
$icon-width: $icon-height * 1.5 
$logo-width: $icon-width * 4.8

html 
  box-sizing: border-box
  
*,*:before,*:after 
  box-sizing: inherit

html, body
  xbackground: #333
  
.logo 
  &:hover .triangle-left
    border-color: $brand-icon-right-color transparent transparent transparent
  &:hover .triangle-right
    border-color: transparent transparent $brand-icon-left-color transparent
  &:hover .logo-title
    opacity: 0.8
      
  @media (max-width: 318px)
    transform: scale(0.5)
    
  @media (min-width: 480px)
    transform: scale(1.5)
  
  @media (min-width: 600px)
    transform: scale(2)
    
  @media (min-width: 880px)
    transform: scale(3)
    
  @media (min-width: 1170px)
    transform: scale(4)

  text-decoration: none
  color: $brand-color  
  font-family: sans-serif
  width: $logo-width      
  margin: 0 auto
  margin-top: 5em
  position: relative
  xbackground: yellowgreen
  display: block
  
.logo-icon  
  width: $icon-width
  height: $icon-height
  background: white
  display: inline-block
  position: relative
  xoverflow: hidden

.triangle
  width: 0
  height: 0
  border-style: solid
  position: absolute
  top: 0
  transition: all $transition-delay
  
.triangle-left
  left: 0
  border-width: $icon-height $icon-width 0 0
  border-color: $brand-icon-left-color transparent transparent transparent
  
.triangle-right
  right: 0
  border-width: 0 0 $icon-height #{$icon-width/2}
  border-color: transparent transparent $brand-icon-right-color transparent

.logo-title
  transition: all $transition-delay
  position: relative
  font-size: $icon-height * 1.4
  display: inline-block
  line-height: 1
  padding-left: 0.1em
  padding-right: 0.2em
  font-family: 'Montserrat Alternates', sans-serif
  
  .trademark
    transition: all $transition-delay
    font-size: 25%
    position: absolute
    top: 0
    right: 0
    line-height: 2

 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.