Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

1 files changed, 318 insertions, 0 deletions

diff --git a/design/sass/v6/_typography.sass b/design/sass/v6/_typography.sass
new file mode 100644
index 0000000..64f25fc
--- /dev/null
+++ b/design/sass/v6/_typography.sass
@@ -0,0 +1,318 @@
+// font-sizes:
+// base: 16px = 1em
+// 10px = .625em
+// 12px = .75em
+// 14px = .875em
+// 16px = 1em
+// 17px = 1.0625em (body text in articles)
+// 18px = 1.125em
+// 24px = 1.5em
+// 30px = 1.875em
+// 32px = 2em
+
+ol, ul, li, dl
+    list-style: none
+    margin: 0
+    padding: 0
+    border: 0
+    outline: 0
+    background: transparent
+
+blockquote, q
+    quotes: none
+hr
+    display: none
+\:focus
+    outline: 0
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
+    display: block
+    margin: 0
+    padding: 0
+
+// 1.ROOT
+
+html
+    overflow-y: scroll
+    background: rgb(255, 255, 255) /*url(../img/grid.jpg) 50% 0 repeat-y*/
+    border-top: 3px $brown solid
+
+body
+    margin: 0 auto
+    padding: 0
+    width: 90%
+    font: normal 100% ff-meta-serif-web-pro, unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
+    color: $brown
+    background-color: transparent
+    
+
+// 2.HEADINGS
+
+h1, h2, h3, h4, h5, h6
+    font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+
+h1
+    font-size: 1.875em
+    line-height: 1.3em
+    font-weight: normal
+
+h2
+    margin-bottom: .75em
+    font-size: 1.5em /* 36 / 16 = 2 */
+    line-height: 1.5
+    font-weight: normal
+
+h3
+    margin-bottom: 1em
+    font-size: 1.6em
+    line-height: 1.5
+
+h4
+    margin-bottom: 1.25em
+    font-size: 1.25em /* 20 / 16 = 1.25 */
+    line-height: 1.25
+
+h5
+    margin-bottom: 1.5em
+    font-size: 1em /* 16 / 16 = 1 */
+
+h6
+    font-size: 1em /* 16 / 16 = 1 */
+
+// 3.TYPOGRAPHY 
+
+p
+    font-size: 1.0625em /* 17px / 16px */
+    line-height: 1.5em /* 24px / 16px */
+    margin: 1em 0 0
+
+ul, ol
+    margin: 0 0 1.5em -24px
+    padding-left: 24px
+
+ul
+    list-style-type: disc
+
+ol
+    list-style-type: decimal
+
+li
+    ul, ol
+        margin: 0
+        font-size: 1em /* 16 / 16 = 1 */
+
+dl, dd
+    margin-bottom: 1.5em
+
+dt
+    font-weight: normal
+
+
+b, strong
+    font-weight: bold
+
+i, em
+    font-style: italic
+
+footer p
+    font-size: .625em
+    text-align: center
+a
+    text-decoration: none
+    color: $brown
+    -webkit-transition: color 0.3s ease-out
+    -moz-transition: color 0.3s ease-out
+    -o-transition: color 0.3s ease-out
+    -ms-transition: color 0.3s ease-out
+    transition: color 0.3s ease-out
+    &:hover
+        color: $orange
+sup
+    font: normal .625em Helvetica, Verdana, sans-serif
+small
+    font: normal .75em Helvetica, Verdana, sans-serif
+
+blockquote
+    font-style: italic
+    font-size: 1em
+    line-height: 1.625em
+    p
+        font-size: 1em
+    cite
+        font-style: normal
+img 
+    border: 10px $brown solid
+
+pre
+    margin-bottom: 1.5em
+    white-space: pre
+    white-space: pre-wrap
+    word-wrap: break-word
+    
+pre, code
+    font: .875em 'andale mono', 'lucida console', monospace
+    line-height: 1.5
+    
+//Classes
+
+//.dateline, .breadcrumbs li, .geo, .legend h3, time
+
+.bl, time, #photo-galleries h1
+    text-transform: uppercase
+    font-size: 11px
+    letter-spacing: 1px
+
+.drop
+    font-size: 3em
+    float: left
+    display: block
+    padding: 18px 10px 5px 0
+    overflow: visible
+.double .drop, .drop-small
+    font-size: 3.1em
+    display: block
+    float: left
+    padding: 16px 8px 5px 0
+    overflow: visible
+.button 
+    display: block
+    margin-top: 8px
+    a    
+        padding: 9px 14px 7px 14px
+        font-weight: bold
+        line-height: 25px
+        text-transform: uppercase
+        background: #d7d7d7
+        color: #666 !important
+        -moz-border-radius: 25px
+        -webkit-border-radius: 25px
+        border-radius: 25px
+        font: bold 10px Helvetica, Verdana, sans-serif
+        width: auto
+    a:hover
+        background: $orange
+        color: white !important
+.alert
+    color: #ff3530
+//Pagination
+//next previous table
+#page-navigation
+    margin: 24px auto
+    strong
+        display: block
+        text-align: right
+        margin-top: 1px
+        text-transform: uppercase
+        font-size: .75em
+        letter-spacing: .1625em
+        font-weight: normal
+        font-style: normal
+
+//pagination in archives
+#pagination
+    margin-top: 1em
+    border-top: 1px $brown dotted
+    border-bottom: 1px $brown dotted
+    text-align: center
+    font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+    padding: .25em 0
+    ul
+        margin-bottom: 0
+    li
+        display: inline
+        text-align: center
+
+// 4.LINKS 
+
+a
+    outline: none
+    color: #111
+    text-decoration: none
+    &:visited
+        outline: none
+        color: #111
+        text-decoration: none
+    &:hover
+        outline: none
+        color: $orange
+        text-decoration: none
+    &:active, &:focus
+        outline: none
+        color: rgb(0, 0, 0)
+
+/* 5.FIGURES & IMAGES
+
+figure
+    margin-bottom: 1.5em
+    img, object, embed
+        margin-bottom: .75em
+        max-width: 100%
+
+figcaption
+    display: block
+    font-weight: normal
+
+// 6.TABLES
+
+table
+    border-collapse: collapse
+    border-spacing: 0
+    margin-bottom: 1.4em
+    width: 100%
+    font-size: .875em
+    /* 14 / 16 = .875
+
+th
+    font-weight: bold
+    padding: .25em 10px .25em 5px
+
+td, caption
+    padding: .25em 10px .25em 5px
+
+tfoot
+    font-style: italic
+
+caption
+    background-color: transparent
+
+// 14.GLOBAL OBJECTS 
+
+.clearfix
+    zoom: 1
+    &:before, &:after
+        content: "\0020"
+        display: block
+        height: 0
+        overflow: hidden
+    &:after
+        clear: both
+
+.hide
+    display: none
+    
+///* 15.VENDOR-SPECIFIC
+
+body
+    -webkit-text-size-adjust: 100%
+    -ms-text-size-adjust: 100%
+
+a:link
+    -webkit-tap-highlight-color: rgb(52, 158, 219)
+
+::-webkit-selection
+    background: rgb(23, 119, 175)
+    color: rgb(250, 250, 250)
+    text-shadow: none
+::-moz-selection
+    background: rgb(23, 119, 175)
+    color: rgb(250, 250, 250)
+    text-shadow: none
+::selection
+    background: rgb(23, 119, 175)
+    color: rgb(250, 250, 250)
+    text-shadow: none
+
+
+.ie7 img, .iem7 img
+    -ms-interpolation-mode: bicubic
+