diff options
Diffstat (limited to 'bak/design/old/v9')
24 files changed, 3758 insertions, 0 deletions
diff --git a/bak/design/old/v9/_archives.scss b/bak/design/old/v9/_archives.scss new file mode 100644 index 0000000..b5cb4af --- /dev/null +++ b/bak/design/old/v9/_archives.scss @@ -0,0 +1,525 @@ +// container for archive intros +.intro { + @include constrain_wide; + font-family: $fancy_serif; + @include breakpoint(alpha){ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); + grid-gap: 1rem; + } + +} +// container for archive intros, narrow version +.intro-narrow { + margin-top: 3rem; + @include constrain_narrow; + p { + @include fontsize(18); + font-style: italic; + } + h1 { + @include smcaps; + @include fontsize(18); + text-align: left; + } +} +.essay-intro { + font-family: $fancy_serif; + border-bottom: 3px double #efefef; + padding-bottom: 3rem; + margin-bottom: 4rem; + margin-top: 3rem; + p { + font-style: normal !important; + @include fontsize(18); + line-height: 1.5; + margin-top: 1.2rem !important; + &:first-of-type { + margin-top: 2rem !important; + } + } + a { + text-decoration: underline !important; + text-decoration-color: $orange !important; + + } + ul { + padding-left: 1rem !important; + list-style-type: disc !important; + } + li { + margin-bottom: 4px !important; + } +} +.archive-list .essay-intro { + h2 { + @include fontsize(38); + } + h3 { + font-weight: normal; + font-family: $fancy_serif; + @include fontsize(22); + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + } +} + +// container for archive grid items +.archive-grid > article { + display: inline-block; + width: 32%; + vertical-align: top; +} +.archive-grid { + list-style-type: none; + margin: 0; + padding: 0; + @include constrain_wide; + display: grid; + margin-top: 3rem; + @include breakpoint(alpha){ + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + grid-gap: .75rem; + } + @include breakpoint(beta){ + grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); + grid-gap: .75rem; + } +} +.archive-circle-grid { + grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); + grid-gap: 4rem; + grid-row-gap: 3rem; + margin-top: 5rem; + img { + width: 220px; + height: 220px; + border-radius: 50%; + border: 6px solid #333; + object-fit: cover; + } +} + +// wrapper for archive pages, makes sure there isn't a narrow col width +.meta-archive { + @include constrain_wide; +} +.archive-intro { + @include constrain_narrow; + border-bottom: 3px double #efefef; + padding-bottom: 3rem; + margin-bottom: 4rem; + margin-top: 3rem; + ul { + font-family: $fancy_serif; + @include fontsize(24); + } +} + +@supports (display:grid) { + .archive-grid > article { + width: auto; + } +} +// body class archive, article header (usually inherits h2) +.archive .post-title { + font-family: $fancy_serif; + @include fontsize(26); + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + a { + @include plain_a; + } +} +// the date and location are small caps +.post-date, .post-location { + @include smcaps; + @include fontsize(14); + font-weight: bold; + color: $secondary-link-color; + line-height: 1.2; + text-align: left; + margin: 0; +} +// slightly larger summary than a p in this context +.post-summary { + font-family: $fancy_serif; + @include fontsize(16); + line-height: $archive_p_line_height; + margin-top: .25rem; + text-align: left; + margin: 0; +} + +.archive-list { + @include constrain_narrow; + @include breakpoint(epsilon) { + } + text-align: left; + h1, .list-title { + text-align: left; + @include fancy_sans; + @include fontsize(36); + font-weight: normal; + } + span { + @include fancy_sans; + @include smcaps; + @include fontsize(13); + font-weight: bold; + color: #999; + } + ul { + padding: 0; + list-style-type: none; + } + a { + text-decoration: none; + color: lighten($body_font_color, 20); + &:hover { + color: $link_color; + } + } + h2, .list-hed { + font-family: $fancy_serif; + @include fontsize(32); + margin: 0; + line-height: 1.1; + } + p { + margin: 0; + @include fontsize(20); + font-style: italic; + } +} +// Specific pages vary slightly +// Books +.book-grid { + @include breakpoint(alpha){ + grid-gap: .75rem; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + } + @include breakpoint(beta){ + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + grid-gap: .75rem; + } + .post-title { + @include fontsize(22); + line-height: 1.4; + } + .author { + @include smcaps; + font-weight: 400; + @include fontsize(12); + text-align: left; + margin: 0; + + } + .book-stars { + display: block; + } +} + +// Dialogues +.dialogue-grid { + .post-title { + font-style: normal; + @include fontsize(22); + line-height: 1.4; + } +} +// Dialogues, used in both archives and details +.sci { + font-style: italic; + @include fontsize(18); +} + +// figments +.figments-grid { + @include constrain_narrow; + .post-title { + font-style: normal; + @include smcaps; + @include fontsize(16); + } +} + +.wide-list { + @include constrain_wide; + li { + margin-top: 3rem; + margin-left: auto; + margin-top: auto; + margin-bottom: 3rem; + } + .permalink { + display: block; + text-align: left; + } + @include breakpoint(gamma) { + li { + display: flex; + } + .wide-wrapper { + flex: 3 0px; + order: 1; + } + a { + flex: 3 0px; + order: 2; + } + .post-summary p { + @include fontsize(20); + margin-right: 2rem; + } + } +} + +// Homepage +#home .header-wrapper { + margin-bottom: 0; +} +#home section { + @extend %clearfix; + @include constrain_wide; + margin-top: 4rem; + margin-bottom: 4rem; +} +#home section.bio-short { + margin-bottom: 6rem; +} +@include breakpoint(gamma){ + .recent { + max-width: 64%; + width: 64%; + float: left; + } + .popular { + max-width: 33%; + width: 33%; + float: right; + } +} +.banner { + margin-top: 0 !important; + .post-image { + overflow: hidden; + } + article { + position: relative; + } + figcaption { + border: none; + position: absolute; + margin: 0; + bottom: 0; + width: 100%; + 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); + font-weight: 400; + padding-bottom: 30px; + time {display: none;} + .btn {text-decoration: none; color: white; } + } + .hero-text-wrapper { + padding-top: 2rem; + @include constrain_narrow; + color: white; + font-family: $headline_font_serif; + .post-title, .post-subtitle { + font-style: normal; + text-align: center; + margin-bottom: 0; + line-height: 1; + @include fontsize(42); + a { + color: white; + margin-bottom: 0; + text-decoration: none; + } + } + .post-subtitle { + font-style: italic; + @include fontsize(22); + margin-top: .45rem; + } + .post-location { + text-align: center; + margin-top: .5rem; + .h-adr { + border-top: 1px solid #423f3f; + display: inline-block; + padding-top: .5rem; + } + } + a { + color: $body_font_light; + padding: 0; + border: none; + margin-top: .5rem; + } + } + .post-location { + color: lighten($body_font_light, 5); + a { + color: lighten($body_font_light, 5); + text-decoration: none; + @include fontsize(14); + } + } + .btn { + @include smcaps; + @include fancy_sans_bold; + @include fontsize(12); + line-height: 1; + display: block; + max-width: 40px; + background: #b53a04; + border-radius: .35em; + color: white !important; + text-transform: uppercase; + padding: .85rem 1rem .55rem !important; + text-align: center; + margin: 2rem auto 0; + } + @include breakpoint(gamma){ + max-height: 900px; + .post-image { + max-height: 900px; + } + } +} +.homepage-map-img { + width: 350px; + height: auto; + @include breakpoint(delta){ + float: left; + width: 350px; + margin-right: 2rem; + } + +} +@include breakpoint(delta){ + .addafter { + &:after { + content: "to the left"; + } + } + .subcontent { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } +} +.homepage-section-header { + @include fancy_sans; + @include fontsize(24); + font-weight: normal; + text-align: left; + @include breakpoint(gamma){ + @include fontsize(28); + line-height: 1.4; + } +} +.popular, .recent { + .post-title { + @include fontsize(22); + font-weight: 400; + } + .post-image { + max-height: 12rem; + overflow: hidden; + } + img { + margin-top: -20% + } +} +.homepage-next { + margin: 0 auto; + text-align: center; + a { + @include fontsize(14); + @include fancy_sans; + @include smcaps; + font-weight: 500; + text-decoration: none; + padding: 12px 10px 12px; + border: $link_color 1px solid; + &:after { + content: "\21E2"; + margin-left: 4px; + } + &:hover { + background: $link_color; + color: white; + } + } +} +.essay-archive { + li { + margin-bottom: 2.8rem; + } +} +.fancy-archive-list { + li { margin-bottom: 3.8rem } + p { + line-height: 1.3; + margin-top: 4px; + } + h3.p-summary { + @include fontsize(22); + font-weight: 300; + font-family: $headline_font_serif; + font-style: italic; + margin-top: .25rem; + margin-bottom: .25rem; + line-height: 1.2; + } + .post-location { + margin: .5rem 0 0 0; + } +} +.circle-img-wrapper { + width: 106px; + height: 106px; + float: left; + overflow: hidden; + border-radius: 50%; + border: 3px solid #666; + margin-right: .5rem; + img { + width: 160px; + max-width: 160px; + } + @include breakpoint(gamma) { + margin-left: -128px; + margin-top: -4px; + } +} + + +//.note-pad-top { +// //make a field note among photos stand out more +// margin-top: 8rem !important; +// &:before { +// margin-bottom: 2.5rem; +// @include faded_line_after; +// } +//} +//.note-pad-bottom { +// //make a field note among photos stand out more +// margin-bottom: 8rem !important; +// &:after { +// @include faded_line_after; +// } +//} diff --git a/bak/design/old/v9/_comments.scss b/bak/design/old/v9/_comments.scss new file mode 100644 index 0000000..39c7930 --- /dev/null +++ b/bak/design/old/v9/_comments.scss @@ -0,0 +1,122 @@ +//### COMMENTS AND FORMS ### +.comments--header { + @include constrain_narrow; + @include fancy_sans; + line-height: 6em; + @include fontsize(16); + font-style: italic; + margin-top: 2em; +} +.comments--wrapper { + @include constrain_narrow(); + text-align: left; + margin-top: -2em; +} +.comment { + margin-top: 2.5em; + margin-bottom: 2.5em; + padding-top: 3rem; + &:first-child { + margin-top: none; + } + &:after { + @include faded_line_after; + } + &:last-child:after { + display: none; + } +} +.comment--head, .comment--body { + @include breakpoint(alpha) { + margin-left: 80px; + margin-top: -2rem; + } +} +.comment--head { + margin-bottom: 1em; +} +.comment--body { + margin-bottom: 3em; + @include fontsize(22); + hr { + width: 20%; + overflow: visible; + padding: 0; + border: none; + border-top: 2px solid #d4d4d4; + color: #efefef; + background: none; + } +} +.who { + @include fancy_sans; + @include fontsize(22); +} +.when { + @include fancy_sans; + @include fontsize(15); + color: #999; + margin-left: 1em; +} + +.gravatar { + border: 2px $brown solid; + background: transparent; + max-width: 100%; + padding: 0; + float: left; + margin-top: 5px; + margin-right: 8px; + @include breakpoint(alpha) { + margin-right: 0; + } +} + + +.comment--form--wrapper { + @include constrain_narrow(); + p { + font-family: $fancy_serif; + } + input[type="submit"] { + display: inline-block; + @include fancy_sans; + @include fontsize(14); + font-weight: 600; + width: auto; + text-transform: uppercase; + padding: 8px 12px 7px; + } + .submit { + @extend %clearfix; + display: block; + margin-right: 0; + } + .submit .btn { + float: right; + &:first-of-type { + margin-left: 5px; + } + } + label { + left: 1.2rem !important; + } +} +.comment-form-border{ + border-top: 3px double #efefef; +} +.comment--form--header { + margin-top: 2em; + .hed { + @include fontsize(28); + margin: 0; + } + .subhed { + font-style: italic; + @include fontsize(20); + line-height: 1.25; + margin-top: 0; + margin-bottom: 0; + } +} + diff --git a/bak/design/old/v9/_details.scss b/bak/design/old/v9/_details.scss new file mode 100644 index 0000000..53e819f --- /dev/null +++ b/bak/design/old/v9/_details.scss @@ -0,0 +1,601 @@ +.detail { + #article { + padding-bottom: 2rem; + border-bottom: 3px double #efefef; + } + article { + font-family: $fancy_serif; + @include constrain_narrow; + margin-top: 4rem; + h1 { + font-family: $fancy_serif; + line-height: 1em; + letter-spacing: -1px; + @include fontsize(48); + font-weight: normal; + margin-bottom: .25rem + } + ul { + text-align: left; + @include fontsize(18); + } + } + .post-subtitle { + font-style: italic; + font-size: 1.4rem; + line-height: 1.25; + margin-top: 0; + margin-bottom: 0; + } + .post-subtitle-segundo { + @include fancy_sans; + @include smcaps; + @include fontsize(13); + font-weight: bold; + color: #999; + + } + .post-linewrapper { + margin-top: 1rem; + padding-top: 1rem; + display: inline-block; + border-top: 1px solid #efefef; + } + .post-location { + color: #b6b6b6; + text-align: center; + a { + color: #b6b6b6; + text-decoration: underline; + text-decoration-color: $orange; + } + @include breakpoint(gamma) { + text-align: left; + } + } + .post-date { + text-align: center; + @include breakpoint(alpha) { + text-align: left; + } + } + .map { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + } + .post-header { + @include fancy_sans; + @include fontsize(18); + color: lighten($body_font_color, 20); + padding-bottom: 2.6rem; + border-bottom: 1px solid #efefef; + @include breakpoint(alpha) { + text-align: left; + } + time { + } + } + p:first-of-type { + margin-top: 2.6rem; + } + h4, h5 { + @include fancy_sans; + margin: 3rem 0 0 0; + } + h4 + p, .afterward h4 + p { + margin-top: .125rem; + } + h5 { + margin: 0 + } + .afterward { + p {font-style: italic;} + h4 { + margin-bottom: 0; + } + } + p.small { + @include fontsize(18); + } + .sci { + text-align: center; + @include fontsize(24); + font-weight: 400; + margin: 0; + + } + .sci:nth-child(3) { + @include fontsize(18); + margin-bottom: 2rem; + } + ul { + list-style: circle; + margin-left: 2.5em; + list-style-position: outside; + margin-bottom: 2.4em; + } + // Ack, id selector, so wrong, but easy handles the slightly different footer + // in the dialogue section that lists all the sightings + #endnode { + h5 { + @include fontsize(14); + @include smcaps; + @include fancy_sans; + margin-bottom: 1rem; + margin-top: 2rem; + } + ul { + margin-bottom: 2em; + list-style-type: none; + padding: 0; + li { + color: lighten($body_font_color, 30); + margin-bottom: 0; + margin-top: 0; + &:before { + content: "\2022"; + color: lighten($body_font_color, 30); + margin-right: .35rem; + } + } + } + } + #detail-map-canvas { + height: 400px; + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -48vw; + margin-right: -49vw; + } +} +.post-dateline { + display: inline-block; + margin-top: 0em; + padding-top: 1rem; + padding-bottom: 2.6rem; + border-top: 1px solid #efefef; +} +header.tight { + margin-bottom: 3rem; + * { + margin: 0; + text-align: center; + } + h1 { + margin-bottom: 1rem; + } + h2 { + display: inline-block; + border-top: 1px solid darken(#efefef, 10); + padding-top: 1rem; + } + h3 { + margin-top: .35rem; + } +} +h4.post-source { + @include fontsize(14); + @include smcaps; + padding-bottom: 0em; + margin-bottom: 0; + margin-top: 0; + font-weight: bold; + color: #b6b6b6; + a { + color: #b6b6b6; + &:hover { + color: $link_color; + } + } +} +.post-location { + h3 { + display: inline; + @include fontsize(14); + } + a { + color: $secondary_link_color; + text-decoration: none; + } +} +.post-essay ~ p:first-child:first-letter { + @include fancy_sans; + font-size: 75px; + line-height: 60px; + padding-top: 4px; + padding-right: 8px; + padding-left: 3px; +} +//### GUIDE STUFF ### +.product-card { + margin: 5rem 0; +} +.detail .product-link { + a { + display: block; + padding: 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + font-size: 16px; + text-decoration: none; + } +} +.buy-btn { + @include fancy_sans; + display: block; + padding: .5rem 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + @include fontsize(16); + text-decoration: none; + margin-right: 1rem; +} +.buy-btn-wrapper { + display: flex; + justify-content: start; + align-items: center; + align-content: space-between; + h4 { + margin: 0 1.5rem 0 0; + line-height: normal; + &:after { + content: ":"; + } + } + h5 { + margin-right: 1rem; + } +} +.post-guide .buy-btn-wrapper { + margin-top: 4rem; + justify-content: center; +} +.detail .post-guide { + h3 { + @include fontsize(27); + margin: 4rem 0 .5rem 0; + & + p { + margin-top: 0; + } + } +} +//### PAGE NAVIGATION ### +.nav-wrapper { + @include constrain_narrow(); + border-bottom: 3px double #efefef; +} +#page-navigation { + margin: 2em auto; + text-align: center; + display: table; + ul { + list-style-type: none; + margin: 0 auto; + width: 100%; + text-align: center; + padding: 0; + } + li { + margin: 6px auto; + clear: both; + line-height: 24px; + text-align: center; + } + span { + @include fancy_sans; + @include fontsize(14); + min-width: 70px; + display: block; + text-align: right; + margin-right: 10px; + float: left; + } + a { + display: block; + float: left; + font-family: $fancy_serif; + text-align: left; + font-style: italic; + color: $brown; + text-decoration: none; + } +} + +.article-afterward { + @extend %clearfix; + @include constrain_narrow; + padding-bottom: 2rem; + .article-card-mini { + margin-bottom: 0 + } + .hedtinycaps { + display: inline-block; + margin-bottom: 2.5rem; + border-bottom: 2px solid #efefef; + } + @include breakpoint(gamma) { + @include constrain(960px); + } +} +.related-bottom { + @extend %clearfix; + &:after { + display: block; + content: ''; + @include constrain_narrow; + height: 30px; + border-bottom: 3px double #efefef; + } +} +.article-card-list { + padding: 0 !important; + margin: 0 !important; + list-style-type: none !important; + margin: 0 auto !important; +} +.article-card-mini, .detail .article-card-mini { + margin-left: 0; + margin-right: 0; + margin-bottom: 2rem; + max-width: 100%; + a { text-decoration: none;} + .post-title { + @include fontsize(20); + text-align: center; + line-height: 1.2; + margin: 0; + } + .post-subtitle { + @include fontsize(18); + text-align: center; + font-family: $fancy_serif; + font-style: italic; + font-weight: normal; + margin: .25rem auto 0; + } + .post-summary, .post-date{ + text-align: center; + display: inline-block; + line-height: 0.6 !important; + color: #b6b6b6; + } + @include breakpoint(omega) { + margin: 0 auto; + max-width: 70%; + margin-bottom: 0; + } + @include breakpoint(alpha) { + max-width: 50%; + } + @include breakpoint(beta) { + max-width: 47%; + float: left; + margin-right: 1rem; + margin-bottom: 1.5rem; + } + @include breakpoint(gamma) { + max-width: 230px; + float: left; + margin-right: .5rem; + } +} +.post-mini-image { + max-height: 220px; + overflow: hidden; + @include breakpoint(beta) { + margin-bottom: 1rem; + } + img { + margin-top: -20%; + } +} + + +.entry-footer { + @extend %clearfix; + @include constrain_narrow; + border-bottom: 3px double #efefef; + margin-top: 2em; + text-align: left; + h3 { + @include smcaps; + @include fontsize(16); + } + h3 + ul { + padding: 0; + } + li { + margin: .25em 0; + list-style-type: none; + } + li ul { + columns: 2 auto; + list-style-type: none; + margin-left: .5rem; + padding: 0; + } + li ul li:before { + content: "\2022"; + margin-right: .45rem; + color: lighten($body_font_color, 40); + } + .grouper { + margin-top: 1em; + } + a { + text-decoration: none; + color: lighten($body_font_color, 20); + } + #wildlife li ul li { + color: lighten($body_font_color, 40); + a { + color: lighten($body_font_color, 10); + } + } + @include breakpoint(beta) { + padding-bottom: 2rem; + #wildlife { + max-width: 55%; + float: left; + margin-right: 1.2rem; + } + #recommended-reading{ + ul { + list-style-type: none; + } + img { + max-width: 180px; + } + } + } + aside { + @extend %clearfix; + } +} +#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; +} + +//### FOOTNOTES ### +.footnote { + margin: 1em auto 0 auto; + padding: 0; + list-style-type: none; + p { + font-size: 1rem; + line-height: 1.4; + margin-top: 0 !important; + } + hr {display: none;} + ol { + padding-left: 1em; + @include breakpoint(alpha) { + margin-left: 1em; + } + } +} +sup { + line-height: 1; + .footnote-ref { + padding: 4px 3px; + + } +} + +//### Figments ### +.downloads { + list-style-type: none; +} + +// ### Books ### +.book { + &:after { + display: block; + content: ''; + height: 30px; + border-bottom: 3px solid #efefef; + width: 200px; + margin: 0 auto 3rem auto; + padding-left: 30px; + } +} +.book-metadata { + text-align: left; + @include fancy_sans; + dd { + display: inline; + margin: 0; + } + dd:after{ + display: block; + content: ''; + } + dt{ + display: inline-block; + } + dt:after { + content: ":"; + } +} +.thoughts, .highlights, .meta-cover, .dis { + @include constrain_narrow; + font-family: $fancy_serif; + text-align: left; + p { + max-width: 100%; + } +} +.book-cover-wrapper { + @include constrain_wide; + img { + float: left; + max-width: 20rem; + } +} +.thoughts { + margin-top: 4rem; + p:first-of-type { + margin-top: 0; + } +} +.thoughts h5, .highlights h4 { + font-weight: 500; + letter-spacing: 1px; + margin: 3em 0 .5em 0; + @include fancy_sans; + @include smcaps; + @include fontsize(14); +} +.highlights div:first-of-type p:first-of-type { + margin-top: 0; +} +.book-highlight p:last-of-type { + margin-bottom: 0; +} +.book p:last-of-type, .highlights div:first-of-type p:last-of-type{ + margin-top: 8px; +} +.highlink { + @include fontsize(20); + margin-right: .5rem; + float: left; + line-height: 1.6; + text-decoration: none; + color: lighten($body_font_color, 60); + @include breakpoint(alpha) { + margin-top: 1px; + } + &:visited { + color: lighten($body_font_color, 60); + } +} +.foot { + margin-top: 16px; + @include fancy_sans; + @include fontsize(16); +} +.dis { + @include fontsize(16); + text-align: center; +} diff --git a/bak/design/old/v9/_fonts.scss b/bak/design/old/v9/_fonts.scss new file mode 100644 index 0000000..1ae40f8 --- /dev/null +++ b/bak/design/old/v9/_fonts.scss @@ -0,0 +1,43 @@ +@font-face { + font-family: 'carrois_gothicregular'; + src: url('/media/fonts/carroisgothic-regular-webfont.eot'); + src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'), + url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffweb'; + src: url('/media/fonts/ffmpb.woff2') format('woff2'); + src: url('/media/fonts/ffmpb.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffweb'; + src: url('/media/fonts/ffmbi.woff2') format('woff2'); + src: url('/media/fonts/ffmbi.woff') format('woff'); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'mffnweb'; + src: url('/media/fonts/ffmn.woff2') format('woff2'); + src: url('/media/fonts/ffmn.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffnbweb'; + src: url('/media/fonts/ffmn.woff2') format('woff2'); + src: url('/media/fonts/ffmn.woff') format('woff'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + diff --git a/bak/design/old/v9/_footer.scss b/bak/design/old/v9/_footer.scss new file mode 100644 index 0000000..08c9942 --- /dev/null +++ b/bak/design/old/v9/_footer.scss @@ -0,0 +1,83 @@ +footer { + margin-top: 5em; + @include breakpoint(gamma) { + max-width: 960; + } + &:before { + @include breakpoint(beta) { + @include faded_line_after; + margin-bottom: 1.2em; + } + } + .footer-nav { + list-style-type: none !important; + margin-left: 0 !important; + 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: $secondary-link-color; + 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, .dark footer { + &:before { + @include light_faded_line_after; + } + a { + color: $body_font_light; +} +} +.donate-btn { + display: inline-block; + margin-left: .5rem; + input[type="submit"] { + background: url("img/pp_donate.gif") 0 0 no-repeat; + border: none; + width: 100px; + text-indent: -9999em; + line-height: 19px; + padding: 2px 7px 10px; + } +} +.liberapay-btn { + background: url("img/lpdonate.svg") 0 0 no-repeat; + text-indent: -9999em; + display: inline-block; + line-height: 25px; + padding: 5px 7px 3px; + text-decoration: none; + width: 70px; +} +#license { + @include fancy_sans; + @include fontsize(12); + text-transform: none; + letter-spacing: normal; +} diff --git a/bak/design/old/v9/_forms.scss b/bak/design/old/v9/_forms.scss new file mode 100644 index 0000000..4e0227b --- /dev/null +++ b/bak/design/old/v9/_forms.scss @@ -0,0 +1,113 @@ +.generic-form { + margin: 2rem 0; + @extend %clearfix; + fieldset { + padding: 0; + border: none; + width: 100%; + position: relative; + } + input[type=email] { + width: 210px; + @include fontsize(18); + background-color: #fff; + border: 2px solid darken(#efefef, 10); + border-radius: 5px; + height: 2.2rem; + padding: 4px 4px 4px 8px; + margin-right: .5rem; + @include breakpoint(omega){ + width: 92%; + } + @include breakpoint(alpha){ + width: 96%; + } + } + label { + display: block; + visibility: hidden; + width: 0; + height: 0; + } + .btn-hollow { + @include fontsize(16); + display: inline-block; + padding: 10px 15px; + margin-bottom: 0; + line-height: 20px; + text-align: center; + vertical-align: middle; + cursor: pointer; + color: #ddd; + border: 0; + border-radius: 5px; + font-weight: bold; + transition: all 0.2s ease; + background: $orange; + &:hover { + color: white; + } + } +} +.flex { + display: flex; + .btn, .btn-hollow { + flex-basis: 10%; + } +} + + +form fieldset { + margin: 1rem 0; + padding: 0; + border: none; + width: 100%; + position: relative; +} +form fieldset label { + position: absolute; + -webkit-transform: translate3d(10px, 100%); + -moz-transform: translate3d(10px, 100%); + -ms-transform: translate3d(10px, 100%); + -o-transform: translate3d(10px, 100%); + transform: translate3d(10px, 100%); + @include fontsize(14); + @include fancy_sans; + color: lighten($body_font_color, 25); + line-height: 14px; + top: .7rem; + left: .75rem; + z-index: 1; +} +input, .textarea-rounded textarea { + border: 1px solid #dedddd; + border-radius: 4px; + padding: 2.2rem 0 .75rem .75rem; + width: 96%; + @include fontsize(24); + @include fancy_sans; +} + +.btn { + @include fontsize(15); + display: inline-block; + border-radius: 4px; + -webkit-appearance: none; + text-decoration: none; + cursor: pointer; + background: $link_color; + color: #fff; + border: 1px solid $link_color; + padding: 7px 14px; + white-space: nowrap; + &:hover { + background: $link_color; + border: 1px solid $link_color; + } +} +.newsletter-subscribe { + margin: 3rem 0; + fieldset { + margin: 0; + } +} diff --git a/bak/design/old/v9/_global.scss b/bak/design/old/v9/_global.scss new file mode 100644 index 0000000..5030dbf --- /dev/null +++ b/bak/design/old/v9/_global.scss @@ -0,0 +1,267 @@ +html { + border-top: 0.25em solid $brown; +} + +body { + margin: 0 auto; + padding: 0; + overflow-x: hidden; + font:$body_p_font; + color: $body_font_color; + text-align: center; + background-color: transparent +} +ul { + padding: 0; +} +// eliminate touch delay on mobile safari +a, button, input, select, textarea, label, summary { + touch-action: manipulation; +} +a { + color: $body_font_color; + -webkit-transition: all 0.1s ease; + -moz-transition: all 0.1s ease; + -ms-transition: all 0.1s ease; + transition: all 0.1s ease; + text-decoration-color: $orange; + &:hover { + text-decoration: none; + } + &:visited { + color: $body_font_color; + } +} +p { + text-align: left; + font-family: $fancy_serif; + @include fontsize(20); + @include breakpoint(alpha){ + @include fontsize(22); + line-height: 1.5; + } + @include breakpoint(beta){ + @include fontsize(24); + line-height: 1.6; + } +} +time { + @include smcaps; + @include fontsize(11); + display: block; + span { + @include fontsize(13); + } +} +abbr { + cursor: help; +} +pre { + text-align: left; + @include breakpoint(alpha){ + @include fontsize(18); + line-height: 1.5; + } +} +object, embed, video { + max-width: 100%; + width: 100%; + height: auto; +} +audio { + max-width: 100%; + width: 100%; +} +blockquote { + @include fontsize(18); + display: block; + border-top: 4px solid lighten($body_font_light, 20); + border-bottom: 4px solid lighten($body_font_light, 20); + margin: 3rem 0; + position: relative; + text-align: left; + font-style: italic; + cite { + display: block; + text-align: right; + } + @include breakpoint(alpha){ + @include fontsize(20); + line-height: 1.5; + } + @include breakpoint(beta){ + @include fontsize(22); + line-height: 1.6; + } +} +blockquote:before { + @include fancy_sans; + @include fontsize(68); + content: '\201C'; + position: absolute; + top: -1.35rem; + left: 50%; + transform: translate(-50%, -50%); + width: 3rem; + height: 2rem; + color: #666; + text-align: center; +} +hr { + border: 0; + height: 1px; + @include faded_line_after; + margin: 3rem 0; +} +img { + max-width: 100%; +} +figure { + margin: 0; +} +figcaption { + text-align: left; +} +figcaption, figcaption a { + @include fancy_sans; + @include fontsize(16); + text-align: left; + line-height: 1.9; + padding: .3rem .5rem .3rem 0; + color: #666; + border-bottom: 1px lighten($body_font_light, 20) solid; + margin-bottom: 1rem; +} +figcaption a:visited { + color: #666; +} +h1 { + font-family: $headline_font_serif; + @include fontsize(36); + font-weight: normal; +} +h2 { + font-family: $headline_font_serif; + @include fontsize(28); + font-weight: normal; + text-align: left; + @include breakpoint(gamma){ + @include fontsize(30); + line-height: 1.6; + } +} +h3 { + font-family: $fancy_sans; + @include fontsize(24); + text-align: left; + @include breakpoint(gamma){ + @include fontsize(28); + line-height: 1.4; + } +} +h4 { + @include fontsize(20); + text-align: left; + @include breakpoint(gamma){ + @include fontsize(22); + line-height: 1.4; + } +} +h5 { + @include fontsize(16); + text-align: left; + @include breakpoint(gamma){ + @include fontsize(18); + line-height: 1.4; + } +} +.subhead { + font-size: 26px !important; + font-style: italic; + margin-top: 0; + margin-bottom: 0; +} +.subhead + p { + margin-top: .75rem !important; +} +.essay-intro .subhead + p:first-of-type { + margin-top: .75rem !important; +} +//************** 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(12); + font-weight: 600; + color: $secondary-link-color; +} +.italic { + font-style: italic; +} +.small { + font-size: 90%; +} +.divide-after:after { + margin-bottom: 3em; + @include faded_line_after; +} +.margin-left-none { + margin-left: 0 !important; +} +//**************** Page Breadcrumbs ************************ + +#breadcrumbs { + @include constrain_wide(); + padding: 0; + list-style-type: none; + text-align: center; + li { + display: inline; + } + a { + color: $secondary-link-color; + } + @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/bak/design/old/v9/_header.scss b/bak/design/old/v9/_header.scss new file mode 100644 index 0000000..4bba7a7 --- /dev/null +++ b/bak/design/old/v9/_header.scss @@ -0,0 +1,187 @@ +.header-wrapper { + @include breakpoint(beta) { + border-bottom: 1px #f3efef solid; + } +} +.site-banner { + @extend %clearfix; + margin: 0 auto; + @include constrain_wide; + @include smcaps; + #logo { + a { + @include fontsize(32); + text-decoration: none; + display: block; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + color: $brown; + &:before { + display: block; + content: "home-icon"; + text-indent: -9999em; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + width: 95px; + height: 65px; + background-size: 95px; + background-size: 85px; + //if sox + //background: url("img/soxlogo.svg") center top no-repeat; + //background-size: 60px; + display: block; + margin: 5px auto 0; + } + } + .sitesubtitle { + display: block; + margin-top: -8px; + font-family: $fancy_serif; + font-style: italic; + font-weight: 300; + @include fontsize(12); + } + } + nav { + 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: lighten(#505050, 5); + &:visited { + color: lighten(#505050, 5); + } + } + ul { + @include smcaps; + @include fancy_sans; + @include fontsize(13); + max-width: 100%; + font-weight: 600; + margin-top: 0.5em; + margin-bottom: 0.5em !important; + padding: 0; + @include constrain(85%); + } + li { + display: inline; + margin: 0 0.25em; + color: lighten(#505050, 30); + &:after { + content: "\00b7"; + color: #999999; + padding-left: 0.75em; + } + &:last-of-type { + margin-right: 0; + &:after { + content: " "; + } + } + } + @include breakpoint(beta) { + } + } + @include breakpoint(beta) { + height: 90px; + position: relative; + #logo { + float: left; + text-align: left; + a { + width: 360px; + line-height: 2.5em; + &:before { + display: inline-block; + background-size: 102px; + //if sox + //background: url("img/soxlogo.svg") center bottom no-repeat; + //background-size: 70px; + height: 85px; + width: 105px; + //if sox + //width: 80px; + margin-right: 10px; + } + } + .sitesubtitle { + margin-left: 116px; + //if sox + //margin-left: 90px; + margin-top: -30px; + } + } + nav { + float: right; + border: none; + margin: 42px 0 0 0; + padding: 0; + ul { + max-width: 50em; + } + } + } +} + +.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; + } + } +} + + +.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 #f3efef solid; + position: relative; + } + @include breakpoint(gamma) { + max-width: $breakpoint-gamma; + margin-left: auto; + margin-right: auto; + } + @include breakpoint(delta) { + margin-top: 1.3rem; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + margin-top: 1.3rem; + max-width: $max_width; + } +} +.detail .header-wrapper, .detail #breadcrumbs { + transition: opacity .5s; + @include breakpoint(epsilon) { + opacity: .8; + &:hover { + opacity: 1; + } + } +} + +.black .header-wrapper, .dark .header-wrapper { + @include breakpoint(beta) { + border-bottom: 1px $body_font_light solid; + } +} + diff --git a/bak/design/old/v9/_images.scss b/bak/design/old/v9/_images.scss new file mode 100644 index 0000000..4c0951c --- /dev/null +++ b/bak/design/old/v9/_images.scss @@ -0,0 +1,108 @@ +.picwide, .cluster, .pic960 { + // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ + // I tweaked it slightly to add a bit of margin + width: 96vw; + position: relative; + left: 48%; + right: 48%; + margin-left: -46vw; + margin-right: -50vw; + @include breakpoint(gamma) { + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -48.5vw; + margin-right: -49.5vw; + } + @include breakpoint(epsilon) { + $margin: ($max_width - $narrow-max-width)/2; + left: 0; + right: 0; + margin-left: -$margin; + margin-left: -$margin; + width: $max_width; + max-width: $max_width; + } +} +p + .picwide { + margin-top: 1.5rem; + @include breakpoint(gamma) { + margin-top: 2.5rem; + } +} +.picwide + p { + margin-top: 1.5rem; + @include breakpoint(gamma) { + margin-top: 2.5rem; + } +} +.cluster { + margin-bottom: 2rem; + margin-top: 2rem; + @include breakpoint(gamma) { + margin-bottom: 3rem; + margin-top: 3rem; + } +} +.row-2 { + a:last-of-type img, figure:last-of-type { + width: 49.7%; + float: right; + margin-right: 0; + } + a:first-of-type img, figure:first-of-type { + width: 49.7%; + float: left; + margin-left: 0; + margin-right: .3%; + } + &:after { + @extend %clearfix; + margin-bottom: .5rem; + } + figure:first-of-type img, figure:last-of-type img { + width: 100%; + } +} +.banner .post-image { + // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ + // I tweaked it slightly to add a bit of margin + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} +.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%; + margin-bottom: 1rem; +} +.embed-container iframe, .embed-container object, .embed-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.pullpicleft { + display: none; + @include breakpoint(gamma) { + display: block; + float: left; + margin-left: -280px; + padding-right: 1rem; + } +} diff --git a/bak/design/old/v9/_leaflet.scss b/bak/design/old/v9/_leaflet.scss new file mode 100644 index 0000000..b65ffb8 --- /dev/null +++ b/bak/design/old/v9/_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/bak/design/old/v9/_lttr.scss b/bak/design/old/v9/_lttr.scss new file mode 100644 index 0000000..ea59eec --- /dev/null +++ b/bak/design/old/v9/_lttr.scss @@ -0,0 +1,63 @@ +.large-top-image { + background: #f7f7f7; + img { + max-width: 100%; + margin: 4rem 0; + } +} +.lttr { + @include constrain_narrow; + margin-top: 6rem; + header { + padding-bottom: 3rem; + border-bottom: 1px #f0edeb solid + } +} +.lttr-box { + //background: #faf7f5; + text-align: center; + padding: .5rem; + display: inline-block; + //border: 1px #e0dedc solid; +} +.lttr-cover { + margin-right: 1.2rem; +} +#recommended-reading { + .book-title { + @include fontsize(28); + font-weight: 400; + margin-bottom: 0; + } + h6 { + margin-top: 0; + @include fontsize(18); + font-weight: 400; + } +} + +#page-navigation img { + width: 300px; + height: 160px; + object-fit: cover; +} +#page-navigation h4 { + text-align: center; + @include fontsize(22); + @include fancy_sans; + color: #333; +} +#page-navigation .nav-title { + @include fontsize(22); + line-height: 1.5; +} +#page-navigation .photo-arrow-next { + text-align: left; +} +.page-nav-photo li { + display: inline-block; + margin: 0 0 0 3rem !important; + &:first-of-type { + margin-left: 0 !important; + } +} diff --git a/bak/design/old/v9/_map.scss b/bak/design/old/v9/_map.scss new file mode 100644 index 0000000..e4bd5e4 --- /dev/null +++ b/bak/design/old/v9/_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_color;} + 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/bak/design/old/v9/_mixins.scss b/bak/design/old/v9/_mixins.scss new file mode 100644 index 0000000..9ccd750 --- /dev/null +++ b/bak/design/old/v9/_mixins.scss @@ -0,0 +1,163 @@ +$brown: #201a11; +$brown: #222; +$light: #ccc; +$orange: #b53a04; +$link_color: #b53a04; + +$headline_font_serif: mffweb, Georgia, 'Times New Roman', serif; +$fancy_serif: mffweb, Georgia, 'Times New Roman', serif; +$fancy_sans: mffnweb, Helvetica, sans-serif; + + +$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif; +$body_font_color: $brown; +$body_font_light: #b3aeae; +$secondary-link-color: #838383; + +$archive_p_line_height: 1.6; +//$light; +$narrow-beta-width: 720px; +$narrow-max-width: 750px; +$max_width: 1440px; + +@mixin smcaps { + @include fancy_sans; + text-transform: uppercase; + letter-spacing: 1px; +} +@mixin plain_a { + border: none; + text-decoration: none; + color: $body_font_color; +} + +@function calc-rem($size) { + $remsize: $size/16; + @return #{$remsize}rem; +} + +@mixin fontsize($size) { + font-size: $size + px; + font-size: calc-rem($size); +} + +@function calc-em($target-px, $context) { + @return $target-px / $context * 1em; +} + +@mixin img_plain { + padding: 0; + max-width: 100%; + background: none; +} +@mixin generic-sans { + font-family: sans-serif; +} +@mixin fancy-sans { + font-family: mffnweb, Helvetica, sans-serif; +} +@mixin fancy-sans-bold { + font-family: mffnbweb, Helvetica, sans-serif; + font-weight: 700; +} +@mixin fancy-serif { + font-family: Georgia, Palatino, serif; +} +%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: $narrow-beta-width; + } + @include breakpoint(gamma) { + max-width: $narrow-max-width; + } +} + +@mixin constrain_archive() { + max-width: 94%; + margin-left: auto; + margin-right: auto; + @include breakpoint(alpha) { + max-width: 380px; + float: left; + } + @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/bak/design/old/v9/_notes.scss b/bak/design/old/v9/_notes.scss new file mode 100644 index 0000000..1386751 --- /dev/null +++ b/bak/design/old/v9/_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_color !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/bak/design/old/v9/_pagination.scss b/bak/design/old/v9/_pagination.scss new file mode 100644 index 0000000..7dc9cb1 --- /dev/null +++ b/bak/design/old/v9/_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_color, 30); + color: lighten($body_font_color, 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/bak/design/old/v9/_photos.scss b/bak/design/old/v9/_photos.scss new file mode 100644 index 0000000..95d6c45 --- /dev/null +++ b/bak/design/old/v9/_photos.scss @@ -0,0 +1,521 @@ +// ############################################## +// 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: -10px; + width: 272px; + 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; +} + +.daily-figure { + figcaption { + max-width: 1432px; + } +} + +//.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; +// } +//} + +.circle-pic { + border-radius: 50%; + border: 3px solid #000; +} +#about-luxagraf .circle-pic { + float: left; + margin-left: -250px; +} + +//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/bak/design/old/v9/_queries.scss b/bak/design/old/v9/_queries.scss new file mode 100644 index 0000000..8a0eec2 --- /dev/null +++ b/bak/design/old/v9/_queries.scss @@ -0,0 +1,30 @@ +$breakpoint-omega: 420px; //728 +$breakpoint-alpha: 728px; //728 +$breakpoint-beta: 824px; //784 +$breakpoint-gamma: 960px; +$breakpoint-delta: 1170px; +$breakpoint-epsilon: $max_width; + +@mixin breakpoint($point) { + @if $point == "omega" { + @media screen and (min-width:$breakpoint-omega ){ @content; } + } + @if $point == "alpha" { + @media screen and (min-width:$breakpoint-alpha ){ @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/bak/design/old/v9/_resume.scss b/bak/design/old/v9/_resume.scss new file mode 100644 index 0000000..41fc8e1 --- /dev/null +++ b/bak/design/old/v9/_resume.scss @@ -0,0 +1,179 @@ +.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 { + list-style-type: none; + display: inline; + @include constrain_narrow; + text-align: left; + margin-bottom: 1em; + time{ + display: inline; + } +} +.p-experience { + &:after { + @include faded_line_after; + } + &:last-of-type:after { + background: #fff; + } +} +.p-organization { + text-transform: uppercase; + letter-spacing: 1px; + @include fontsize(13); + +} +.p-skill { + font-weight: bold; +} +.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 { + list-style-type: none; + text-align: left; + @include constrain_narrow; + h2 { + @include smcaps; + @include fontsize(11); + font-weight: 400; + text-align: left; + border-bottom: 1px dotted #333; + margin-bottom: 2em; + &:first-of-type { + margin-top: 3em; + } + } + h3, time { + display: inline; + } + h3 { + @include fontsize(20); + @include fancy_serif; + } + time:before { + content: "\00a0 \00a0" + } + ul { + list-style-type: none; + } +} +.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; + } + ul { + list-style-type: none; + } +} diff --git a/bak/design/old/v9/_src.scss b/bak/design/old/v9/_src.scss new file mode 100644 index 0000000..1896979 --- /dev/null +++ b/bak/design/old/v9/_src.scss @@ -0,0 +1,186 @@ +pre{ + white-space: pre-wrap; +} +.latest { + @include constrain_narrow; + @include fontsize(12); + @include smcaps; + font-weight: 400; +} +.src-archive { + @include constrain_narrow; + .topic-hed { + @include fontsize(20); + 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 fontsize(22); + font-weight: 400; + margin-bottom: .25em; + a { + color: $body_font_color; + color: lighten($body_font_color, 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: none; + margin-left: .5rem; + padding-left: .5rem; + font-size: 1.5rem; + } + ul li:before { + content:"ยท"; + display: inline-block; + vertical-align: bottom; + font-size: 2.8rem; + margin-right: 1rem; + line-height: 2.8rem; + } + 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; + } + } + p code, li code { + @include fontsize(20); + padding: 3px; + background: #eaeaea; + } + h3 { + font-family: $fancy_serif; + @include fontsize(32); + margin: 3.5rem 0 1rem; + //letter-spacing: 1px; + //border-bottom: 1px #a19d9d dotted; + //text-transform: uppercase; + } + h5 { + @include fontsize(22); + margin: 3rem 0 -.75rem 0; + text-transform: uppercase; + border-bottom: 1px #a19d9d dotted; + @include fancy_sans; + text-align: left; + } +} + +.highlight { + padding: 1rem; + margin-bottom: 1em; + // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ + // I tweaked it slightly to add a bit of margin + width: 50vw; + position: relative; + left: 33%; + right: 33%; + margin-left: -20vw; + margin-right: -20vw; + pre { + } +} +.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; + } +} + +.dotted { + list-style-type: disc; + li { + margin-top: .5em; + margin-bottom: .5em; + } + @include breakpoint(gamma) { + font-size: 1.25rem; + line-height: 1.6; + } +} +#donate p { + @include fancy_sans; + @include fontsize(18); + line-height: 1.4; +} diff --git a/bak/design/old/v9/_typography.scss b/bak/design/old/v9/_typography.scss new file mode 100644 index 0000000..b4e3793 --- /dev/null +++ b/bak/design/old/v9/_typography.scss @@ -0,0 +1,10 @@ +.hedtinycaps { + @include fontsize(16); + @include fancy_sans; + text-transform: uppercase; + letter-spacing: 1px; +} +.article-afterward > .hedtinycaps, p > .hedtinycaps { + text-align: left; +} + diff --git a/bak/design/old/v9/pdf_gen.scss b/bak/design/old/v9/pdf_gen.scss new file mode 100644 index 0000000..b5072cd --- /dev/null +++ b/bak/design/old/v9/pdf_gen.scss @@ -0,0 +1,140 @@ +@import "_fonts.scss"; +@import "_mixins.scss"; + +body { + @include fancy_sans; +} +.subhead { + text-align: right; + width: 4cm; + float: right; + @extend %clearfix; + > * { + margin: 0; + font-weight: 400; + } +} +header, .row { + @extend %clearfix; + margin-top: 1cm; +} +.print-box { + width: 49%; + float: left; + > * { + padding: .125cm; + margin: 0; + } + h5, h4 { + @include smcaps; + font-size: 9pt; + line-height: .5; + } + h4 { + margin-top: -10pt; + font-size: 16pt; + line-height: 1.5; + } +} +#bill-from, #bill { + border: none; + width: 47%; + float: left; +} +#bill { + float: right; +} +#bill-to { + width: 47%; + float: right; +} +table { + font-family: "Open Sans", sans-serif; + line-height: 1; + border: 1px solid #ccc; + border-collapse: collapse; + margin: 1cm 0 0 0; + padding: 0; + width: 625px; +} +table caption { + text-align: left; + font-size: 10pt; + text-transform: uppercase; + font-weight: 600; + margin: .5em 0 .75em; + &:after { + content: ":"; + } +} +table tr { + border: 1px solid #ddd; + padding: .35em; +} +table tr.odd { background: #f6f4f4cc;} +thead {display: table-header-group; } +table th, +table td { + padding: .625em .625em .625em 1em; + text-align: left; + border-right: 1px solid #ddd; +} +table td { + white-space: -o-pre-wrap; + word-wrap: break-word; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + font-size: 8pt; +} +table th { + font-size: 7pt; + letter-spacing: .1em; + text-transform: uppercase; + background: #f6f4f4; +} + +table .blank { + white-space: normal; + td { + padding: 1rem; + white-space: normal; + &:last-of-type { + text-align: left; + min-width: 1.2cm; + } + } +} +table .right { + text-align: right; +} +table th a { + text-decoration: none; + position: relative; + span { + position: absolute; + top: -2px; + } +} +.smfield { min-width: 50pt;} +table .total { font-size: 9pt !important;} +.thanks { + margin-top: 40pt; + font-family: times, times new roman; + font-style: italic; + font-weight: 300; + text-align: center; + color: #333; +} + +@page { + @bottom-right{ + @include fancy_sans; + @include smcaps; + content: "Page " counter(page) " of " counter(pages); + font-size: 6pt; + color: #666; + width: 2cm; + } +} + diff --git a/bak/design/old/v9/print.scss b/bak/design/old/v9/print.scss new file mode 100644 index 0000000..666a797 --- /dev/null +++ b/bak/design/old/v9/print.scss @@ -0,0 +1,95 @@ +@import "_fonts.scss"; +@import "_mixins.scss"; + +body { + font-family: $fancy_serif; + background: white; + color: black; + max-width: 660px; + font-size: 11pt; + margin: 0 auto; + line-height: 1.6; +} +.header-wrapper, #breadcrumbs, #page-navigation, .post-subtitle, .comment--form--wrapper, footer { + display: none; +} +.post-source { display: none;} +.highlight { + background: #f7f5f5 !important; +} +code, pre { + background: #f7f5f5 !important; + font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; +} +a { +} +pre { + background: #f7f5f5 !important; + padding: .5cm .25cm; +} +p code { + padding: 0 .25cm; +} +.cluster img, .picwide img, .picfull img { + width: 80%; + margin: 0 auto; + filter: grayscale(100%); +} +.row-2 img { + width: 50%; + margin: 0; + float:left; + filter: grayscale(100%); +} +.post-body p { + font-size: 11pt; +} +.post-body h3 { + font-size: 19pt; +} +.post-body h5 { + font-size: 14pt; +} +.go:before { + content: "$ "; +} +@page { + @bottom-right{ + @include fancy_sans; + @include smcaps; + content: "Page " counter(page) " of " counter(pages); + font-size: 6pt; + color: #666; + width: 2cm; + } +} +main .post--body { + max-width: 660px; + margin: 0; +} +figure { + width: 100%; + margin: 0; +} +figcaption { + @include fancy_sans; + color: #999; + font-size: 9pt; + margin-top: 0; +} +.post-location { + @include fancy_sans; + color: #333; + font-size: 12pt; + a { + text-decoration: none; + display: none; + } + .region { + display: inline; + color: #333 !important; + } +} +.entry-footer, .article-afterward, .jslghtbx { + display: none; +} diff --git a/bak/design/old/v9/screenv10.scss b/bak/design/old/v9/screenv10.scss new file mode 100644 index 0000000..dadd9ee --- /dev/null +++ b/bak/design/old/v9/screenv10.scss @@ -0,0 +1,24 @@ +@import "_fonts.scss"; + + + + +//@import "_mixins.scss"; +//@import "_queries.scss"; +//@import "_global.scss"; +//@import "_pagination.scss"; +//@import "_header.scss"; +//@import "_images.scss"; +//@import "_comments.scss"; +//@import "_leaflet.scss"; +//@import "_map.scss"; +//@import "_forms.scss"; +//@import "_typography.scss"; +//@import "_lttr.scss"; +//@import "_footer.scss"; +//@import "_archives.scss"; +//@import "_details.scss"; +//@import "_src.scss"; +//@import "_resume.scss"; +//@import "_photos.scss"; +//@import "_notes.scss"; diff --git a/bak/design/old/v9/screenv9.scss b/bak/design/old/v9/screenv9.scss new file mode 100644 index 0000000..e8666ca --- /dev/null +++ b/bak/design/old/v9/screenv9.scss @@ -0,0 +1,20 @@ +@import "_fonts.scss"; +@import "_mixins.scss"; +@import "_queries.scss"; +@import "_global.scss"; +@import "_pagination.scss"; +@import "_header.scss"; +@import "_archives.scss"; +@import "_details.scss"; +@import "_images.scss"; +@import "_comments.scss"; +@import "_leaflet.scss"; +@import "_map.scss"; +@import "_src.scss"; +@import "_resume.scss"; +@import "_photos.scss"; +@import "_notes.scss"; +@import "_forms.scss"; +@import "_typography.scss"; +@import "_lttr.scss"; +@import "_footer.scss"; |