path: root/media/sass/base.sass

@import _reset.sass
@import _mixins.sass

// grid = 988 with 9 cols at 92px plus 20px gutters (via http://gridulator.com/)
// 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


html
    height: 100%

body
    font: normal 100% unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
    color: $brown
    margin: 0 1.125em
    min-height: 100%
    position: relative
    padding: 0
    //max-width: 61.75em      /* 988px / 16px = 61.75em */
    max-width: 20.9375em /* 3 cols @ 92px + 20px gutter  -- 335px / 16px = */
    background: white /* url('../img/988px-9col-92w-20gut.png') 217px 0 repeat-y */
    

/* ###################Typography############# */    
p
    font-size: 1.0625em /* 17px / 16px */
    line-height: 1.5em /* 24px / 16px */
    margin: 1em 0 0
footer p
    font-size: .625em
    text-align: center
a
    text-decoration: none
    color: $brown
    &:hover
        color: $orange
strong
    font-weight: bold

sup
    font: normal .625em Helvetica, Verdana, sans-serif
ul li 
    display: inline
    margin: 0 .125em

blockquote
    font-style: italic
    font-size: 1em
    line-height: 1.625em
    p
        font-size: 1em !important
div[role="main"]
    ul li
        display: block
        margin: .5em 0
.dateline, nav li, .breadcrumbs li, .geo, .legend h3
    text-transform: uppercase
    font-size: .75em
    letter-spacing: .0625em
.geo
    text-align: center
img 
    border: 10px $brown solid
    width: 100%
    height: auto


#featured-image img
    width: 95% /* 315 /  520 */
    
h1
    font: normal 1.875em Helvetica, Verdana, sans-serif
    letter-spacing: 0.5px
    text-align: center
article h1
    font: normal 1.5em Helvetica, Verdana, sans-serif
    letter-spacing: 0.5px
    text-align: center
    text-transform: none
    margin: 1.875em 0 .875em 0
#archive > h1
    font-weight: 700
    font-size: .75em
    text-transform: uppercase
    text-align: left

#archive 
    img
        width: auto
    p
        margin-top: 0
    time
        display: inline
.footnote
    font-size: .75em
    border-top: 1px $brown dotted
    margin-top: 1.5em
    margin-bottom: 0
    p
        line-height: 1.5em !important
#post-metadata 
    margin-top: 0
    border-top: 1px $brown dotted
    p
        font-size: .875em
        text-align: left
#pagination
    border-top: 1px $brown dotted
    border-bottom: 1px $brown dotted
    text-align: center
    padding: .25em 0
.top .col
    font-size: .875em
/* ######### layout small  ################*/

header[role="banner"]
    margin: 0 auto
    text-align: center
    h1
        background: url('../img/tree.png') 0 0 no-repeat
        text-indent: -9999px
        width: 151px
        height: 84px
        margin: 0 auto
    h2
        background: url('../img/text.png') 0 0 no-repeat
        text-indent: -9999px
        width: 184px
        height: 54px
        margin: 0 auto
nav[role="navigation"]
    margin: 1em auto .5em auto
    text-align: center
    border-top: 1px $brown dotted
    border-bottom: 1px $brown dotted
    width: 100%
    padding: .25em 0
    font-size: .875em
nav:after, footer:before, .archive article:after, #archive:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden
.dateline
    text-align: center
    time
        display: block

.postpic, .post-image
    float: left
    margin: 0 .625em .625em 0
    
.postpic, .postpicright
    width: auto
article img
    width: 95%
article object, article embed
    width: 100%
#breadcrumbs
    margin: 0 0 2em .75em
    font-size: .875em

article[role="main"]
    li
        display: block
        margin: .5em 0
/* misc classes */
.hide
    display: none

#writing-archive article
    border-bottom: 1px $brown dotted
    margin-bottom: 1.5em
    padding-bottom: 1.5em

//Photos
.figure
    position: relative
    margin: 0
    .legend
        display: block
        +transparent_class
        position: absolute
        bottom: 0
        left: 0
        font-size: 13px
        padding: 8px 0 8px 8px
        width: auto
        background: $brown
        color: #999999

#photo-galleries
    li
        margin: 8px
        position: relative
        display: block
        width: 100%
        margin-bottom: 30px
    .figure
        width: 100%
        margin: 0
        img
            width: 87%
    .legend
        padding: 10px
        color: #888888
        width: 85%
        +transparent_class
        line-height: 18px
        text-align: left
        margin-bottom: 5px
    h3
        color: white
        padding: 0
        margin: 3px 0
        font-size: .875em
    p
        margin: 0
// Maps

#map-canvas
    border: 10px $brown solid
    width: 95%
    height: 300px
.map-legend 
    h4
        font-size: 1em
        font-weight: bold
        margin: 1em 0 .25em
    li:after
        content: ","

//About page
    
#about 
    img
        width: auto
        float: left
        margin: 0 8px 8px 0
    h2
        font: normal 1.5em Helvetica, Verdana, sans-serif
        margin: 1em 0
    article[role="main"] a
        color: $orange
    section:after
        content: "."
        display: block
        height: 0
        clear: both
        visibility: hidden

.button
    display: block
    font-family: Helvetica, Verdana, sans-serif !important
    margin: 10px 10px 0 0
    width: auto
    font-size: 10px
    a
        padding: 9px 14px 7px 14px
        font-weight: bold
        line-height: 25px
        text-transform: uppercase
        background: #d7d7d7
        color: #666666
        -moz-border-radius: 25px
        -webkit-border-radius: 25px
        border-radius: 25px
    a:hover
        background: $orange
        color: white    
footer
    margin-top: 2em
footer[role="contentinfo"]
    nav
        text-align: center
        padding: .25em
        border-top: 1px $brown dotted
        border-bottom: 1px $brown dotted

.figure
    margin: 0
    position: relative

.legend
    background: $brown
    color: #999999
    display: block
    position: absolute
    bottom: 0
    width: auto
    +transparent_class

#post-body
    .legend
        width: 95%
        margin: 10px
        font-size: .875em

//special cases for the various strange formatting tricks on individual posts over the years

//numbered posts
.numeral
    display: block
    font: bold 1.2em Helvetica, Verdana, sans-serif
    margin-bottom: 0
    margin-top: 60px
    

.nfirst
    margin-top: 0 !important

//posts with elaborate footers:

#post-body .notes
    font: bold 1em Helvetica, Verdana, sans-serif
    text-transform: uppercase

#post-body .addendum
    font-size: 17px
    line-height: 25px
    dt
        font-style: italic
        margin: .675em
        margin:  0.8em 0 0 -30px !important
        padding-left: 30px
        text-indent: -30px
    dd
        margin: 0.8em 0 0

//posts with section headers

#post-body
    h3, h2
        font: normal 1.6em Helvetica,Verdana,sans-serif
        line-height: 1.2em
//pull quotes

#post-body
    .pullquote
        width: 10em
        margin: 0 1em 1em -6em
        font-style: italic
        font-size: 1.3em
        float: left
        line-height: 1.6em

/* ######### layout large  ################*/

@media only screen and (min-width: 800px)
    //main content container
    body
        max-width: 61.75em
        margin: 0 auto
    header[role="banner"]
        text-align: left
        clear: both
        border-bottom: $brown 2px solid
        height: 9.375em
        h1, h2
            float: left
            padding-top: 2.2em
            background-position: left bottom
            margin: 0 !important
        h2
            padding-top: 3.5em
            background: url('../img/text-wide.png') left bottom no-repeat !important
            margin-left: 1.7em !important
    nav[role="navigation"]
        width: 25em
        border: none
        padding-top: 7.3em
        padding-left: 15em
        a
            letter-spacing: 1px
        li
            font-size: 12px
    //global
    #pagination
        font-family: Helvetica, Verdana, sans-serif !important
        font-size: 1.125em
    //homepage specific
    #archive
        clear: both
        article
            width: 18.75em
            float: left
            text-align: justify
            h1
                text-align: left
                font-size: 1.125em
                margin: 1em 0 .5em
            .hyphenate
                font-size: .9375em
                line-height: 1.4375em
            .dateline
                text-align: left
                margin-bottom: .75em
                font-size: .65em
        .mid
            margin: 0 2.5em
        

    article img
        width: auto !important

    .img
        float: right
        img
            margin: 0
    
    //writing archives
    .archive
        padding-top: 2em
        article
            margin-bottom: 2em
            padding-bottom: 2em
            border: none !important
        h1, p
            width: 41%
            float: left
            text-align: left
            margin: 0
            font-size: 1em
        h1
            font-size: 1.5em
            line-height: 1.3em
            margin-top: .15em
            letter-spacing: .5px
        .dateline
            clear: left
            margin: .75em 0
            font-size: .6875em
        .hyphenate
            text-align: justify
        time
            display: inline
            float: right
    
    
    
    
    #photo-galleries:after, #projects-page .top:after
        content: "."
        display: block
        height: 0
        clear: both
        visibility: hidden
    
    //breadcrumbs
    #page-nav
        border: none
        text-align: left
        margin-top: 2em
    #breadcrumbs
        margin-left: 0
        li
            letter-spacing: 1px
        
    
    //photo pages
   
    #photo-galleries li
        float: left
        width: 291px
        margin: 0 1em 1em 1em
        .figure img
            width: 100%
            
    #photo-galleries .legend
        width: 97%
        padding: 1em
        font-size: .75em !important
        line-height: 95%
      
    //map page
    #map-canvas
        width: 47.5em
        height: 31.25em
        float: right
    
    .map-legend
        h4
            margin-bottom: .25em
            letter-spacing: 1px
            font-size: .875em
        li
            display: block
            font-size: .875em
            margin: 3px 0
        li:after
            content: ""
    .infowin
        h4
            font: normal 1.3em Helvetica, Verdana, sans-serif
            margin: .5em 0
        p
            font-size: 95%
            overflow: auto
    //projects page 
    #projects-page .col
        float: left
        font-size: .875em
        margin: 0 40px 0 0
        width: 360px
    #projects-page .two
        margin: 0 0 0 3.5em
        width: 32em
    #projects-page .top
        padding-bottom: 2em
        margin-bottom: 2em
        border-bottom: 1px solid #E3E3E3
    #projects-page article p
        margin: 1em 0 0 0
    //Permalink pages
    article[role="main"]
        header, #post-body, footer, #comments
            width: 35.625em
            margin: 3.5em 0 0 12em
        #post-body
            margin-top: 0
            .legend
                width: 96%
                font-size: 1em

        h1, aside
            text-align: left
            margin: 0 0 .4em 0
        h1
            font-size: 1.875em
        p:nth-of-type(1)
            font-size: 1.25em
            line-height: 28px
        #post-metadata 
            border-bottom: 1px $brown dotted
            margin-bottom: 1em
            margin-top: 1.5em
            padding: .75em 0
            p
                line-height: 1.5em !important
                margin: 0
            a
                color: $orange
        #page-navigation
            text-transform: uppercase
            font: normal 1.125em Helvetica, Verdana, sans-serif
            a
                color: $orange
            li#next
                float: right
                padding-right: 9em
            li#prev
                float: left
                padding-left: 6em
    // two col layout
    .double article[role="main"]
        p:nth-of-type(1)
            font-size: 1.0625em /* 17px / 16px */
            line-height: 1.5em /* 24px / 16px */
            margin: 1em 0 0
        header
            width: 11.25em
            float: left
            margin-left: 0
            h1, aside
                text-align: right
                line-height: 1.2em
        #post-body
            margin: 2em 0 0 1.25em
            float: left
            width: 48.75em
            .col
                float: left
                width: 23.125em
            .sec 
                margin-left: 2.5em
            .narrow
                width: 35.625em
                margin-left: -8px
                margin-bottom: 1em
                clear: both
        #post-metadata 
            clear: both
    //About Page
    #about article[role="main"]
        .content
            width: 35.625em
            margin: 0 0 0 12.4em
        h2
            margin-left: 8.2em
        p:nth-of-type(1)
            font-size: 1.063em
            line-height: 1.5em
    footer[role="contentinfo"]
        font-family: Helvetica, Verdana, sans-serif
        background: $brown
        height: 3em
        color: #888888
        margin: 80px auto 0
        font-size: 1em
        padding: 0
        li
            float: left
            text-transform: uppercase
            line-height: 3em
            margin-top: .75em
            margin-left: 8px
        a
            color: #888888 !important
            &:hover
                color: $orange !important
        nav
            border: none
            margin: 0 1em 0 0
            padding: 0
            float: right
        p
            float: left
            padding-left: 8px
            line-height: 4em
            margin-top: .75em
    .drop
        font-size: 4.8em
        display: block
        float: left
        padding: 38px 10px 5px 0
        overflow: visible

    .drop-small
        font-size: 2.9em
        display: block
        float: left
        padding: 19px 8px 5px 0
        overflow: visible
    .postpic, .postpicright
        display: block
        margin: 0.3em 0.6em
    
    .postpic
        float: left
        margin-left: 0
        margin-top: 0.3em
    
    .postpicright
        float: right
        margin-right: 0
    
    .postpicleft
        float: left
        margin: 5px
    
    .picfull
        margin-top: 20px
    
    .picwide 
        border: 10px solid $brown
        clear: both
        margin: 30px 0 30px -200px

        
//.formatted
//    column-count: 3
//    column-gap: 1.125em
//    -moz-column-count: 3
//    -moz-column-gap: 18px
//    -webkit-column-count: 3
//    -webkit-column-gap: 1.125em