gistfile1.txt

<section class="hero-unit">
  <article>My name is Ricardo Vazquez.</article>
  <article>I'm a Product Designer in Toronto.</article>
  <article>My latest project is: <a href="#">Dear Jen.</a></article>
  <article>My latest thoughts are: <a href="http://vazquez.svbtle.com/my-2013">My 2013</a>.</article>
</section>



html
  overflow-y: scroll

body
  position: relative
  box-sizing: border-box
  moz-box-sizing: border-box
  font-family: $base-font-family
  font-weight: $light
  font-size: $base-font-size
  color: $spotlight-color
  background: #FFFFFD
  &:before, &:after
    content: ""
    position: absolute
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($brand-color), to($accent-color))
    background-image: -webkit-linear-gradient($brand-color, $accent-color)
    background-image: -moz-linear-gradient($brand-color, $accent-color)
    background-image: -o-linear-gradient($brand-color, $accent-color)
    top: 0
    bottom: 0px
    width: 8px
  &.landing
    background-color: $brand-color
    background-image: linear-gradient($brand-color, $accent-color)
    background-repeat: no-repeat
    background-attachment: fixed
    // background-image: linear-gradient(#c01b17, #CDCBC3)
    // background-image: linear-gradient(#053640, #3889C0)
    &:before, &:after
      position: relative // hiding border


.hero-unit
  margin: 4em 0 0 1em
  article
    width: 100%
    font-size: 0px // To hide text before
    line-height: 1.8em //32px
    letter-spacing: -0.02em
    +kulturista(100, white)
    a
      text-decoration: none
      color: inherit
      border-bottom: 1px dotted white
      transition: border-bottom 0.3s ease-in
      &:hover
        border-bottom: 1px dotted transparent




nav
  position: relative
  top: -2.5em
  padding: 0 0 0 1em
  transition: top 1.3s ease-in, opacity 1.5s ease-in
  +opacity(0)
  &.visible
    top: 0
    +opacity(1)
  ul li
    display: inline-block
    padding: .8em 1em
    color: white
    a
      outline: none
      text-decoration: none
      font-size: 1.05em
      border-bottom: 1px dotted transparent
      transition: border-bottom 0.2s ease-in, color 0.2s ease-in
      +adelle(400, $base-color)
      &:hover
        border-bottom: 1px dotted $base-color
      &.active
        border-bottom: 1px dotted $base-color
      &.landing
        transition: border-bottom 0.2s ease-in, color 0.2s ease-in
        +adelle(200, rgba(white,0.7))
        &:hover
          border-bottom: 1px dotted white
          color: white


---- js

(function() {
  $(function() {
    "use strict";
    $(".hero-unit article").eq(0).hide().delay(500).fadeIn(1000);
    $(".hero-unit article").eq(1).hide().delay(1500).fadeIn(1000);
    $(".hero-unit article").eq(2).hide().delay(2500).fadeIn(1000);
    $(".hero-unit article").eq(3).hide().delay(3500).fadeIn(1000);
    $(".hero-unit article").fitText(1.7, {
      minFontSize: "20px"
    });
    $(".heading").fitText(0.9);
    $("nav").delay(2000).addClass("visible");
  });

}).call(this);