

@import "compass";
@import "variables";
@import "mixins";
@import "extensions";

@include establish-baseline;
@include scrollbar(3px, #666, rgba(white, 0.1) );

body{

  font-family: 'PT Serif', serif;
  color: #555;
  padding: $base-font-size;
  padding: 0;
  margin: 0;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  @include adjust-leading-to($leading);

  /* Responsive typography, yay! */
  font-size: 80%;
  @include respond-to(500px){ font-size: 100%; }

  h1{
    font-family: 'Source Sans Pro', serif;
  }

  h1, h2, h3, h4, h5, h6{
    color: #333;
  }

  /* Page-wrap styles.  */
  article.page{
    -webkit-transform-origin:bottom center;

    &.hidden { display: none; }

    &.next{
      .big-image { cursor:pointer; } 
      .big-image .inner { opacity: 1; } 
    }

    &.content-hidden{
      .content{ display: none; }
    }

    /* Class applied when when page fades away. */  
    &.fade-up-out{
      opacity: 0;
      @include transform( scale(0.8) translate3d(0, -10%, 0) );
      @include transition( all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000) );
    }

    &.easing-upward{
      @include transition( all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000) );
    }

    /* The large image that accompanies every post. */
    .big-image{    
      @extend .big-image;
      @extend .stretchy-bg;

      font-size: 80%;
      @include respond-to(500px){ font-size: 100%; }

      .inner{
        position: relative;  
        width: 100%; 
        height: 100%;
        text-align: center;
        opacity: 0;
        @include text-shadow(1px 1px 5px rgba(black, 0.2) );
        @include transition( all 0.1s ease );

        .fader{    
          width: 100%; 
          height: 100%;
          background: rgba(black, 0.3);
      
          .text{    
            position: absolute;
            top: 50%; left: 50%; 
            width: 80%;
            @include transform( translateX(-50%) translateY(-50%) );

            a, h1, h2{ color: white; }

            a{ 
              color: white; 
              border-bottom: 1px solid white;
              text-decoration: none;
              font-style: italic;
              @include adjust-font-size-to(16px);
            }

            h1{
              margin: 0;
              @include rhythm(1, 0, 0, 0, 60px);
              @include adjust-font-size-to(60px);
            }

            h2{
              margin: 0;
              font-style: italic;
              font-weight: normal;
              @include rhythm(1, 0, 0, 0, 30px);
              @include adjust-font-size-to(30px);
            }

          }
        }
      }
    }

    /* The content. */ 
    .content{ 
      padding: 0 3em;
      @extend .container; 

      h3{
        color: #999;
        font-family: 'Source Sans Pro', serif;
        font-weight: 400;
        @include rhythm(8, 0, 0, 1, 16px);
        @include adjust-font-size-to(16px);
      }

      h1{ 
        @include rhythm(0, 0, 0, 2, 50px);
        @include adjust-font-size-to(50px);
      }

      h2.description{ 
        font-weight: normal; 
        font-style: italic;
      }
      p:last-child{ margin-bottom: rhythm(10); };
    }

  }

}