diff options
Diffstat (limited to 'design/old/v8')
26 files changed, 3780 insertions, 0 deletions
diff --git a/design/old/v8/_birds.scss b/design/old/v8/_birds.scss new file mode 100644 index 0000000..c50b22e --- /dev/null +++ b/design/old/v8/_birds.scss @@ -0,0 +1,162 @@ +.iframe-wrapper { + @include constrain_wide() +} + +.taxon { + display: none !important; +} + +#birds, .birds { + .post--title { + @include fontsize(18); + a { + font-style: normal; + @include fontsize(22); + } + } + .audio-figure { + audio { + display: block; + width: 100%; + } + small { display: block;} + } + .post--image { + position: relative; + width: 100%; + figcaption { + opacity: 0; + @include fancy-sans; + @include fontsize(13); + position: absolute; + bottom: 0; + text-align: left; + width: 99%; + background: rgba(0, 0, 0, 0.75); + padding: .5em 0 .5em .5em; + margin-bottom: .5em; + color: #ccc; + + a { + color: #ccc; + } + } + img { + max-width: 100%; + width: 100%; + padding: 0; + background: none; + } + .picfull { + margin: 0; + } + } + .post--image:hover figcaption { + -webkit-transition: opacity .25s ease-in; + -moz-transition: opacity .25s ease-in; + transition: opacity .25s ease-in; + opacity: 1; + } +} + +.sci { + font-style: italic; +} +.birds { + article { + @include constrain_narrow; + } + audio { width: 100%;} + .audio-figure { + margin-top: 2em; + margin-bottom: 2em; + } + article h2, h3 { font-weight: 400;} + article h2 { margin-bottom: 0;} + h3 { + margin-top: 0; + } + .map { + margin: 0 auto; + width: 99%; + height: 400px; + @include breakpoint(beta) { + @include constrain_narrow; + } + } + #endnode { + @include breakpoint(beta) { + text-align: left; + } + @include fancy-sans; + @include fontsize(14); + margin-top: 4rem; + h5 { + @include fontsize(14); + @include smcaps; + @include fancy_sans; + margin-bottom: 1rem; + margin-top: 2rem; + } + ul { + margin-bottom: 2em; + li { + color: lighten($body_font, 30); + &:before { + content: "\2022"; + color: lighten($body_font, 30); + margin-right: .35rem; + } + } + } + a { + text-decoration: none; + color: lighten($body_font, 10); + } + &:before { + @include faded_line_after; + } + } + #detail-map-canvas { + width: 100vw; + @include constrain_wide; + position: relative; + @include breakpoint(gamma) { + left: calc(-20%); + } + @include breakpoint(delta) { + left: calc(-38%); + } + @include breakpoint(epsilon) { + left: calc(-45%); + } + } +} +.life-list { + @include constrain_wide; + text-align: left; + h4 { @include fancy_sans;} + ul { + @include breakpoint(beta){ + height: 1200px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + @include breakpoint(gamma){ + height: 1000px; + } + @include breakpoint(epsilon){ + height: 800px; + } + } + li { + margin-bottom: .35rem; + } + a { + color: $body_font; + text-decoration: none; + + } +} + diff --git a/design/old/v8/_books.scss b/design/old/v8/_books.scss new file mode 100644 index 0000000..db38624 --- /dev/null +++ b/design/old/v8/_books.scss @@ -0,0 +1,125 @@ +.book-list { + @extend %clearfix; + @include constrain_wide; +} + +.book-list-item { + margin: 2em 0; + h2 { + text-align: left; + margin: .25rem 4px; + font-weight: normal; + @include fontsize(24); + line-height: 1.2; + a { + color: $body_font; + text-decoration: none; + font-style: italic; + } + @include breakpoint(gamma) { + @include fontsize(22); + margin: .1rem 4px; + } + } + img { max-width: 100%;} + h4, { + @include fontsize(12); + @include smcaps; + font-weight: normal; + margin-top: 0; + margin-bottom: 0; + &:before { + content: "by " + } + } + @include breakpoint(alpha-2) { + text-align: left; + width: 45%; + float: left; + margin-right: 30px; + margin-top: 1em; + min-height: 500px; + .img-wrapper { + min-height: 350px; + } + } + @include breakpoint(gamma) { + width: 31%; + height: 650px; + float: left; + margin-right: 30px; + .img-wrapper { + min-height: 400px; + } + } + @include breakpoint(delta) { + width: 23%; + margin-right: 25px; + height: 550px; + } +} +.book-list .even { + @include breakpoint(alpha-2) { + margin-right: 0; + } + @include breakpoint(gamma) { + margin-right: 25px; + } +} +.book-list .tres { + @include breakpoint(gamma) { + margin-right: 0; + } + @include breakpoint(delta) { + margin-right: 25px; + } +} +.book-stars { + display: block; +} +.book { + margin-top: 2em; + @include breakpoint(gamma) { + margin-top: 3em; + } +} +.book:after { + @include constrain_narrow; + color: white; + @include faded_line_after; + margin-top: 2em; + @include breakpoint(gamma) { + margin-top: 3em; + } +} +.book-title { + @include constrain_wide; + line-height: 1.3; + @include breakpoint(gamma) { + max-width: 660px; + text-align: left; + position: relative; + left: 150px; + } + @include breakpoint(delta) { + left: 165px; + max-width: 850px; + } +} +.book-cover-wrapper { + @include breakpoint(gamma) { + display: block; + @include constrain_wide; + img { + float: left; + width: 250px; + margin-right: 32px; + } + } + @include breakpoint(delta) { + img { + max-width: 250px; + } + } +} + diff --git a/design/old/v8/_figments.scss b/design/old/v8/_figments.scss new file mode 100644 index 0000000..e834469 --- /dev/null +++ b/design/old/v8/_figments.scss @@ -0,0 +1,47 @@ +.kindle, .epub { + display: inline; + @include smcaps; + @include fontsize(11); +} +.kindle:after { + content: "ยท"; + color: #999; + padding-left: 0.75em; +} +.fig-archive { + @include constrain_narrow; + @include breakpoint(beta) { + text-align: left; + + } + h1 { + margin-top: 2.5em; + @include smcaps; + @include fontsize(16); + } + p.intro { + @include breakpoint(beta) { + text-align: left; + @include fontsize(18); + font-style: italic + } + } + p.intro:last-of-type { + margin-bottom: 4em; + } + h2 { + @include smcaps; + @include fontsize(18); + } +} +.figments hr, .resume hr { + @include constrain_narrow; + border: 0; + margin-top: 2em; + margin-bottom: 2em; + height: 1px; + background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); +} diff --git a/design/old/v8/_fonts.scss b/design/old/v8/_fonts.scss new file mode 100644 index 0000000..dfe632a --- /dev/null +++ b/design/old/v8/_fonts.scss @@ -0,0 +1,10 @@ +@font-face { + font-family: 'carrois_gothicregular'; + src: url('carroisgothic-regular-webfont.eot'); + src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('carroisgothic-regular-webfont.woff') format('woff'), + url('carroisgothic-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + +} diff --git a/design/old/v8/_footer.scss b/design/old/v8/_footer.scss new file mode 100644 index 0000000..9bfe4b7 --- /dev/null +++ b/design/old/v8/_footer.scss @@ -0,0 +1,55 @@ +footer[role="contentinfo"] { + margin-top: 5em; + @include breakpoint(gamma) { + max-width: 960; + } + &:before { + @include breakpoint(beta) { + @include faded_line_after; + margin-bottom: 1.2em; + } + } + ul { + border-top: 1px $brown dotted; + border-bottom: 1px $brown dotted; + padding: .5rem 0; + @include breakpoint(beta) { + border: none; + } + } + li { + display: inline; + margin: 0 .25em; + &:after { + content: "\00b7"; + color: #999999; + padding-left: 0.75em; + } + a { + color: $brown; + text-decoration: none; + } + ul { display:inline;} + } + li:last-of-type { + margin-right: 0; + &:after { + content: " "; + } + } + p { + @include fontsize(10); + text-align: center; + margin-top: 1.5em; + margin-bottom: 1.5em; + } +} +.black footer[role="contentinfo"], .dark footer[role="contentinfo"] { + &:before { + @include light_faded_line_after; + } + a { + color: $body_font_light; +} +} + diff --git a/design/old/v8/_global.scss b/design/old/v8/_global.scss new file mode 100644 index 0000000..c5b7ca2 --- /dev/null +++ b/design/old/v8/_global.scss @@ -0,0 +1,186 @@ +html { + border-top: 0.25em solid $brown; +} + +body { + margin: 0 auto; + padding: 0; + overflow-x: hidden; + font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif; + color: $body_font; + text-align: center; + background-color: transparent +} + +// eliminate touch delay on mobile safari +a, button, input, select, textarea, label, summary { + touch-action: manipulation; +} +a { + color: $orange; + -webkit-transition: all 0.1s ease; + -moz-transition: all 0.1s ease; + -ms-transition: all 0.1s ease; + transition: all 0.1s ease; + &:hover { + text-decoration: none; + } + &:visited { + color: $orange; + } +} + +p { + @include constrain_narrow(); + text-align: left; + @include breakpoint(alpha){ + @include fontsize(18); + line-height: 1.5; + } + @include breakpoint(gamma){ + @include fontsize(20); + line-height: 1.6; + } +} +time { + @include smcaps; + @include fontsize(11); + display: block; + span { + @include fontsize(13); + } +} +abbr { + cursor: help; +} +pre { + @include constrain_narrow(); + text-align: left; + @include breakpoint(alpha){ + @include fontsize(18); + line-height: 1.5; + margin-top: 2em; + margin-bottom: 2em; + } +} +object, embed, video { + max-width: 100%; + height: auto; +} + +img { + max-width: 100%; +} + +h1 { + font-family: Georgia, 'Times New Roman', serif; + @include fontsize(36); + font-weight: normal; +} +//************** Universals ************************ +.hide { + display: none; +} + +.strike { + text-decoration: line-through; +} + +.yes { + background: green !important; + color: white; +} + +.no { + background: red !important; + color: white; +} + +.alert { + color: red !important; +} +//************** other global classes ************************ +.sans { + @include generic_sans; +} +.bl { + @include smcaps; + @include fontsize(11); +} +.italic { + font-style: italic; +} +.small { + font-size: 90%; +} +.hed { + @include fancy_sans; + @include fontsize(24); + font-weight: 500; + @include breakpoint(beta) { + text-align: left; + @include fontsize(32); + } +} + +.subhead { + font-style: italic; + font-weight: 400; + margin-top: 0; + @include constrain_narrow; + @include breakpoint(beta) { + text-align: left; + } +} +.mailing-list--wrapper { + @include constrain_narrow; + @include breakpoint(gamma) { + margin-top: 3em; + max-width: 580px; + h5 { + margin-bottom: .5em; + margin-top: 2em; + } + } + h5 { + font-weight: normal; + text-align: left; + @include fontsize(18); + } + &:before { + @include faded_line_after; + margin-top: 5em; + } +} +.divide-after:after { + margin-bottom: 3em; + @include faded_line_after; +} +//**************** Page Breadcrumbs ************************ + +#breadcrumbs { + @include constrain_wide(); + text-align: center; + li { + display: inline; + } + a { color: $brown;} + @include breakpoint(gamma) { + text-align: left; + } +} + +.black #breadcrumbs a, .dark #breadcrumbs a { + color: $body_font_light; +} +//************* Dark Pages ********************* + +.dark body { + background: $brown; + color: $body_font_light +} + +.black body { + background: #000; + color: $body_font_light +} diff --git a/design/old/v8/_header.scss b/design/old/v8/_header.scss new file mode 100644 index 0000000..10174e3 --- /dev/null +++ b/design/old/v8/_header.scss @@ -0,0 +1,154 @@ +header[role="banner"] { + margin: 0 auto; + @include smcaps; + a { + text-decoration: none; + } + h1 { + margin: -10px 0 0 0; + padding: 0; + } + h1 a { + display: block; + margin: 0.25em auto 0 auto; + font-size: 0.875em; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + line-height: 0.75em; + color: $brown; + } + h1 a:before { + content: "home-icon"; + text-indent: -9999em; + width: 95px; + height: 75px; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + background-size: 95px; + background-size: 85px; + display: block; + margin: 0.75em auto 0; + } + h2 { + margin-top: 0.25em; + font-size: 0.675em; + font-style: italic; + font-weight: 300; + } + @include breakpoint(beta) { + float: left; + position: relative; + bottom: 0; + h1, h2 { + text-align: left; + } + h1 { + width: 360px; + } + h1 a { line-height: 2.5em;} + h1 a:before { + display: inline-block; + background-size: 102px; + height: 85px; + width: 105px; + margin-right: 10px; + } + h2 { margin-left: 116px; + margin-top: -30px; + } + } +} +.black header h1 a, .dark header h1 a { + color: $body_font_light; + &:before { + background: url("logo-new-@2x-treeonly.png") center -75px no-repeat; + background-size: 92px; + } + @include breakpoint(gamma) { + &:before { + background-position-y: -65px; + } + } +} + + +nav[role="navigation"] { + border-top: 1px #444444 dotted; + border-bottom: 1px #444444 dotted; + //box-shadow: 0 3px 8px 0 #e6e6e6 + padding-left: 20px; + padding-right: 20px; + margin-right: -20px; + margin-left: -20px; + margin-top: 1em; + padding: 0.25em 0.5em; + a { + text-decoration: none; + color: #505050; + } + ul { + @include smcaps; + max-width: 100%; + font-weight: 300; + margin-top: 0.5em; + margin-bottom: 0.5em; + padding: 0; + @include constrain(85%); + } + li { + display: inline; + margin: 0 0.25em; + &:after { + content: "\00b7"; + color: #999999; + padding-left: 0.75em; + } + } + li.last { + margin-right: 0; + &:after { + content: " "; + } + } + @include breakpoint(beta) { + float: right; + border: none; + margin: 52px 0 0 0; + padding: 0; + ul { + max-width: 50em; + } + } +} +.black nav[role="navigation"] a, .dark nav[role="navigation"] a { + color: $body_font_light; +} + + +.header-wrapper { + @extend %clearfix; + margin-bottom: 1em; + @include breakpoint(beta) { + border-bottom: 1px $brown solid; + position: relative; + } + @include breakpoint(gamma) { + max-width: $breakpoint-gamma; + margin-left: auto; + margin-right: auto; + } + @include breakpoint(delta) { + margin-top: 1.5em; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + margin-top: 1.5em; + max-width: $max_width; + } +} + +.black .header-wrapper, .dark .header-wrapper { + @include breakpoint(beta) { + border-bottom: 1px $body_font_light solid; + } +} + diff --git a/design/old/v8/_homepage.scss b/design/old/v8/_homepage.scss new file mode 100644 index 0000000..db375ed --- /dev/null +++ b/design/old/v8/_homepage.scss @@ -0,0 +1,265 @@ +.homepage--section { + @include constrain_wide; + @extend %clearfix; + &:before { + margin-top: 3em; + } +} +.homepage--arc-header { + @include fontsize(14); + font-family: sans-serif; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 2em; + @include breakpoint(beta) { + text-align: left; + } +} +.homepage--archives { + max-width: 100%; + margin-top: 0; + @include breakpoint(beta) { + article { + display: block; + width: 100%; + text-align: left; + } + } + @include breakpoint(gamma) { + float: left; + margin-top: 0; + margin-right: 3em; + article { + width: 620px; + margin-left: 0; + } + } + @include breakpoint(delta) { + article { + width: 780px; + margin-left: 0; + } + } +} + +.homepage--bright { + max-width: 100%; + article { + margin-top: 0; + margin-bottom: 20px; + max-width: 100%; + } + .odd, .even { margin-left: 0; margin-right: 0; padding-left: 0; min-height: 270px;} + @include breakpoint(delta) { + margin-left: 0; + float: right; + max-width: 33%; + article { + float: left; + width: 45%; + margin-left: 1em; + } + .odd { margin-right: 10px;} + } + @include breakpoint(gamma) { + float: right; + max-width: 33%; + margin-top: 0; + article { + max-width: 100%; + } + } + @include breakpoint(beta) { + margin-top: 0; + article { + max-width: 50%; + } + } + @include breakpoint(beta-2) { + margin-top: 0; + article { + max-width: 47%; + } + .odd { margin-right: 10px;} + } + .post--image { + margin-left: 0 !important; + margin-bottom: .5em; + max-height: 130px; + overflow: hidden; + img { + max-width: 100%; + width: 100%; + display: block; + /* just in case, to force correct aspect ratio */ + height: auto !important; + width: auto\9; /* ie8+9 */ + /* lt ie8 */ + -ms-interpolation-mode: bicubic; + } + @include breakpoint(epsilon){ + max-height: 160px; + } + } +} +.homepage--arc-big { + max-width: 100%; + @include breakpoint(gamma) { + float: left; + max-width: 63%; + article { + max-width: 47%; + width: 47%; + } + } + @include breakpoint(delta) { + float: left; + max-width: 63%; + article { + max-width: 49%; + + } + } +} +.popular { + @include breakpoint(gamma) { + article { + width: 100%; + max-width: 100%; + } + } + @include breakpoint(epsilon) { + float: right; + max-width: 33%; + } +} +.homepage--next { + @extend %clearfix; + text-align: center; + clear: left; + padding-top: 3em; + a { + @include fontsize(14); + font-family: sans-serif; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 1px; + text-decoration: none; + padding: 9px 10px 8px; + border: $link_color 1px solid; + } + a:after { + content: "\21E2"; + margin-left: 4px; + } + a:hover { + background: $link_color; + color: white; + } +} +.has-hero { + .header-wrapper { + margin-bottom: 0; + } + .homepage--hero { + border: 0; + padding: 0; + max-width: 100%; + position: relative; + z-index: 1; + width: 100vw; + } + .hero--wrapper { + @include constrain_wide; + position: relative; + z-index: 100; + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.6); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity = 70); + color: $body_font_light; + font-weight: 400; + padding-bottom: 30px; + p { max-width: 100%; } + a { color: $body_font_light;} + time {display: none;} + .btn {text-decoration: none; color: white; } + @include breakpoint(gamma) { + margin-top: -218px; + max-width: 100%; + padding-left: 5px; + .btn { margin-top: -15px} + } + } + .main--header { + margin-bottom: 12px; + margin-top: .67em; + font-family: 'robotoslab', Georgia, Times; + font-weight: normal; + @include fontsize(36); + padding-top: .25em; + a { + color: white; + text-decoration: none; + } + } + .main--location { + @include fontsize(9); + text-align: center; + margin-top: -12px; + margin-bottom: 22px; + } + .main--tag { + color: white; + text-align: center; + @include breakpoint(gamma) { + margin-top: -10px; + } + } +} +.homepage--about { + &:after, &:before { + @include faded_line_after; + } + &:before { margin-bottom: 50px;} + @include breakpoint(gamma) { + p { + @include fontsize(18); + } +} +} +.black { + .post--title a { + color: white; + } + .homepage--archives { + .post--location a { + color: $body_font_light; + } + img { @include img_plain; } + } +} +.black .homepage--about { + &:after, &:before { + @include lighter_faded_line_after; + } +} +.v082016 { + .header-wrapper { + @include breakpoint(beta) { + border-bottom: none; + } + } + .banner .post--image { + @include breakpoint(gamma) { + max-height: 800px; + overflow: hidden; + } + } + .hero--wrapper { + @include breakpoint(gamma) { + margin-top: -225px; + } + } +} diff --git a/design/old/v8/_house.scss b/design/old/v8/_house.scss new file mode 100644 index 0000000..a0604b6 --- /dev/null +++ b/design/old/v8/_house.scss @@ -0,0 +1,125 @@ +$blue: #39deea; + +.house .map img { background: none !important;} +.house .map { + height:234px; + width:100%; + margin-bottom: 8px; + @include breakpoint(gamma){ + float: left; + max-width: 33%; + } + @include breakpoint(delta){ + max-width: 44%; + } + @include breakpoint(epsilon){ + max-width: 50.5%; + } +} +.house #gmap_canvas { + height:234px; + max-width:100%; +} +.house main { @include constrain_wide;} +.house .picwide { + background: none; + max-width: 100%; + margin-left: 0; + margin-right: 0; + @include breakpoint(epsilon){ + width: 1280px; + } +} +.flist { + @extend %clearfix; + @include constrain(900px); + @include fancy_sans; + @include fontsize(18); + margin-top: 4em; + text-align: left; + list-style-position: inside; + color: #393939; + li { + margin: 1.5em 0; + min-height: 140px; + + } + li:first-of-type { margin-top: 0 ;} + + h3 { + @include fontsize(24); + max-width: 100%; + font-weight: 400; + margin: .25em 0 0 0; + padding-top: .15em; + } + .inner{ + display: inline-block; + width: 22px; + height: 22px; + border-radius: 30em; + position: absolute; + top: 19px; + left: 19px; + background: white url("/media/img/check.png") 50% 50% no-repeat; + background-size: 15px; + } + .outer { + display: inline-block; + float: left; + width: 60px; + height: 60px; + margin: 10px 40px 90px 0; + background: $blue; + border-radius: 30em; + position: relative; + } +} +.fsubhed { + @extend %clearfix; + @include constrain(1140px); + clear: both; + margin-top: 6em; + margin-bottom: 6em; + h2 { + margin-top: 0; + float: left; + position: relative; + font-weight: 400; + @include fontsize(32); + //&:after { + // content: ""; + // position: absolute; + // top: 50%; + // height: 2px; + // width: 200px; + // display: block; + // margin-top: -3px; + // margin-left: 3em; + // background-color: #e5e5e5; + //} + } + p { + @include constrain(800px); + float: right; + } + a, a:visited, a:hover { + color: $blue; + } +} +.house { + a, a:visited, a:hover { + color: $blue; + } + b { + @include fancy_sans; + } +} +.house .image-cluster { + margin-bottom: 3em; +} +.house .post--article h1 { + @include fancy_sans; + margin-top: 2.2em; + margin-bottom: 1em; +} diff --git a/design/old/v8/_inbox.scss b/design/old/v8/_inbox.scss new file mode 100644 index 0000000..c1801d9 --- /dev/null +++ b/design/old/v8/_inbox.scss @@ -0,0 +1,77 @@ +.links main { + @include constrain_narrow; + .link-title a { + color: $body_font; + font-weight: 400; + text-decoration: none; + } + @include breakpoint(beta) { + text-align: left; + } +} +.videos { + margin-top: 3em; + @include constrain_wide; +} + +.photo-gallery { + margin: 0 auto; + margin-top: 1.5em; + position: relative; + width: 100%; /* for IE 6 */ + img { + width: 100%; + max-width: 100%; + padding: 0; + } + h4 { + font-weight: 500; + margin: .5em 0; + letter-spacing: 1px; + font-size: 2em; + } + time { display: inline; } + a { color: inherit;} + @include breakpoint(alpha) { + div { + position: absolute; + bottom: 28%; + left: .35em; + text-align: left; + } + time { + margin-left: .5em; + } + h4 { + font-size: 2.75em; + margin-bottom: 0; + } + p { + line-height: 1.3; + max-width: 80%; + margin-left: .25em; + @include fontsize(18); + } + } + @include breakpoint(beta) { + div { + bottom: 22%; + } + } + @include breakpoint(gamma) { + div { + bottom: 20%; + } + @include constrain_wide; + } +} +.tags { + .tag-list { + li { + display: inline-block; + a { + padding: 3px; + } + } + } +} diff --git a/design/old/v8/_leaflet.scss b/design/old/v8/_leaflet.scss new file mode 100644 index 0000000..b65ffb8 --- /dev/null +++ b/design/old/v8/_leaflet.scss @@ -0,0 +1 @@ +.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666} diff --git a/design/old/v8/_mailing-list.scss b/design/old/v8/_mailing-list.scss new file mode 100644 index 0000000..561c059 --- /dev/null +++ b/design/old/v8/_mailing-list.scss @@ -0,0 +1,35 @@ +//Flexbox mixins rely on https://github.com/timhettler/compass-flexbox +.mailing-list { + text-align: left; + @extend %clearfix; + .form--flex-container { + @include display-flex; + } +} +.form--label { + display: block; + font-weight: 600; + letter-spacing: 1px; + font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; + @include fontsize(12); + margin-bottom: 6px; +} +.form--input { + @include flex-grow(1); + padding: .25em; + border: #c5c5c5 1px solid; + border-radius: .125em; + color: darken($body_font_light, 20); +} +.btn { + display: inline-block; + margin-left: 5px; + border-radius: .25em; + border: none; + padding: 8px 12px 7px; + max-width: 8.75em; + background: $orange; + color: white; + font: bold .75em Verdana,sans-serif; + text-transform: uppercase; +} diff --git a/design/old/v8/_map.scss b/design/old/v8/_map.scss new file mode 100644 index 0000000..f7d958b --- /dev/null +++ b/design/old/v8/_map.scss @@ -0,0 +1,73 @@ +.map--wrapper { + @include constrain_wide; + max-width: 99%; + margin-top: 2em; +} +#map-canvas { + height: 300px; + img { max-width: 100%; padding: 0; margin: 0; background: none;} + @include breakpoint(alpha) { + height: 400px; + } + @include breakpoint(beta) { + height: 500px; + } + @include breakpoint(gamma) { + border: 10px $brown solid; + width: 80%; + float: right; + } + @include breakpoint(delta) { + height: 600px; + width: 84%; + } +} + +.map-legend { + @include constrain_wide; + text-align: left; + &:after { + content: " "; + display: table; + clear: both; + } + h4 { + font-family: sans-serif; + @include fontsize(14); + @include smcaps; + font-weight: bold; + margin: 1em 0 0.25em; + @include breakpoint(gamma) { + @include fontsize(13); + } + } + a { color: $body_font;} + li { + display: inline; + &:after { + content: ","; + } + @include breakpoint(gamma) { + display: block; + @include fontsize(13); + &:after { + content: ""; + } + } + } +} + +.infowin { + h4 { + margin: 0 0 5px 0; + font-weight: normal; + } + .date { + text-transform: uppercase; + font-size: 11px; + letter-spacing: 1px; + } + p { + font-size: 1em; + } +} diff --git a/design/old/v8/_mixins.scss b/design/old/v8/_mixins.scss new file mode 100644 index 0000000..0e29edf --- /dev/null +++ b/design/old/v8/_mixins.scss @@ -0,0 +1,126 @@ +$brown: #201a11; +$brown: #222; +$light: #ccc; +$orange: #b53a04; +$link_color: #b53a04; +$body_font: $brown; +$body_font_light: #b3aeae; +//$light; + +$max_width: 1280px; + +@mixin smcaps { + text-transform: uppercase; + letter-spacing: 1px; +} + +@function calc-em($target-px, $context) { + @return $target-px / $context * 1em; +} + +@mixin fontsize($size: 24, $base: 16) { + font-size: $size + px; + font-size: ($size / $base) * 1rem; +} + +@mixin img_plain { + padding: 0; + max-width: 100%; + background: none; +} + +@mixin generic-sans { + font-family: sans-serif; +} + +@mixin fancy-sans { + font-family: Helvetica, sans-serif; +} + +@mixin fancy-sans-bold { + font-family: Helvetica, sans-serif; + font-weight: 600; +} + +%clearfix { + *zoom: 1; + &:before { + content: " "; + display: table; + } + &:after { + content: " "; + display: table; + clear: both; + } +} + +@mixin transparent_class { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity = 90); + opacity: 0.9; +} + +@mixin faded_line_after { + display: block; + content: ""; + margin-top: 3em; + height: 1px; + width: 100%; + background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); +} + +//for overriding the above on dark pages: +@mixin light_faded_line_after { + background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); +} + +@mixin lighter_faded_line_after { + background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1)); + background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); +} + +//generic constrain function +@mixin constrain($size) { + max-width: $size; + margin-left: auto; + margin-right: auto; +} + +//set an element to centered, narrowish column width +//used mostly on columns of text +@mixin constrain_narrow() { + max-width: 90%; + margin-left: auto; + margin-right: auto; + @include breakpoint(beta) { + max-width: 640px; + } + @include breakpoint(gamma) { + max-width: 680px; + } +} + +//set an element to centered, wideish column width +@mixin constrain_wide() { + max-width: 90%; + margin-left: auto; + margin-right: auto; + @include breakpoint(gamma) { + max-width: $breakpoint-gamma; + } + @include breakpoint(delta) { + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + max-width: $max_width; + } +} diff --git a/design/old/v8/_normalize.scss b/design/old/v8/_normalize.scss new file mode 100644 index 0000000..c451141 --- /dev/null +++ b/design/old/v8/_normalize.scss @@ -0,0 +1 @@ +/*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}ul{list-style-type: none;margin:0;padding:0}
\ No newline at end of file diff --git a/design/old/v8/_notes.scss b/design/old/v8/_notes.scss new file mode 100644 index 0000000..ef49655 --- /dev/null +++ b/design/old/v8/_notes.scss @@ -0,0 +1,160 @@ +//**************** Notes Structure ************************ + +.notes main, .notes--permalink main { + @include constrain_narrow(); + margin-top: 1em; + h1 { + margin-bottom: 0; + @include fontsize(28); + @include breakpoint(beta) { + @include fontsize(28); + text-align: left; + } + } +} +.notes .h-entry, .notes--permalink .h-entry { + @extend %clearfix; + border: none; + padding: 0; + margin-top: 3em; + @include breakpoint(beta) { + margin-top: 2em; + } + &:first-of-type { + margin-top: 1em; + } + &:after { + @include faded_line_after; + @include breakpoint(beta) { + margin-top: 8.5em; + } + } +} +.note--title { + @include constrain_narrow; + text-align: left; + font-weight: 400; + font-size: 1.5em; + letter-spacing: 0px; + margin-bottom: .5rem !important; + a { + text-decoration: none; + color: $body_font !important; + } +} + +.note--date { + @include smcaps; + @include fontsize(11); + text-align: center; + margin-bottom: 4px; + @include breakpoint(beta) { + float: right; + margin-top: 0; + } + a { + color: $brown; + text-decoration: none; + } +} +.note--date-container{ + @extend %clearfix; + +} +.e-content { + @extend %clearfix; +} +.note--location { + text-align: center; + margin-top: 0; + @include breakpoint(beta) { + float: left; + } +} +.note--footer { + margin-top: 1.7em; + @include breakpoint(beta) { + margin-top: 0; + } +} +.month--divider { + margin-top: 2em; +} +.month--header { + @include constrain_narrow(); + @include smcaps; + @include fontsize(12); + font-weight: normal; + font-family: sans-serif; + text-align: left; + margin-bottom: 3em; + border-bottom: 1px dotted rgba(0, 0, 0, 0.2); +} +.notes--permalink { + .h-entry { + margin-top: 3em; + @include breakpoint(gamma) { + margin-top: 5em; + } + } + .e-content figure.picwide { margin-left: -300px !important} + &:after { + background: none; + } + .note--title { + // @include fontsize(24); + } + .note--footer { + margin-top: 2em; + @include constrain_narrow(); + @include breakpoint(beta) { + margin-top: 1em; + } + } + #page-navigation { + clear: both; + margin-top: 10em; + } +} +/* +@include breakpoint(beta) { + .notes { + main h1 { + float: none; + margin-bottom: 1em; + width: 100%; + } + main { + @include constrain(680px); + 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; + } + } +} +*/ diff --git a/design/old/v8/_pagination.scss b/design/old/v8/_pagination.scss new file mode 100644 index 0000000..404aeb7 --- /dev/null +++ b/design/old/v8/_pagination.scss @@ -0,0 +1,44 @@ +.pagination { + @include generic_sans; + margin-top: 2em; + margin-bottom: 2em; + font-weight: 400; + line-height: 2.3; + li { + display: inline; + } + a { + text-decoration: none; + border: 1px solid lighten($body_font, 30); + color: lighten($body_font, 20); + padding: 9px 6px 6px 6px; + margin-left: .25em; + margin-right: .25em; + } + .prev { + border: none; + &:before { + content: "\2190"; + } + } + .next { + border: none; + &:after { + content: "\2192"; + margin-left: .35em; + } + } + @include breakpoint(beta) { + .prev { + margin-right: 2em; + } + .next { + margin-left: 2em; + } + .current { + color: $link_color; + margin-right: .5em; + margin-left: .5em; + } + } +} diff --git a/design/old/v8/_photos.scss b/design/old/v8/_photos.scss new file mode 100644 index 0000000..d152bf4 --- /dev/null +++ b/design/old/v8/_photos.scss @@ -0,0 +1,506 @@ +// ############################################## +// Photo Gallery pages +// ############################################## + +// Add padding and create grid layout at various widths: +.image-gallery--list { + @include constrain_wide; + margin-top: 3em; + li { + display: inline-block; + margin-bottom: 10px; + } +} +@include breakpoint(alpha) { + .first, .third { + padding-right: 10px; + } +} +@include breakpoint(gamma) { + .first, .third { + padding-right: 0; + } + .one { + padding-right: 6px; + } + .two { + padding-left: 6px; + padding-right: 6px; + } + .three { + padding-left: 6px; + } +} +@include breakpoint(delta) { + .one, .two, .three { + padding: 0; + } + .first { + padding-right: 6px; + } + .second, .third { + padding-left: 6px; + padding-right: 6px; + } + .fourth { + padding-left: 6px; + } +} + +//########### GALLERY FIGURES AND CAPTIONS ################ +.image-gallery--figure { + position: relative; + margin: 0; + width: 280px; + .image-gallery--legend { + display: block; + @include transparent_class; + position: absolute; + left: 0; + bottom: 8px; + width: 100%; + background: $brown; + color: #999999; + } + h1 { + @include smcaps; + @include fontsize(13); + margin: 8px 0 4px 8px; + text-align: left; + color: white; + } + p { + @include fontsize(12); + margin: 8px 0 4px 8px; + padding-bottom: 6px; + } +} + +.image-gallery--wrapper { + @include constrain_wide; + .figcaption { + background: lighten(#000, 12); + margin: -6px 0 0 0; + padding: 1em 1em .5em 1em; + border-radius: 0 0 0.5em 0.5em; + &:after { + content: " "; + display: table; + clear: both; + } + } + h6 a { + color: darken($body_font_light, 20); + text-decoration: none; + font-family: sans-serif; + } + img { background: none; max-width: 100%; padding: 0;} +} +.directions { + color: darken($body_font_light, 35); + text-align: center; + @include fontsize(13); + margin-top: 3em; + display: none; +} +.caption { + float: left; + font-family: sans-serif; + min-height: 32px; + padding-right: 1.5em; + @include breakpoint(beta) { + width: 50%; + border-right: darken($body_font_light, 45) 1px solid; + min-height: 55px; + } + @include breakpoint(gamma) { + width: 65%; + padding-right: 2.5em; + } + @include breakpoint(delta) { + width: 70%; + } +} +.figcaption--title, .figcaption--date { + float: left; + font-weight: normal; + line-height: 24px; + vertical-align: bottom; + margin: 0; + display: block; +} +.figcaption--title { + margin-right: 1em; +} +.figcaption--date { + margin-top: 2px; +} +.caption .map-link { + @include smcaps; + @include fontsize(13); + float: right; + text-decoration: none; + padding: 7px 14px 5px; + background: lighten(#000, 18); + color: $body_font_light; + border-radius: 25px; + &:hover { + background: $orange; + } +} +.figcaption--desc { + @include fontsize(13); + padding-top: .5em; + margin-bottom: 0; + clear: left; + margin-left: 0; + text-align: left; +} +.photo-options { + float: right; + font-family: sans-serif; + p{ + @include fontsize(13); + margin-top: 12px; + margin-bottom: 2px; + color: darken($body_font_light, 35); + &:first-of-type { + margin-top: 4px; + } + } + a { color: darken($body_font_light, 35);} +} +.photo-options, .caption .map-link { + display: none; +} +@include breakpoint(beta) { + .photo-options, .caption .map-link, .directions { + display: block; + } +} +.fig { position: relative;} +.image-gallery--wrapper .map-container { + left: -3%; + background: url("/media/img/mapbg-black.png") no-repeat top left !important; + @include breakpoint(beta) { + left: 4%; + } + @include breakpoint(gamma) { + left: 22%; + } + @include breakpoint(delta) { + left: 34%; + } +} + +.map-wrapper { + width: 400px; + height: 328px; + position: absolute; + bottom: 27px; + margin: 0px 0 0 44px; +} + +//.figcaption { +// clear: both; +// background: #1a1713; +// -moz-border-radius: 0 0 0.5em 0.5em; +// -webkit-border-radius: 0 0 0.5em 0.5em; +// border-radius: 0 0 0.5em 0.5em; +// color: white; +// margin: -0.25em 0 0 0; +// padding: 1em 0 1em 0; +// z-index: 100; +//} +// +//.caption { +// width: 100%; +// float: none; +// p { +// font: normal 0.75em Helvetica, Verdana, sans-serif; +// margin: 0.5em 0 0 0.75em; +// padding-bottom: 0.25em; +// } +//} + +//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss + +/** +* VARS +**/ + +// font-sizes +$font-size-huge: 2.8em; +$font-size-big: 2em; +$font-size-medium: 1.4em; + +$def-color-1: #FFFFFF; +$def-color-2: #B9CED2; + +$border-color-1: #9C9FA5; + +$def-font-color: #6c7176; +$font-color-highlight: #A99929; +$font-color-hover-1: #C3B919; + +$darkblue: #3F658B; +@mixin prefixr($var, $val) { + -webkit-#{$var}: $val; + -moz-#{$var}: $val; + -o-#{$var}: $val; + -ms-#{$var}: $val; + $var: $val; +} + +/* IE8 Stuff */ +.jslghtbx-ie8.jslghtbx { + background-image: url('../img/trans-bck.png'); + display: none; + &.jslghtbx-active { + display: block; + } + .jslghtbx-contentwrapper > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + display: block; + } + .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + } +} + +/* Main wrapper */ +.jslghtbx { + font-family: sans-serif; + overflow: auto; + visibility: hidden; + position: fixed; + z-index: 2; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + &.jslghtbx-active { + visibility: visible; + background-color: rgba(0, 0, 0, 0.85); + } +} + +/* loading-animation */ +.jslghtbx-loading-animation { + margin-top: -60px; + margin-left: -60px; + width: 120px; + height: 120px; + top: 50%; + left: 50%; + display: none; + position: absolute; + z-index: -1; + & > span { + display: inline-block; + width: 20px; + height: 20px; + border-radius: 20px; + margin: 5px; + background-color: #fff; + @include prefixr(transition, all .3s ease-in-out); + &.jslghtbx-active { + margin-bottom: 60px; + } + } +} + +.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation { + display: block; +} + +.jslghtbx-nooverflow { + overflow: hidden !important; // prevent showing of scrollbars on prev/next +} + +.jslghtbx-contentwrapper { + margin: auto; + visibility: hidden; + & > img { + background: #fff; + padding: .5em; + display: none; + height: auto; + margin-left: auto; + margin-right: auto; + opacity: 0; + } +} + +.jslghtbx-contentwrapper.jslghtbx-wrapper-active { + visibility: visible; + & > img { + display: block; + opacity: 1; + } +} + +/* Caption */ +.jslghtbx-caption { + display: none; + margin-left: auto; + margin-right: auto; + margin-top: 5px; + margin-bottom: 5px; + max-width: 450px; + color: #fff; + text-align: center; + font-size: .9em; +} + +.jslghtbx-active .jslghtbx-caption { + display: inline; + margin-right: 1em; +} + +/* Animation Stuff */ +.jslghtbx-contentwrapper.jslghtbx-animate > img { + opacity: 0; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + @include prefixr(transition, opacity .2s ease-in-out); +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-next { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-prev { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-init { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + cursor: pointer; +} + +/* Controls */ +.jslghtbx-close { + position: fixed; + right: 23px; + top: 23px; + margin-top: -4px; + font-size: 2em; + color: $def-color-1; + cursor: pointer; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + text-shadow: 0 0 10px #fff; + } + @media screen and(max-width: 1060px) { + font-size: 1.5em; + } +} + +.jslghtbx-next, +.jslghtbx-prev { + display: none; + position: fixed; + top: 50%; + max-width: 6%; + max-height: 250px; + cursor: pointer; + @include prefixr(transition, all .2s ease-in-out); + &.jslghtbx-active { + display: block; + } + & > img { + width: 100%; + } + +} + +.jslghtbx-next { + right: .6em; + &.jslghtbx-no-img:hover { + border-left-color: #787878; + } + @media screen and(min-width: 451px) { + right: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-left: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + right: 5px; + padding-left: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + right: .2em; + padding-left: 20px; + } +} + +.jslghtbx-prev { + left: .6em; + &.jslghtbx-no-img:hover { + border-right-color: #787878; + } + @media screen and(min-width: 451px) { + left: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-right: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + left: 5px; + padding-right: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-right: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + left: .2em; + padding-right: 20px; + } +} + +.jslghtbx-thmb { + @media screen and(min-width: 451px) { + margin: 1em; + } + @media screen and(max-width: 450px) { + margin: 1em 0; + } + padding: 2px; + max-width: 100%; + max-height: 140px; + cursor: pointer; + box-shadow: 0px 0px 3px 0px #000; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + box-shadow: 0px 0px 14px 0px #000; + } +} + +.p-link { + color: white !important; + @include fontsize(14); + &:after { + content: "\2197"; + } +} diff --git a/design/old/v8/_projects.scss b/design/old/v8/_projects.scss new file mode 100644 index 0000000..0bf4db2 --- /dev/null +++ b/design/old/v8/_projects.scss @@ -0,0 +1,257 @@ +.projects, .projects--intro p { + @include constrain_wide; +} +@include breakpoint(gamma) { + .projects--intro { + margin-top: 3rem; + -moz-column-count: 2; + -moz-column-gap: 30px; + -webkit-column-count: 2; + -webkit-column-gap: 30px; + column-count: 2; + column-gap: 30px; + } + p { + margin-top: 0; + } +} +.projects--list { + margin-top: 2em; + li { @extend %clearfix; margin-bottom: 2em; } + h1 { + @include fontsize(32); + a { + color: $body_font; + text-decoration: none; + } + } + @include breakpoint(gamma) { + h1 { + @include fontsize(24); + text-align: left; + font-weight: bold; + width: 40%; + float: left; + margin-top: -4px; + } + img { + float: right; + margin-left: 30px; + max-width: 640px; + } + li { margin-bottom: 4em } + p { + @include constrain_wide; + @include fontsize(17); + margin-right: 1em; + clear: left; + } + } + .projects--button { text-align: left; margin-left: 0} +} + +//################# NATIONAL PARKS PROJECT ####################### + +.main--full { + @include constrain_wide; + margin-top: 3em; + article { max-width: 100%; position: relative; margin-bottom: 3em;} + img { max-width: 100%; padding: 0;} + .buttons li { + display: inline; + @include fontsize(11); + text-transform: uppercase; + font-family: Helvetica Neue, Helvetica, sans-serif; + font-weight: 500; + margin: 5px; + line-height: 2.6em; + a { + color: $body_font_light; + } + } + @include breakpoint(beta) { + h2 { + text-align: left; + @include fontsize(14); + } + .buttons { + margin: 2px 10px .5em 0; + line-height: 2.6em; + float: right; + li { + a { + text-decoration: none; + padding: 0.75em 1.5em 0.65em; + background: #463215; + -moz-border-radius: 25px; + -webkit-border-radius: 25px; + border-radius: 25px; + } + } + } + @include breakpoint(gamma) { + h2 { @include fontsize(20); + } + .buttons { + margin: 0.5em 10px 0 0; + li a { + padding: 0.875em 1.75em 0.75em; + } + } + } + +} + .meta {height: 0;} +} + +.park--title { + @include fontsize(18); + font-family: Helvetica Neue, Helvetica, sans-serif; + color: white; + @include breakpoint(beta) { + @include transparent_class; + @include fontsize(32); + position: absolute; + top: 0px; + background: #201a11; + z-index: 1000; + margin: 0; + width: 100%; + text-align: left; + line-height: 2em; + font-size: 2em; + padding-left: 0.25em; +} +} +.park--subtitle { + @include fontsize(16); + @include breakpoint(beta) { + @include fontsize(20); + font-family: Helvetica Neue, Helvetica, sans-serif; + font-weight: normal; + line-height: 2.5; + color: white; + margin: 0 0 0 1em; + float: left; + padding: 0.3em 0; + } +} +.park--legend { + font-family: Helvetica Neue, Helvetica, sans-serif; + line-height: .6; + @include breakpoint(beta) { + @include transparent_class; + position: absolute; + bottom: 0; + width: 100%; + margin: 0; + background: #201a11; + } +} +.map-container { + width: 469px; + height: 392px; + position: absolute; + right: 20px; + bottom: 60px; + z-index: 2000; + margin: 0; + padding: 0; + background: url("/media/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("/media/img/parkbg.png") no-repeat top left; + font: normal 0.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; + } + } + } +} + +//################# EXPENSE TRACKER TABLES ####################### + +.expense-wrapper { + @include constrain_narrow(); +} +.expense { + min-width: 90%; + margin-bottom: 3em; + caption { + text-align: left; + padding: 1em 0; + @include fontsize(18); + } + thead tr { + border-bottom: 1px solid darken(#eff7ff, 10); + padding: 0; + font-weight: bold; + @include smcaps; + font-family: sans-serif; + @include fontsize(12); + } + text-align: left; + td { + width: 80%; + } + tr td { + padding: .5em .25em; + color: lighten($body_font, 10); + } + .odd, .total { + background-color: #eff7ff; + } + .total { + border-top: 1px solid darken(#eff7ff, 10); + } + tfoot:after { + @include faded_line_after; + } +} + +.end:after { + @include faded_line_after; +} +.upfront tfoot:after { + margin: 0; + height: 0; + background: none; + } diff --git a/design/old/v8/_queries.scss b/design/old/v8/_queries.scss new file mode 100644 index 0000000..db165ae --- /dev/null +++ b/design/old/v8/_queries.scss @@ -0,0 +1,31 @@ +$breakpoint-alpha: 38em; //608 +$breakpoint-alpha-2: 450px; +$breakpoint-beta: 49em; //784 +$breakpoint-beta-2: 620px; +$breakpoint-gamma: 960px; +$breakpoint-delta: 1170px; +$breakpoint-epsilon: $max_width; + +@mixin breakpoint($point) { + @if $point == "alpha" { + @media screen and (min-width:$breakpoint-alpha ){ @content; } + } + @if $point == "alpha-2" { + @media screen and (min-width:$breakpoint-alpha-2 ){ @content; } + } + @else if $point == "beta" { + @media screen and (min-width: $breakpoint-beta) { @content; } + } + @else if $point == "beta-2" { + @media screen and (min-width: $breakpoint-beta-2) { @content; } + } + @else if $point == "gamma" { + @media screen and (min-width: $breakpoint-gamma) { @content; } + } + @else if $point == "delta" { + @media screen and (min-width: $breakpoint-delta) { @content; } + } + @else if $point == "epsilon" { + @media screen and (min-width: $breakpoint-epsilon) { @content; } + } +} diff --git a/design/old/v8/_resume.scss b/design/old/v8/_resume.scss new file mode 100644 index 0000000..37cc20e --- /dev/null +++ b/design/old/v8/_resume.scss @@ -0,0 +1,149 @@ +.head { + @extend %clearfix; + @include constrain(780px); + margin-top: 4em; +} +.resume main header { + width: 100%; + h1 { + @include fontsize(36); + text-transform: uppercase; + letter-spacing: 3px; + font-weight: 600; + line-height: 1; + margin-bottom: 0; + color: #444; + } + h2 { + margin-top: .5em !important; + @include fontsize(14); + text-transform: uppercase; + letter-spacing: 1px; + font-style: italic; + color: #333; + } + @include breakpoint(gamma) { + width: 60%; + float: left; + text-align: left; + margin-top: .5em; + } +} +.h-resume { + h3,h2 { + @include constrain_narrow; + text-align: left; + } + h3 { + font-family: sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.75rem; + margin-top: 4em; + margin-bottom: 3em; + border-bottom: 1px dotted #333; + } + h2 { + margin-top: 2.5em; + margin-bottom: .25em; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 1rem; + } + h2 a, h2 a:visited { + text-decoration: none; + color: #444; + } +} +.meta { + @include constrain_narrow; + text-align: left; + margin-bottom: 1em; + time{ + display: inline; + } +} +.contact { + margin: 2em 0 1.5em; + @include constrain_narrow; + li { + display: block; + @extend %clearfix; + } + @include breakpoint(gamma) { + width: 160px; + float: right; + margin: 1.9em 0 1.5em; + li { + display: block; + } + } + h6, a { + font-size: 13px; + font-size: 0.8125rem; + line-height: 1.8; + margin: 0; + display: block; + float: left; + } + h6 { + font-size: 11px; + font-size: 0.6875rem; + line-height: 2.1; + text-transform: uppercase; + letter-spacing: 1px; + &:after { + content: ":"; + margin-right: 5px; + } + } + a { + font-family: sans-serif; + } +} +.publications-list { + text-align: left; + @include constrain_narrow; + h2 { + @include smcaps; + @include fontsize(12); + font-weight: 400; + text-align: left; + border-bottom: 1px dotted #333; + margin-bottom: 2em; + &:first-of-type { + margin-top: 3em; + } + } + h3, time { + display: inline; + } + time:before { + content: "\00a0 \00a0" + } +} +.publisher { + margin-top: 1em; + margin-bottom: 1em; +} +.pub-title { + margin-bottom: 1.75em; + a { + color: $brown; + text-decoration: none; + font-weight: 400; + } +} +.resume h6 { + @include constrain_narrow; + text-align: left; + font-weight: 400; + @include fontsize(12); +} +.toc { + @include constrain_narrow; + text-align: left; + a { + color: $brown; + } +} diff --git a/design/old/v8/_src.scss b/design/old/v8/_src.scss new file mode 100644 index 0000000..2be4ef3 --- /dev/null +++ b/design/old/v8/_src.scss @@ -0,0 +1,160 @@ +.latest { + @include constrain_narrow; + @include fontsize(12); + @include smcaps; + font-weight: 400; +} +.src-archive { + .topic-hed { + @include fontsize(20); + @include constrain_narrow; + margin-top: 1.5em; + margin-bottom: 1.5em; + @include breakpoint(beta) { + @include fontsize(28); + margin-top: 1em; + } + } + article { + margin-bottom: 3em; + p { + color: lighten($body_font_color, 15); + } + } + h2 { + @include constrain_narrow; + @include fontsize(22); + font-weight: 400; + margin-bottom: .25em; + a { + color: $body_font; + color: lighten($body_font, 15); + text-decoration: none; + } + } + + p { + text-align: left; + @include fontsize(16); + } + + @include breakpoint(beta) { + text-align: left; + } +} +.src-topics { + @include smcaps; + @include fontsize(11); +} +.src article { + ul { + @include constrain_narrow; + margin-top: 2em; + margin-bottom: 2em; + } + ul li { + text-align: left; + list-style-type: disc; + margin-left: 1em; + padding-left: .5em; + } + ol { + text-align: left; + @include constrain_narrow; + padding-left: 1em; + @include fontsize(18); + @include breakpoint(beta) { + max-width: 580px; + @include fontsize(17); + } + li { + margin-top: .75em; + } + } + .footnote ol { + list-style-position: outside; + @include breakpoint(beta) { + max-width: 680px; + } + } +} +.post--body pre { + margin: 1em auto !important; +} +.highlight { + padding: .5em; + margin-bottom: 1em; +} +.go:before { + content: "$ "; +} +code > .comment::after { + display:none; +} +#book-page .book-list { + @include constrain_narrow; + @include breakpoint(beta) { + .book-list-item { + width: 45%; + } + } +} +#book-page section { + @include constrain_narrow; + max-width: 100%; + @include breakpoint(gamma) { + margin-left: 80px; + p { + margin-left: 0; + } + } +} +.paypal-form-wrapper { + @include constrain_narrow; + text-align: left; + @include breakpoint(gamma) { + form { + margin: 2em 5em; + } + } +} + +@include breakpoint(beta) { + .btn-top { + margin-left: 1.2em + } + .btn-bottom { + margin-left: 5em; + } +} + +.smcaps{ + font-weight: 500; + letter-spacing: 1px; + margin: 3em 0 .5em 0; + @include generic_sans; + @include smcaps; + @include fontsize(14); + @include breakpoint(gamma) { + margin-left: 80px; + } +} +.dotted { + list-style-type: disc; + li { + margin-top: .5em; + margin-bottom: .5em; + } + @include breakpoint(gamma) { + font-size: 1.25rem; + line-height: 1.6; + } +} + +#essay-archive h1 { + @include constrain_narrow; +} +#essay-archive h4 { + margin-bottom: 3em; + margin-top: -.85em; +} diff --git a/design/old/v8/_writing_archive.scss b/design/old/v8/_writing_archive.scss new file mode 100644 index 0000000..69397b1 --- /dev/null +++ b/design/old/v8/_writing_archive.scss @@ -0,0 +1,150 @@ +.archive { + @extends %clearfix; + @include constrain_wide(); + margin-top: 3em; + .post--title { + text-align: left; + margin: .25rem 4px; + font-weight: normal; + @include fontsize(24); + a { + color: $body_font; + text-decoration: none; + font-style: italic; + } + @include breakpoint(gamma) { + @include fontsize(22); + margin: .1rem 4px; + } + } + .post--location { + @include fontsize(11); + } + .post--date{ + margin: 0 4px; + text-align: left; + } + .post--image img { background: none; max-width: 100%; padding: 0} + article { + width: 100%; + margin: 0; + display: inline-block; + margin-bottom: 2em; + vertical-align: top; + } + p { + margin-top: 0; + margin-left: 4px; + margin-right: 4px; + } + @include breakpoint(alpha) { + article { + width: 45.25%; + } + p { + @include fontsize(16); + } + .odd { + padding-right: 10px; + } + .even { + padding-left: 10px; + } + } + @include breakpoint(gamma) { + article { + width: 31%; + } + .odd, .even { padding: 0;} + .first { + padding-right: 10px; + } + .second { + padding-right: 10px; + padding-left: 10px; + } + .third { + padding-left: 10px; + } + p { + @include fontsize(14); + margin-top: 0; + margin-left: 4px; + margin-right: 4px; + } + } + @include breakpoint(delta) { + article { width: 354px;} + } + @include breakpoint(epsilon) { + article, article img { width: 410px;} + } +} + +.date-archive { + @extends %clearfix; + @include constrain_wide(); + margin: 0 auto; + margin-bottom: 9em; + max-width: 460px !important; + text-align: left; +} +.dater { + @extends %clearfix; + margin-top: 3em; + margin-bottom: 3em; + span { + @include smcaps; + @include fontsize(11); + font-family: sans-serif; + } + ul { + margin-top: .5em; + margin-bottom: 1.5em; + li { + @extends %clearfix; + clear: both; + } + } + +} +.arc-item { + clear: both; + margin: 0 auto; + a { + display: block; + float: left; + } + time { + float: right; + line-height: 36px; + } +} +.homepage--about .homepage--arc-header:after{ + @extend %clearfix; + display: block; + width: 100%; + margin: 2em auto 1em; + height: 150px; + background: url("/media/img/usa-resize.svg") 50% no-repeat; + background-size: 230px; + @include breakpoint(gamma) { + display: inline; + width: 0; + height: 0; + background: none; + } +} + +.homepage--about { + @include breakpoint(gamma) { + background: url("/media/img/usa-resize.svg") 0 60% no-repeat; + background-size: 120px; + } + @include breakpoint(delta) { + background-size: 170px; + } + @include breakpoint(epsilon) { + background-size: 250px; + } +} diff --git a/design/old/v8/_writing_details.scss b/design/old/v8/_writing_details.scss new file mode 100644 index 0000000..9ba4015 --- /dev/null +++ b/design/old/v8/_writing_details.scss @@ -0,0 +1,829 @@ +// ############################################## +// Most of the basic formatting for paragraphs is +// handled in _global.scss. This just handles the +// bits specific to article detail pages +// e.g. header, footnotes, images, page nav, two +// col and dark page +// ############################################## + +figcaption, figcaption a { + line-height: 1.9; + padding-left: .5em; + text-align: left !important; + @include fancy_sans; + @include fontsize(12); + color: #666; +} +figcaption a:visited { + color: #666; +} +.post--header { + @include constrain_narrow(); + @include breakpoint(beta) { + text-align: left; + margin-top: 3em; + margin-bottom: .75em; + } + @include breakpoint(delta) { + margin-top: 4em; + } +} +.page--title { + @include constrain_narrow(); + @include breakpoint(beta) { + text-align: left; + margin-top: 2em; + } +} +.post--location { + @include smcaps; + @include fontsize(11); +} +.post--article, .notes .h-entry, { + h2, h3 { + @include constrain_narrow; + font-family: Helvetica Neue, Helvetica, sans-serif; + text-align: left; + } + blockquote { + @include constrain_narrow; + text-align: left; + padding: 20px; + font-style: italic; + p { + margin-left: 1em; + margin-right: 1em; + } + } + .notes { + @include smcaps; + @include constrain_narrow; + font-weight: normal; + text-align: left; + &:before { + @include faded_line_after; + margin-bottom: 3em; + } + } + .addendum { + @include constrain_narrow; + text-align: left; + dt { + margin-left: -30px; + font-style: italic; + padding-left: 30px; + text-indent: -30px; + margin-bottom: .5em; + } + dd { margin-left: 0; margin-bottom: 1.5em;} + } + .numeral { + display: block; + font: bold 1.2em sans-serif; + margin-bottom: 0; + margin-top: 1em; + } + .vid { + margin: 4em 0; + } + .small { + font-size: 96%; + } + figure { + @include constrain_wide; + margin-bottom: 2em; + } + figure.picfull { + max-width: 680px; + margin-bottom: 2em; + border-bottom: 1px solid #eae6e6; + padding-bottom: .5em; + } + cite { + font-style: italic; + } +} +.footnote-ref { + padding: 0 2px; + @include fontsize(16); +} +.dark, .black { + .footnote-ref { + padding: 0px 3px 0 4px; + } + figure.picfull { + border-color: #424040; + } + figcaption { + color: #8F8B8B; + } +} +.black { + .post--article { + color: #9C9292; + } + .post--article img { + padding: none; + background: none; + } + #page-navigation a { + color: $body_font_light; + } +} + + +//### Inline Maps ### +#detail-map-canvas { + width: 100%; + height: 0; + margin: 0 auto; + float: none; + border: none !important; +} +#detail-map-canvas .detail-map-inner-canvas { + width: 100%; + height: 100%; + border: none !important; +} +#detail-map-canvas img { + max-width: 100%; + padding: 0; + margin: 0; + background: none; +} + +/* special case for debi's master list*/ +.list-debi { + @include constrain_narrow(); + text-align: left; + > li { + font-weight: bold; + margin: .25em 0 .25em 0; + } + li ul li { + font-weight: normal; + margin: .25em 0 .25em .5em; + &:before { + content: "\2022"; + display: inline-block; + margin-right: 10px; + margin-top: 2px; + } + } +} + +/* occassionally I have section breaks */ +.break { + display: block; + margin: 3em auto; + content: ""; + height: 1px; + width: 100%; + background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0)); + background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0)); +} + +//### FOOTNOTES ### +.footnote { + @include constrain_narrow(); + margin: 1em auto 0 auto; + padding: 0; + list-style-type: none; + &:before, &:after { + @include faded_line_after; + @include breakpoint(beta) { + margin-bottom: 2em; + } + } + p { + font-size: 0.875em; + line-height: 1.4; + } + hr {display: none;} + ol { + padding-left: 1em; + @include breakpoint(alpha) { + margin-left: 1em; + } + } +} +.dark .footnote:before { + @include light_faded_line_after; +} + +//### IMAGES AND FIGURES ### +.postpic, .postpicright { + display: block; + width: auto; +} +.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; +} +.picfullv { + margin-top: 20px; +margin-left: auto; +margin-right: auto; +display: block; +} +img.picwide { + background: none; + max-width: 100%; + clear: both; + margin: 1em 0; + @include breakpoint(gamma) { + margin-left: -140px; + max-width: $breakpoint-gamma; + } + @include breakpoint(delta) { + margin-left: -245px; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + margin-left: -300px; + max-width: $max_width *.99; + } +} +.picwide figcaption { + margin-bottom: 2em; + border-bottom: 1px solid #eae6e6; + padding-bottom: .5em; + @include generic_sans; + @include breakpoint(gamma) { + text-align: right; + width: $breakpoint-gamma; + max-width: $breakpoint-gamma; + } + @include breakpoint(delta) { + width: $breakpoint-delta; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + width: $max_width; + max-width: $max_width; + } +} +figure.picwide img.picwide { + margin: auto !important; + padding: 0 !important; + @include breakpoint(epsilon) { + margin-left: 0; + } +} +.notes figure.picwide, .h-entry figure.picwide, .birds figure.picwide { + @include breakpoint(gamma) { + margin-left: -140px; + } + @include breakpoint(delta) { + margin-left: -245px; + } + @include breakpoint(epsilon) { + margin-left: -300px; + max-width: 100% !important; + } +} +.src .picwide, .h-entry figure.picwide { + margin-left: auto !important; +} +.picwide960 { + clear: both; + margin: 1em 0; + @include breakpoint(gamma) { + margin-left: -140px; + width: 960px; + max-width: 960px; + } +} +.sans-caption { + @include generic_sans; + small, a { + display: block; + font-size: 64%; + } + & > .picwide960 { + margin-bottom: 0; + } +} + +.figure { + position: relative; + max-width: 90%; + margin: 0 auto; + @include breakpoint(gamma) { + max-width: 640px; + } + @include breakpoint(delta) { + max-width: 680px; + } + .legend { + display: block; + @include transparent_class; + position: absolute; + bottom: 10px; + left: 10px; + font-size: 13px; + padding: 8px 0 8px 2%; + width: 96%; + background: $brown; + color: #999999; + } +} +.picgroup { + margin: 0 auto 1.5em; + max-width: 90%; + .picgroup-cap { + font-size: 88%; + max-width: 550px; + margin: -8px auto 0; + text-align: left; + background: $brown; + color: #999999; + padding: 8px 1.4%; + } + @include breakpoint(gamma) { + img { + max-width: 555px; + padding: 8px; + } + } + @include breakpoint(delta) { + .picgroup-cap { + padding: 8px 1%; + } + } + @include breakpoint(epsilon) { + .picgroup-cap { + max-width: 1128px; + margin: -14px auto 0; + padding: 9px; + } + } +} +.image-cluster, .cluster { + .row-2, .row-3, .row-4, .stack-2, .stack-3 { + display: block; + } + @include constrain_wide; + @extend %clearfix; + margin-bottom: 2em; + margin-top: 2em; + max-width: 100%; + p { + max-width: 100%; + margin-top: 0; + margin-bottom: 0; + } + + img { + width: 100%; + padding: 0; + margin-top: 0; + max-width: 100%; + } + img.picwide { + margin: 0; + } + figcaption, figure { + margin-bottom: 0; + border: none; + } + .stack-2 { + float: left; + } + @include breakpoint(beta-2) { + figure { + max-width: 99%; + } + img.picwide { + padding: 0; + margin-bottom: 0; + max-width: 100%; + width: 100%; + background: none; + } + .row-2 { + a:last-of-type img, figure:last-of-type { + float: right; + margin-right: 0; + } + figure:first-child { + float:left; + } + } + .pic66 { + max-width: 63.9%; + } + figure.pic66 { float: left; max-width: 65.9%;} + .row-right .pic25 { + max-width: 49%; + } + .pic25 { + max-width: 24.5%; + } + .stack-2 { + max-width: 32.95%; + float: left; + } + .stack-2 + a img { + max-width: 66.6%; + float: right + } + .extra-2 { + max-width: 65.9%; + } + .right { float: right;} + .right + a img { + float:left + } + } + @include breakpoint(beta) { + img.picwide { + max-width: 100%; + } + div img { + width: 100%; + padding: 0; + margin: 0 6px 0 0; + } + div a:last-of-type { + img { + margin-right: 0; + } + } + .pic5 { + max-width: 49.5%; + margin: 0; + float: left; + figcaption { + padding-bottom: .5em; + } + } + img.pic5 { + margin: 0 6px 6px 0; + } + .pic25 { + max-width: 50%; + } + .row-3 .pic33 { + float: left; + max-width: 32.3%; + margin: 0 0 6px 0; + padding-right: 6px; + background: transparent; + } + } + @include breakpoint(gamma) { + figure { + max-width: 100%; + } + .row-right { + float: right; + } + .row-3 .pic33 { + max-width: 32.6%; + } + } + @include breakpoint(epsilon) { + .row-3 .pic33 { + max-width: 32.8%; + } + .pic5 { + max-width: 49.7%; + } + } + +} + +.embed-wrapper { + @include constrain_wide; + @include breakpoint(gamma) { + margin-left: auto; + margin-right: auto; + } +} +.embed-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 100%; + height: auto; +} +.embed-container iframe, .embed-container object, .embed-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.post--body--single ul { + @include constrain_narrow(); + margin: 1em auto; + text-align: left; + list-style-type: disc; +} + +//### PAGE NAVIGATION ### +#page-navigation { + margin: 2em auto; + @include constrain_narrow(); + text-align: center; + display: table; + ul { + margin: 0 auto; + width: 100%; + text-align: center; + padding: 0; + } + li { + margin: 6px auto; + clear: both; + line-height: 24px; + text-align: center; + } + span { + min-width: 70px; + display: block; + text-align: right; + margin-right: 10px; + margin-top: 2px; + float: left; + } + a { + display: block; + float: left; + text-align: left; + font-style: italic; + color: $brown; + text-decoration: none; + } +} + +//### COMMENTS AND FORMS ### +.comments--header { + font-family: Helvetica Neue, Helvetica, sans-serif; + line-height: 6em; + @include fontsize(16); + font-style: italic; + &:before { + @include faded_line_after; + margin-top: 2em; + } +} +.comments--wrapper { + @include constrain_narrow(); + text-align: left; + margin-top: -2em; +} +.comment { + margin-top: 2.5em; + margin-bottom: 2.5em; + &:first-child { + margin-top: none; + } + &:after { + @include faded_line_after; + } + &:last-child:after { + display: none; + } +} +.comment--head, .comment--body { + margin-left: 80px; +} +.comment--head { + margin-bottom: 1em; +} +.comment--body { + margin-bottom: 3em; +} +.who { + font-family: Helvetica Neue, Helvetica, sans-serif; + @include fontsize(18); +} +.when { + @include fontsize(13); + margin-left: 1em; + font-style: italic; +} + +.gravatar { + border: 2px $brown solid; + background: transparent; + max-width: 100%; + padding: 0; + float: left; + margin-top: 5px; +} + + +.comment--form--wrapper { + @include constrain_narrow(); + &:before { + @include faded_line_after; + } +} +.comment--form--header { + margin-top: 2em; +} +.comment--form { + margin: 0 auto; + @include breakpoint(delta) { + margin-left: 20% + } + label { + display: block; + font-weight: 500; + letter-spacing: 1px; + font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; + @include fontsize(13); + } + input, textarea { + padding: .25em; + border: #c5c5c5 1px solid; + border-radius: .125em; + color: darken($body_font_light, 20); + width: 100%; + @include breakpoint(gamma) { + width: 70%; + } + } + input[type="submit"] { + width: auto; + color: white; + letter-spacing: 1px; + background: $orange; + font: bold .65em Verdana,sans-serif; + text-transform: uppercase; + border: none; + border-radius: .25em; + padding: 8px 12px 7px; + } + blockquote { + margin: 3em 0; + p { + @include fontsize(18); + } + } + h2, h3 { text-align: left} +} +.comment--form--header-h1 { + @include breakpoint(delta) { + text-align: left; + margin-left: 30%; + @include fontsize(24); + } +} +.cform-arc { + @include breakpoint(delta) { + margin-left: 30%; + } +} + +// ############################################## +// On double and double-dark make the top wide +// with two columns of text (nothing for ie9- +// ############################################## +@include breakpoint(gamma) { + .post--header--double { + float: left; + max-width: 200px; + margin-right: 2em; + margin-top: 5px; + .post--title, .post--date, .post--location { + text-align: right; + } + .post--title { + line-height: 1.1; + margin-top: 1.2em; + } + } + .col { + margin-top: 3rem; + -moz-column-count: 2; + -moz-column-gap: 30px; + -webkit-column-count: 2; + -webkit-column-gap: 30px; + column-count: 2; + column-gap: 30px; + p { margin-top: 0; margin-bottom: 2em;} + p:first-of-type:first-letter { + @include fontsize(60); + line-height: 42px; + display: block; + float: left; + padding: 11px 8px 5px 0; + } + } +} +.post--article--double { + @include constrain_wide(); +} + +// ############################################## +// On dark and double-dark pages we invert the +// colors, most of which happens in _global but +// the page nav links need to be done here +// ############################################## +.dark #page-navigation a { + color: $body_font_light; +} + +.map--icon { + @include constrain_wide; + display: block; + width: 35px; + height: 35px; + border-radius: 50%; + border: 2px solid $brown; + margin: -38px 3em 0; + float: right; + @include breakpoint(gamma) { + margin: 0 auto; + float: none; + } +} +.entry-footer { + @extend %clearfix; + @include constrain_narrow; + margin-top: 2em; + text-align: left; + li { + margin: .25em 0; + } + li ul { + columns: 2 auto; + } + li ul li:before { + content: "\2022"; + margin-right: .35rem; + color: lighten($body_font, 40); + } + .grouper { + margin-top: 1em; + } + a { + text-decoration: none; + color: lighten($body_font, 20); + } + #wildlife li ul li { + color: lighten($body_font, 40); + a { + color: lighten($body_font, 10); + } + } + @include breakpoint(beta) { + margin-bottom: 4em; + #wildlife { + max-width: 55%; + float: left; + margin-right: 1.2rem; + } + #recommended-reading{ + img { + max-width: 180px; + } + } + } + aside { + @extend %clearfix; + margin-bottom: 3em; + } + &:after, &:before { + @include faded_line_after; + @include breakpoint(beta) { + display: block; + margin-bottom: 2em; + } + } +} +#field_notes { + @include breakpoint(beta) { + max-width: 33%; + float: left; + margin-top: .15em; + margin-left: 7em; + } + li:before { + content: "\2022"; + margin-right: .35rem; + color: $body_font_light; + } +} +.rr-clear { + clear: left; +} diff --git a/design/old/v8/iev8.scss b/design/old/v8/iev8.scss new file mode 100644 index 0000000..574ab55 --- /dev/null +++ b/design/old/v8/iev8.scss @@ -0,0 +1,23 @@ +h1 a:before { + background: url("/media/logo-new-treeonly.png") center top no-repeat !important; +} +.logo { + zoom: expression( + this.runtimeStyle.zoom="1", + /* ::before polyfill - creates <i class="ie-before"></i> */ + this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before", + /* ::after polyfill - creates <i class="ie-after"></i> */ + this.appendChild( document.createElement("i") ).className="ie-after" + ); +} + +.ie-before { + background: url("/media/logo-new-treeonly.png") center top no-repeat !important; + content: "home-icon"; + text-indent: -9999em; + width: 95px; + height: 85px; + display: block; + float: left; + margin-right: 20px; +} diff --git a/design/old/v8/screenv8.scss b/design/old/v8/screenv8.scss new file mode 100644 index 0000000..71988d2 --- /dev/null +++ b/design/old/v8/screenv8.scss @@ -0,0 +1,29 @@ +//@import 'flexbox'; //Flexbox relies on https://github.com/timhettler/compass-flexbox +@import "compass/css3/flexbox"; +@import "_normalize.scss"; +@import "_fonts.scss"; +@import "_mixins.scss"; +@import "_queries.scss"; +@import "_global.scss"; +@import "_header.scss"; +@import "_footer.scss"; +@import "_pagination.scss"; +@import "_writing_details.scss"; +@import "_notes.scss"; +@import "_writing_archive.scss"; +@import "_photos.scss"; +@import "_leaflet.scss"; +@import "_map.scss"; +@import "_projects.scss"; +@import "_homepage.scss"; +@import "_mailing-list.scss"; +@import "_birds.scss"; +@import "_books.scss"; +@import "_src.scss"; +@import "_figments.scss"; +@import "_resume.scss"; +@import "_inbox.scss"; +@import "_house.scss"; + +//@import _large.sass +//@import _desktop_lg.sass |