diff options
Diffstat (limited to 'media/sass/_480.sass')
| -rw-r--r-- | media/sass/_480.sass | 388 |
1 files changed, 388 insertions, 0 deletions
diff --git a/media/sass/_480.sass b/media/sass/_480.sass new file mode 100644 index 0000000..45d0da0 --- /dev/null +++ b/media/sass/_480.sass @@ -0,0 +1,388 @@ +//layout small + + +//**************** Masthead ************************ +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"], footer[role="contentinfo"] nav + margin: 1em auto + border-top: 1px $brown dotted + border-bottom: 1px $brown dotted + padding: .5em + text-align: center + ul + margin: .25em 0 .25em -30px + li + display: inline + margin: 0 .125em + + + +//**************** Page Breadcrumbs ************************ + +#breadcrumbs + text-align: center + li + display: inline + + + +//**************** Images ************************ + +img + width: 95% + height: auto + +.postpic, .postpicright + display: block + width: auto +object, embed + width: 100% +.postpic + float: left + margin: 0.3em 10px 10px 0 + +.postpicright + float: right + margin: 0.3em 0 10px 10px + +.postpicleft + float: left + margin: 5px + +.picfull + margin-top: 20px + +.picwide + clear: both + margin: 1em 0 + +.figure + position: relative + .legend + display: block + +transparent_class + position: absolute + bottom: 10px + left: 0 + font-size: 13px + padding: 8px 0 8px 12px + width: 95% + background: $brown + color: #999999 + + +//**************** Writing Archive Structure ************************ + +.dateline + text-align: center +.archive + h1 + font-size: 1.5em + text-align: center + article + padding-bottom: 1em + border-bottom: 1px #ececec solid +.home + article + border: none + margin-bottom: 2em + h1 + font-size: 1.2em + margin: 0 + text-align: center + img + float: left + width: auto + margin: 20px 8px 0 0 + .sh + text-transform: uppercase + font-weight: bold + font-size: .75em + margin: 2em 0 +//**************** Photo Archive Structure ************************ + +#photo-galleries + margin-top: 2em + h1 + font: 13px bold unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif + color: white + li + margin: 10px 0 0 0 + + +//**************** Entry Structure ************************ +.geo, article[role="main"] time + margin: .5em 0 + display: block + text-align: center +article[role="main"] + margin-top: 3em + h1 + text-align: center + font-size: 1.5em + p > a + color: $orange + &:hover + text-decoration: underline +.footnote + font-size: .75em + border-top: 1px $brown dotted + margin: 1.5em 0 0 0 + padding: 1em 0 0 0 + +#page-navigation + margin: 2em 0 + ul + margin: 0 auto + width: 100% + text-align: center + padding: 0 + li + margin: 10px 0 + clear: both + line-height: 24px + span + display: block + width: 100px + text-align: right + margin-right: 10px + margin-top: 2px + float: left + a + display: block + float: left + text-align: left + font-style: italic + width: 60% + +//**************** Map Structure ************************ + +#map-canvas + border: 10px $brown solid + width: 95% + height: 300px +.map-legend + h4 + font-size: 1em + font-weight: bold + margin: 1em 0 .25em + li + display: inline + &:after + content: "," + +//******************* Footer ********************** + + +footer[role="contentinfo"] + margin-top: 2em + +nav:after, footer:before, +footer:after, .archive article:after, #archive:after, article[role="main"] header:after, #map-canvas:after + content: "." + display: block + height: 0 + clear: both + visibility: hidden + + +//****************************************************** +//****************************************************** +//********** DARK BROWN PAGES ************** +//****************************************************** +//****************************************************** + + +.dark + background: $brown + body + color: #ccc + *:focus + outline: $orange dotted thin + a + color: $orange + &:visited + color: white + text-decoration: none + &:hover + color: white + text-decoration: none + &:visited > :hover + color: $orange + img + border: none + header[role="banner"], footer[role='contentinfo'] + margin-bottom: .5em + nav + margin-bottom: 0 + a + color: white + &:hover + color: $orange + h1 + background: url('../img/tree.png') left -84px no-repeat + h2 + background: url('../img/text-centered.png') 0 -60px no-repeat + header[role="banner"] + border-bottom: #cccccc 1px solid + article[role="main"] + .legend + bottom: 0 + // National parks page + .park + text-align: center + position: relative + h1 + font-size: 1.5em + margin-bottom: 5px + + h2 + font-size: 1.125em + margin: 0 + img + width: 100% + .legend + position: relative + .meta + height: 0 + .buttons li + margin: 5px + display: inline + text-transform: uppercase + font: normal .5em unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif + .map-container + width: 469px + height: 392px + position: absolute + right: 20px + bottom: 60px + z-index: 2000 + margin: 0 + padding: 0 + background: url("../img/mapbg-dark.png") no-repeat top left + .map-wrapper + width: 400px + height: 328px + margin: 37px 0 0 44px + .more-container + width: 405px + height: 260px + position: absolute + right: -30px + bottom: 40px + z-index: 2000 + background: url("../img/parkbg.png") no-repeat top left + font: normal .9em/25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif + dl + margin-top: 45px + margin-left: 45px + text-align: left + dt,dd + + margin: 4px 0 + + color: white + dt + clear: left + float: left + width: 65px + //border-bottom: 1px solid #999 + font-weight: bold + line-height: 25px + font-size: 0.7em + text-transform: uppercase + text-align: right + margin-right: 8px + dd + float: left + width: 250px + overflow: hidden + //border-bottom: 1px solid #999 + a:hover + color: $orange + + +//****************************************************** +//****************************************************** +//********** BLACK PAGES ************** +//****************************************************** +//****************************************************** +.black + background: #14100b + color: #ccc + *:focus + outline: $orange dotted thin + a + text-decoration: none + color: $orange + &:visited + color: white + text-decoration: none + &:hover + color: white + text-decoration: none + #breadcrumbs + color: #ccc + header[role="banner"] + h1 + background: url('../img/tree.png') left -168px no-repeat + h2 + background: url('../img/text-centered.png') 0 -121px no-repeat + nav[role="navigation"] + border-top: 1px #ccc dotted + border-bottom: 1px #ccc dotted + .directions + display: none + #slides + width: 100% + h3 + font-size: 1em + margin: 0 .5em + h6 + display: none + #slides + article + clear: both + margin: 20px 0 + img + width: 100% + border: none + .photo-options, .map-link + display: none + .figcaption + clear: both + background: #1a1713 + -moz-border-radius: 0 0 .5em .5em + -webkit-border-radius: 0 0 .5em .5em + border-radius: 0 0 .5em .5em + color: white + margin: -.25em 0 0 0 + padding: 1em 0 1em 0 + z-index: 100 + .caption + width: 100% + float: none + p + font: normal .75em Helvetica, Verdana, sans-serif + margin: .5em 0 0 .75em + padding-bottom: .25em + footer[role='contentinfo'] + nav + border-top: #ccc 1px dotted + border-bottom: #ccc 1px dotted + p + color: #ccc
\ No newline at end of file |