diff options
Diffstat (limited to 'media/sass')
-rw-r--r-- | media/sass/base.sass | 137 | ||||
-rw-r--r-- | media/sass/dark.sass | 59 |
2 files changed, 138 insertions, 58 deletions
diff --git a/media/sass/base.sass b/media/sass/base.sass index 0b2f66e..a85f091 100644 --- a/media/sass/base.sass +++ b/media/sass/base.sass @@ -48,6 +48,8 @@ strong sup font: normal .625em Helvetica, Verdana, sans-serif +small + font: normal .75em Helvetica, Verdana, sans-serif ul li display: inline margin: 0 .125em @@ -62,12 +64,15 @@ div[role="main"] ul li display: block margin: .5em 0 -.dateline, nav li, .breadcrumbs li, .geo, .legend h3 +.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% @@ -132,7 +137,7 @@ header[role="banner"] height: 84px margin: 0 auto h2 - background: url('../img/text.png') 0 0 no-repeat + background: url('../img/text-centered.png') 0 0 no-repeat text-indent: -9999px width: 184px height: 54px @@ -145,7 +150,8 @@ nav[role="navigation"] width: 100% padding: .25em 0 font-size: .875em -nav:after, footer:before, .archive article:after, #archive:after +nav:after, footer:before, +footer:after, .archive article:after, #archive:after, article[role="main"] header:after content: "." display: block height: 0 @@ -171,9 +177,36 @@ article object, article embed 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 @@ -305,7 +338,11 @@ footer[role="contentinfo"] 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 @@ -369,11 +406,16 @@ footer[role="contentinfo"] h1, h2 float: left padding-top: 2.2em - background-position: left bottom + position: relative + top: 2.2em + background-position: 0 0px no-repeat !important margin: 0 !important + height: 18px h2 - padding-top: 3.5em - background: url('../img/text-wide.png') left bottom no-repeat !important + 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 @@ -409,7 +451,10 @@ footer[role="contentinfo"] .mid margin: 0 2.5em - + #home .archive + margin-top: 3em + #home .dateline time + font-size: 1.125em article img width: auto !important @@ -523,7 +568,7 @@ footer[role="contentinfo"] margin: 1em 0 0 0 //Permalink pages article[role="main"] - header, #post-body, footer, #comments + header, #post-body, footer, #comments, #page-navigation, #post width: 35.625em margin: 3.5em 0 0 12em #post-body @@ -536,10 +581,11 @@ footer[role="contentinfo"] 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 + 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 @@ -551,16 +597,23 @@ footer[role="contentinfo"] a color: $orange #page-navigation - text-transform: uppercase - font: normal 1.125em Helvetica, Verdana, sans-serif + 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 - color: $orange - li#next - float: right - padding-right: 9em - li#prev - float: left - padding-left: 6em + font-style: italic + + + // two col layout .double article[role="main"] p:nth-of-type(1) @@ -571,13 +624,20 @@ footer[role="contentinfo"] 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: 2em 0 0 1.25em + margin: 0em 0 0 1.25em float: left width: 48.75em + .col float: left width: 23.125em @@ -588,6 +648,8 @@ footer[role="contentinfo"] margin-left: -8px margin-bottom: 1em clear: both + .hyphenate + margin-top: 0 #post-metadata clear: both //About Page @@ -595,45 +657,44 @@ footer[role="contentinfo"] .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"] - font-family: Helvetica, Verdana, sans-serif - background: $brown - height: 3em - color: #888888 - margin: 80px auto 0 + height: 2em + color: $brown + margin: 4em auto 2em font-size: 1em padding: 0 li - float: left - text-transform: uppercase - line-height: 3em + line-height: 1.5em margin-top: .75em margin-left: 8px - a - color: #888888 !important - &:hover - color: $orange !important nav border: none - margin: 0 1em 0 0 + margin: 0 auto padding: 0 - float: right + text-align: center p - float: left padding-left: 8px - line-height: 4em + 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 diff --git a/media/sass/dark.sass b/media/sass/dark.sass index 149ee61..b835305 100644 --- a/media/sass/dark.sass +++ b/media/sass/dark.sass @@ -28,9 +28,9 @@ header[role="banner"] &:hover color: $orange unquote("!important") h1 - background: url('../img/tree-dark.png') left bottom no-repeat !important + background: url('../img/tree.png') left -84px no-repeat !important h2 - background: url('../img/text-dark.png') left bottom no-repeat !important + background: url('../img/text-centered.png') 0 -60px no-repeat !important #breadcrumbs @@ -56,9 +56,10 @@ img &.picfull border: none -#post-body +#post-body, #page-navigation strong color: #cccccc - + + aside, header color: #cccccc @@ -187,6 +188,11 @@ h4 a.disqus-link-count //############# Photo Pages ################# body.image_gallery background: #14100b !important + header[role="banner"] + h1 + background: url('../img/tree.png') 0 -168px no-repeat !important + h2 + background: url('../img/text.png') 0 -121px no-repeat !important .directions font: normal .675em Helvetica, Verdana, sans-serif color: #414144 @@ -195,6 +201,7 @@ body.image_gallery article clear: both margin-bottom: 5em + position: relative h6 text-align: center text-transform: uppercase @@ -205,13 +212,13 @@ body.image_gallery a:hover color: $orange #slides - width: 62.5em + width: 62.5em img border: none margin: 0 auto text-align: center padding: 0 - float: left + .figcaption clear: both background: #1a1713 @@ -221,6 +228,7 @@ body.image_gallery color: white margin: -.25em 0 0 0 padding: 1em 0 1em 0 + z-index: 100 h3 float: left margin: 0 0 1em 1em @@ -251,6 +259,15 @@ body.image_gallery .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 @@ -261,14 +278,6 @@ body.image_gallery margin: 0 1em color: #74757A font-size: 1em - .details, .camera - font: normal .75em Helvetica, Verdana, sans-serif - color: #414144 - a - color: #414144 - font-weight: normal - a:hover - color: $orange .figcaption:after content: "." display: block @@ -303,9 +312,9 @@ body.image_gallery //clear: left width: 469px height: 392px - position: relative - bottom: -180px - left: 280px + position: absolute + bottom: 100px + left: 293px z-index: 2000 margin: 0 padding: 0 @@ -314,12 +323,16 @@ body.image_gallery .map-wrapper width: 400px height: 328px - margin: 37px 0 0 44px - position: relative - top: -525px + position: absolute + bottom: 27px + margin: 0px 0 0 44px + @media only screen and (max-width: 480px) body.image_gallery + header[role="banner"] + h2 + background: url('../img/text-centered.png') 0 -121px no-repeat !important #slides width: 100% h3 @@ -330,6 +343,7 @@ body.image_gallery #slides img width: 100% + margin-left: 0px !important .photo-options, .map-link display: none .figcaption @@ -344,6 +358,11 @@ body.image_gallery @media only screen and (min-width: 800px) + header[role="banner"] + h2 + background: url('../img/text.png') 0 -63px no-repeat !important + + #parks article h1 margin: 0 |