summaryrefslogtreecommitdiff
path: root/media/sass/base.sass
diff options
context:
space:
mode:
Diffstat (limited to 'media/sass/base.sass')
-rw-r--r--media/sass/base.sass747
1 files changed, 0 insertions, 747 deletions
diff --git a/media/sass/base.sass b/media/sass/base.sass
deleted file mode 100644
index a85f091..0000000
--- a/media/sass/base.sass
+++ /dev/null
@@ -1,747 +0,0 @@
-@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
-small
- font: normal .75em 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, time
- text-transform: uppercase
- font-size: .75em
- letter-spacing: .0625em
-.geo
- text-align: center
-header time
- span
- font-size: 1.125em
-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-centered.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,
-footer:after, .archive article:after, #archive:after, article[role="main"] header: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"]
- header h1
- margin-bottom: .675em
- li
- display: block
- margin: .5em 0
-td
- vertical-align: top
- line-height: 1em
-tr
- margin-bottom: 2em !important
-td
- strong
- display: block
- text-align: right
- margin-top: 1px
-#page-navigation
- max-width: 20.9375em
- margin: 4em auto
- line-height: 1.5em
-
- letter-spacing: .025em
- strong
- text-transform: uppercase
- margin-right: 1em
- text-align: right
- font-weight: normal
- letter-spacing: .125em
- font-size: .75em
- a
- font-style: italic
-/* 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
-#post-body>p:last-of-type:after
- content: " " url(../img/stop.gif)
-
-#post-body hr
- display: none
-//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 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
- position: relative
- top: 2.2em
- background-position: 0 0px no-repeat !important
- margin: 0 !important
- height: 18px
- h2
- position: relative
- top: 3.3em
- background: url('../img/text.png') 0 0px no-repeat !important
- height: 0px !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
-
- #home .archive
- margin-top: 3em
- #home .dateline time
- font-size: 1.125em
- 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, #page-navigation, #post
- 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: 2em
- #post-body
- 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
- max-width: 20.9375em
- margin: 4em auto
- line-height: 1.5em
-
- letter-spacing: .025em
- strong
- text-transform: uppercase
- margin-right: 1em
- text-align: right
- font-weight: normal
- letter-spacing: .125em
- font-size: .75em
- a
- font-style: italic
-
-
-
- // 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
- margin-top: 0
- h1, aside
- text-align: right
- line-height: 1.2em
- h1
- font-size: 1.875em
- time
- display: block
- text-align: right !important
- #post-body
- margin: 0em 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
- .hyphenate
- margin-top: 0
- #post-metadata
- clear: both
- //About Page
- #about article[role="main"]
- .content
- width: 35.625em
- margin: 0 0 0 12.4em
- small
- font-style: italic
- h2
- margin-left: 8.2em
- p:nth-of-type(1)
- font-size: 1.063em
- line-height: 1.5em
- footer[role="contentinfo"]
- height: 2em
- color: $brown
- margin: 4em auto 2em
- font-size: 1em
- padding: 0
- li
- line-height: 1.5em
- margin-top: .75em
- margin-left: 8px
- nav
- border: none
- margin: 0 auto
- padding: 0
- text-align: center
- p
- padding-left: 8px
- line-height: 2em
- margin-top: .75em
- color: #888888
- a
- color: #888888 !important
- &:hover
- color: $orange !important
- .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
-
-.ie8 .drop
- padding-top: 28px
-.ie7 footer[role="contentinfo"], .ie7 #projects-archive, .ie7 #writing-archive article, .ie7 #pagination, .ie7 #projects-archive .button
- clear: both
-.ie7 .top
- height: 90px
-.ie7 nav[role="navigation"]
- padding-top: 6.2em
- padding-left: 3.5em
- margin-left: 90px !important
-
-//.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