Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

1 files changed, 440 insertions, 0 deletions

diff --git a/design/sass/v6/_768.sass b/design/sass/v6/_768.sass
new file mode 100644
index 0000000..9c4f8b8
--- /dev/null
+++ b/design/sass/v6/_768.sass
@@ -0,0 +1,440 @@
+//768px 
+@media only screen and (min-width: 768px)
+
+    //****************  Masthead  ************************
+    
+    header[role="banner"]
+        margin-top: 2em
+        height: 60px
+        padding-bottom: 12px
+        border-bottom: 1px solid $brown
+        margin-bottom: 2em
+        h1
+            float: left
+            width: 160px
+            margin-top: -12px
+        h2
+            background: url('/media/img/text.png') 0 0 no-repeat
+            margin-top: 5px
+            float: left
+        nav[role="navigation"]
+            border: none
+            float: left
+            margin-left: 2em
+            ul
+                margin-top: 14px
+    
+    #breadcrumbs
+        text-align: left
+
+
+    //writing archives
+    .archive
+        article
+            margin-bottom: 2em
+            padding-bottom: 2em
+            border: none
+        h1, p
+            float: left
+            text-align: left
+            margin: 0
+        p
+            line-height: 1.25em
+        h1
+            line-height: 2.4em
+            margin-top: .15em
+            width: 100%
+        .dateline
+            clear: left
+            width: 38%
+            
+        .hyphenate
+            text-align: justify
+            width: 38%
+            margin-top: .5em
+            font-size: 1em
+        time
+            display: inline
+            float: right
+        img
+            float: right
+            width: 56%
+    .home
+        article
+            clear: both
+            min-height: 300px
+            h1
+                margin-top: 2em
+                text-align: left
+            .dateline
+                text-align: left
+            img
+                margin-bottom: 2em
+                margin-left: 2em 
+                float: right
+    //Photos
+    #photo-galleries
+        margin: 0 auto
+        padding-left: 12px
+        width: 100%
+        img
+            width: auto
+        .legend
+            width: 291px
+        li
+            float: left
+            margin-right: 16px
+    #photo-galleries:after
+        content: "."
+        display: block
+        height: 0
+        clear: both
+        visibility: hidden
+    
+    //individual posts
+    .single
+        article
+            width: 35.625em
+            margin: 4em auto
+            header
+                width: 35.625em
+                h1
+                    font-size: 2em
+                    text-align: left
+                    margin: 0 0 .675em 0
+                aside, time
+                    text-align: left
+    #code article h1, #contact article h1
+        font-size: 2em
+        text-align: left
+        margin: 0 0 .675em 0
+    .drop
+        font-size: 4.8em
+        padding: 35px 10px 5px 0
+    
+    // generic two col layout
+    .col
+        float: left
+        width: 38%
+        margin-right: 2em
+    .two
+        width: 53%
+    .top
+        margin-bottom: 2em
+        font-size: .875em
+        padding-bottom: 2em
+        border-bottom: #e3e3e3 1px solid
+
+    .top:after
+        content: "."
+        display: block
+        height: 0
+        clear: both
+        visibility: hidden
+        
+    //#page-navigation
+    //    margin-left: 10%
+    // specifics for two column posts
+    .double article[role="main"]
+        header
+            width: 9em
+            float: left
+            margin-left: 0
+            h1, aside
+                text-align: right
+                line-height: 1.1em
+                margin-top: 16px
+            h1
+                font-size: 1.875em
+            time
+                display: block
+                text-align: right
+        .col
+            margin-left: 1.25em
+            width: 34%
+        .sec
+            margin-right: 0
+            margin-left: 1em
+        .narrow
+            width: 35.625em
+            margin: 0 auto
+        //#page-navigation
+        //    margin-left: 10%
+    
+    .post-body-single .legend
+        width: 98%
+    .post-body-single
+        p:first-of-type
+            font-size: 1.25em
+            line-height: 28px
+    #about .post-body-single
+        p:nth-of-type(1)
+            font-size: 1.063em
+    .addendum 
+        line-height: 25px
+        dt
+            margin-left: -30px
+            font-style: italic
+            padding-left: 30px
+            text-indent: -30px
+            margin-bottom: .5em
+        dd
+            margin-left: 0
+    h4.notes
+        text-transform: uppercase
+        font-size: 1em
+    .pullquote
+        width: 10em
+        margin: 0 1em 1em -2em
+        font-style: italic
+        font-size: 1.3em
+        float: left
+        line-height: 1.6em
+    //#page-navigation
+      //  margin-left: 15%
+    .numeral
+        display: block
+        font: bold 1.2em Helvetica, Verdana, sans-serif
+        margin-bottom: 0
+        margin-top: 60px
+    
+    .post-body-single h3
+        font-size: 1.6em 
+        line-height: 1.2em
+        font-weight: normal
+
+
+    .notes
+        main h1
+            float: none
+            margin-bottom: 1em
+            width: 100%
+        main
+            max-width: 600px
+            margin-left: auto
+            margin-right: auto
+            margin-bottom: 5em
+        article footer
+            margin-top: 1em
+        article p
+            float: none
+        .note--location
+            float: left
+        .note--date
+            float: right 
+        .note--twitter
+            clear: both
+            float: right
+            padding-top: 1em
+        time
+            display: inline
+            float: right
+    .permalink
+        main
+            margin-top: 5em
+            
+    //map
+    #map-canvas
+        height: 400px
+        
+    //about
+    #about img
+        width: auto
+        clear: both
+    
+    footer[role="contentinfo"]
+        font-size: 110%
+        nav
+            border: none
+            li
+                margin: 0 .5em
+    
+    //******************************************************
+    //******************************************************
+    //**********         DARK PAGES           **************
+    //******************************************************
+    //******************************************************
+    .dark
+        header[role="banner"]
+            h2
+                background: url('/media/img/text.png') 0 -61px no-repeat 
+    
+        .park
+            position: relative
+            display: block
+            margin: 2em 0 2em 0
+            h1
+                display: block
+                position: absolute
+                top: 0px
+                background: $brown
+                z-index: 1000
+                +transparent_class
+                color: white
+                margin: 0
+                width: 100%
+                text-align: left
+                line-height: 2em
+                font-size: 2em
+                padding-left: .25em
+                
+            .figure
+                position: relative
+                border: none
+            .legend 
+                position: absolute
+                bottom: 0
+                width: 100%
+                margin: 0
+                background: $brown
+                +transparent_class
+                h2
+                    font: normal 1.2em/2.6 Helvetica, Verdana, sans-serif
+                    color: white
+                    margin: 0 0 0 1em
+                    float: left
+                    padding: .3em 0
+            .legend:after
+                content: "."
+                display: block
+                height: 0
+                clear: both
+                visibility: hidden
+            .buttons
+
+                margin: .5em 10px 0 0
+                line-height: 2.6em
+                float: right
+                li
+                    margin: 0 .25em
+                    font-size: 10px
+                a
+                    font-weight: bold
+                    padding: 0.875em 1.75em 0.75em
+                    background: #463215
+                    color: white
+                    -moz-border-radius: 25px
+                    -webkit-border-radius: 25px
+                    border-radius: 25px
+                    &:hover
+                        background: $orange
+
+            
+
+
+    
+    
+    
+    //******************************************************
+    //******************************************************
+    //**********         BLACK PAGES           **************
+    //******************************************************
+    //******************************************************
+
+    .black
+        header[role="banner"]
+            border-bottom: 1px #ccc solid
+            h2
+                background: url('/media/img/text.png') 0 -121px no-repeat
+        h6
+            display: block
+            text-align: center
+            text-transform: uppercase
+            font-size: .625em
+            margin: 0 0 1.25em 0
+            a
+                color: #b5b5b5
+            a:hover
+                color: $orange
+        #slides
+            article
+                position: relative
+            img
+                display: block
+                margin: 0 auto
+            .v
+                width: auto
+        .photo-options, .map-link
+            display: block
+        .figcaption
+            margin: 0
+            padding: 1em 0 1em 0
+            h3
+                float: left
+                padding: 0
+                font-weight: normal
+            .caption
+                border-right: 1px solid #1f1f21
+                width: 58%
+                float: left
+                padding-right: 1em
+                p
+                    margin-left: .5em
+                    font-size: .875em
+                    clear: both
+            .map-link
+                float: right
+                background: #211d19
+                line-height: 1em
+                color: white
+                text-align: center
+                text-transform: uppercase
+                margin: 0 .25em
+                font: normal .75em Helvetica, Verdana, sans-serif
+                padding: .5em 1em
+                -moz-border-radius: 1em
+                -webkit-border-radius: 1em
+                border-radius: 1em
+            .map-link:hover
+                background: $orange
+            .photo-options
+                float: left
+                margin-left: 1em
+                p
+                    font: normal .75em Helvetica, Verdana, sans-serif
+                    color: #414144
+                    line-height: 1.5em
+                    a
+                        color: #414144
+                        font-weight: normal
+                    a:hover
+                        color: $orange
+            li
+                display: inline
+                margin: 0 .25em
+                font: normal 1em Helvetica, Verdana, sans-serif
+            a
+                font-weight: bold
+            p   
+                margin: 0 1em
+                color: #74757A
+                font-size: 1em
+        .figcaption:after
+            content: "."
+            display: block
+            height: 0
+            clear: both
+            visibility: hidden
+    
+    
+        .map-container
+            //clear: left
+            width: 469px
+            height: 392px
+            position: absolute
+            bottom: 100px
+            left: 20px
+            z-index: 2000
+            margin: 0
+            padding: 0
+            background: url("/media/img/mapbg.png") no-repeat top left
+    
+        .map-wrapper
+            width: 400px
+            height: 328px
+            position: absolute
+            bottom: 27px
+            margin: 0px 0 0 44px
+        footer[role='contentinfo']
+            nav
+                border: none