rickbutterfield.com first draft

by Rick Butterfield

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
  <script type="text/javascript" src="//use.typekit.net/cbf2nwz.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  <title>JS Bin</title>
</head>
<body>
  <header>
    <div class="wrap padding-zero cf">
        <span class="logo alpha float-left">
          <a href="#">Rick Butterfield</a>
        </span>
        <nav class="nav float-right">
            <ul class="main-menu">
                <li class="main-menu-item"><a href="#">About</a></li>
                <li class="main-menu-item"><a href="#">Portfolio</a></li>
                <li class="main-menu-item"><a href="#">Blog</a></li>
            </ul>
        </nav>
    </div>
  </header>
  <section class="wrap-full masthead">
      <img src="http://placehold.it/2000x500/00a1de/fff"/>
  </section>
  <section class="wrap padded">
    <h1 class="giga no-margin-bottom">HTML Ipsum Presents</h1>
      <div class="gamma lite margin-bottom">Posted on Friday December 28th</div>
    
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut...

CSS

/* Props to @csswizardry/csswizardry.com for this awesome CSS magic! */

/*------------------------------------*\
    $RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart... As per: csswizardry.com/2011/10/reset-restarted
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video
{
  margin: 0;
  padding: 0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section
{
  display: block;
}

h1, h2, h3, h4, h5, h6
{
  font-size: 100%;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
}

strong, b, mark
{
  font-weight: bold;
  font-style: inherit;
}

em, i, cite, q, address, dfn, var
{
  font-style: italic;
  font-weight: inherit;
}

abbr[title], dfn[title]
{
  cursor: help;
  border-bottom: 1px dotted;
}

ins
{
  border-bottom: 1px solid;
}

a, u, ins
{
  text-decoration: none;
}

del, s
{
  text-decoration: line-through;
}

pre, code, samp, kbd
{
  font-family: "Consolas", "Monaco", monospace;
}

small
{
  font-size: 0.75em;
}

img
{
  border: none;
  font-style: italic;
  /*display: block;*/
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
}

input,
select, option, optgroup,
textarea
{
  font: inherit;
}

/* apply a natural box layout model to all elements */
*
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}





/*------------------------------------*\
    $SHARED
\*------------------------------------*/
/* Common margin-bottom for vertical rhythm. */
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
p,
table,
form,
pre,
hr,
.source
{
  margin-bottom: 16px;
}

/* Default...

JavaScript

var calculateAge = function(birthday) {
  var now = new Date();
  var past = new Date(birthday);
  var nowYear = now.getFullYear();
  var pastYear = past.getFullYear();
  var age = nowYear - pastYear;
  $('.age').html(age);
  $('.year').html(nowYear);
};

$(document).ready(function() {
    $('blockquote').addClass('cf');

});