<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div class="container">
    <span class="line-1">the</span>
    <span class="line-2">Vintage</span>
    <span class="line-3">typography experiment</span>
    <span class="line-5"><a href="https://github.com/codrops/Arctext">Archtext.js</a><a href="https://codepen.io/zambo/pen/jKEDp/">Codepen.io</a></span>
    <span class="line-6">2014</span>
</div>

@import compass

@import url(https://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One)
    
body
  background: #ffffff url(https://subtlepatterns.com/patterns/groovepaper.png) repeat
  color: #000000

.container
  font-family: 'Pacifico', cursive
  font-weight: 400
  position: relative
  margin: 80px auto
  width: 600px
  font-size: 30px
  text-align: center
  +opacity(0.8)

span
  display: block


.line-1
  position: relative
  &:before, &:after
    content: "\f005"
    font-family: FontAwesome
    position: relative
    font-style: normal
    font-weight: normal
    text-decoration: inherit
    font-size: 16px
    margin: -0 30px
    top: -5px
  
.line-2
  font-family: 'Changa One', sans-serif
  font-weight: 400
  text-transform: uppercase
  font-size: 90px
  letter-spacing: 15px
  margin: 0 0
  
.line-3
  font-family: 'PT Sans', sans-serif
  font-weight: 700
  font-size: 16px
  text-transform: uppercase
  margin: 70px 0 0
  position: relative
  letter-spacing: 6px
  
  &:before, &:after
    content: " "
    position: absolute
    width: 50px
    height: 5px
    border-top: 1px solid #222222
    border-bottom: 1px solid #222222
  &:before
    margin: 7px 0 0 -60px
  &:after
    margin: 7px 0 0 10px
  
.line-4
  width: 100%
  position: relative
  font-size: 18px
  margin: 50px 0 0
  //@include transform(rotate(-8deg))

  
.line-5
  margin: 20px 0 50px
  position: relative
  text-align: center
  margin: 50px auto
  display: block
  font-size: 20px
  a
    text-decoration: none
    display: inline-block
    text-align: left
    color: #222
    &:nth-child(1)
      text-align: right
      &:after
        content: "\f005 "
        font-family: FontAwesome
        font-style: normal
        font-weight: normal
        text-decoration: inherit
        position: relative
        font-size: 30px
        text-align: center
        width: 90%
        top: 4px
        margin: 0
        padding: 0 20px
      
  
.line-6
  font-family: 'PT Sans', sans-serif
  font-size: 16px
  letter-spacing: 5px
  &:before, &:after
    content: "\f068"
    font-family: FontAwesome
    font-style: normal
    font-weight: normal
    text-decoration: inherit
    position: relative
    font-size: 16px
    margin: 0 10px
    top: 2px

/* This demo Uses Acrtext.js
// https://github.com/codrops/Arctext/
// Inspiration from: https://blog.spoongraphics.co.uk/freebies/6-free-customizable-retrovintage-logos-emblems
*/

$(document).ready(function() {
  $(".line-2").arctext({radius: 700});
});