Thematic 5 Typography

color scheme 2: orange and blue based on: http://www.colorschemer.com/schemes/viewscheme.php?id=9886

by helgatheviking

HTML

<link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
<div id="wrapper" class="hfeed">
        <div id="main">
        <div id="container">

           

          <div id="content">

                <div id="nav-above" class="navigation">

                

                    <div class="nav-previous"><a href="http://localhost/multi/third-post-goes-here/" rel="prev"><span class="meta-nav">&laquo;</span> Third Post Goes Here</a></div>

                    

                    <div class="nav-next"><a href="http://localhost/multi/forms-testing/" rel="next">Forms Testing <span class="meta-nav">&raquo;</span></a></div>

                    

                </div>

                    

                <div id="post-3629" class="post-3629 post type-post status-publish format-standard hentry category-uncategorized p publish author-kathy untagged is-full comments-open pings-open y2012 m04 d18 h20 alt slug-a-post-with-everything" >

                

                

                    <h1 class="entry-title">A Post with Everything</h1>

                    <div class="entry-meta">

    <span class="meta-prep meta-prep-author">By </span><span class="author vcard"><a class="url fn n" href="http://localhost/multi/author/kathy/" title="View all posts by kathy">kathy</a></span>

    <span class="meta-sep meta-sep-entry-date"> | </span>

    <span class="meta-prep meta-prep-entry-date">Published: </span><span class="entry-date"><abbr class="published" title="2012-04-18T20:14:31+0000">April 18, 2012</abbr></span>

    <span class="meta-sep meta-sep-edit">|</span> 

                        <span class="edit"><a href="http://localhost/multi/wp-admin/post.php?action=edit&amp;post=3629" title="Edit post">Edit</a></span>

</div><!-- .entry-meta -->
                     

                    <div class="entry-content">

                    

                        <section class="column width2 first stroke">
<h1>Title &mdash;...

CSS

/* temporary */
body { background: url(https://github.com/helgatheviking/Thematic5/raw/typography/library/grids/26px_grid_bg.gif); background-position: 0 0px }

/*
 * Typography Styles
 */

 /* default font */
 /* 16px base font size with 162.5% (26px) golden-ish, unitless line height and margin for vertical rhythm 
 /* Font-size unit is based on 16px browser default size */

body, button, input, select, textarea {font: 1em/1.625em Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif; color: #333333} 
body {-webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* headings */
/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */
h1, h2, h3, h4, h5, h6 {font-family:Futura, "Century Gothic", AppleGothic, sans-serif; color:#000000;text-shadow:1px 1px 1px rgba(0,0,0,.10)}

h1  {
    margin: 0 0 0.433em;
    font-size: 3.75em; /* 60px */
    line-height: 1.3em; /* 78px */
} 
h2 {
    margin: 0 0 0.5417em;
    font-size: 3em;  /* 48px */
    line-height: 1.0833em; /* 52px */
} 
h3 {
    margin: 0 0 0.7222em;
    font-size: 2.25em; /* 36px */
    line-height: 1.4444em; /* 52px */
} 
h4 {
    margin: 0 0 1.0833em;
    font-size: 1.5em; /* 24px */
    line-height: 1.0833em; /* 26px */
} 
h5 {
    margin: 0 0 1.2381em;
    font-size: 1.3125em; /* 21px */
    line-height: 1.2381em; /* 26px */
} 
h6 {
    margin: 0 0 1.4444em;
    font-size: 1.125em; /* 18px */
    line-height: 1.4444em; /* 26px */
} 

/* vertical rhythm on elements */
p, ul, ol, dl, pre, table, form {margin: 0 0 1.625em; }

/* quotes */
blockquote { margin:0 3em; font-style:italic; padding-left: 1.625em; border-left: .25em solid #000000}
blockquote em, blockquote i, blockquote cite { font-style:normal; }
blockquote.left { text-align:right; }
blockquote.right { text-align:left; }

/*lists*/
ul { list-style:disc; }
ol { list-style-type:decimal; }
ol ol { list-style:upper-alpha; }
ol ol ol { list-style:lower-roman;...