diff options
Diffstat (limited to 'design')
43 files changed, 4207 insertions, 1370 deletions
diff --git a/design/sass/_comments.scss b/design/sass/_comments.scss index 39c7930..4807397 100644 --- a/design/sass/_comments.scss +++ b/design/sass/_comments.scss @@ -1,17 +1,17 @@ //### COMMENTS AND FORMS ### -.comments--header { - @include constrain_narrow; +.comments--wrapper { + @include constrain_narrow(); @include fancy_sans; + text-align: left; + margin-top: -2em; +} +.comments--header { + @include constrain_narrow(); 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; @@ -20,7 +20,15 @@ margin-top: none; } &:after { - @include 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)); } &:last-child:after { display: none; @@ -29,15 +37,16 @@ .comment--head, .comment--body { @include breakpoint(alpha) { margin-left: 80px; - margin-top: -2rem; + margin-top: -1rem; } } .comment--head { - margin-bottom: 1em; + margin-bottom: 1rem; } .comment--body { margin-bottom: 3em; @include fontsize(22); + font-family: $fancy_serif; hr { width: 20%; overflow: visible; @@ -49,30 +58,25 @@ } } .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-top: -7px; margin-right: 8px; @include breakpoint(alpha) { margin-right: 0; } } - - .comment--form--wrapper { @include constrain_narrow(); p { @@ -119,4 +123,3 @@ margin-bottom: 0; } } - diff --git a/design/sass/_details.scss b/design/sass/_details.scss index 53e819f..74965fd 100644 --- a/design/sass/_details.scss +++ b/design/sass/_details.scss @@ -1,601 +1,521 @@ -.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; +.content { + margin-top: 3rem; +} +//************** archive grids **********************************{{{ +.archive-grid { + margin-top: 2rem; + list-style-type: none; + padding: 0; + @include constrain_wide; + @include breakpoint(alpha) { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 20px; + row-gap: 1rem; } - h5 { - margin: 0 +} +.archive-grid-quad { + //used for books and related posts in detail pages + list-style-type: none; + padding: 0; + @include breakpoint(alpha) { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 15px; } - .afterward { - p {font-style: italic;} - h4 { - margin-bottom: 0; - } + @include breakpoint(beta) { + grid-template-columns: 1fr 1fr 1fr; } - p.small { - @include fontsize(18); + @include breakpoint(epsilon) { + grid-template-columns: 1fr 1fr 1fr 1fr; } - .sci { - text-align: center; - @include fontsize(24); - font-weight: 400; - margin: 0; - +} +.related .archive-grid-quad { + //there's only 4 related items so override the + //3-grid at breakpoint beta + @include breakpoint(beta) { + grid-template-columns: 1fr 1fr; } - .sci:nth-child(3) { - @include fontsize(18); - margin-bottom: 2rem; +} +.archive-grid-double { + // homepage recent + @include breakpoint(alpha) { + grid-template-columns: 1fr 1fr; + row-gap: 1rem; + grid-gap: 16px; } - ul { - list-style: circle; - margin-left: 2.5em; - list-style-position: outside; - margin-bottom: 2.4em; +} +.archive-grid-single { + // homepage popular + @include breakpoint(alpha) { + grid-template-columns: 1fr; + row-gap: 1rem; + grid-gap: 16px; } - // 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; - } - } +} +.recent-popular { + // get popular and recent lined up + // side by side on the hompage + @include constrain_wide; + @include breakpoint(alpha) { + display: flex; + flex-direction: row; + width: calc(100% + 30px); + .popular { + margin-left: 30px; } } - #detail-map-canvas { - height: 400px; - width: 98vw; - position: relative; - left: 49%; - right: 49%; - margin-left: -48vw; - margin-right: -49vw; +} +.archive-grid-card { + //container object for cards (usually an article tag) + a { + text-decoration: none; } } -.post-dateline { - display: inline-block; - margin-top: 0em; - padding-top: 1rem; - padding-bottom: 2.6rem; - border-top: 1px solid #efefef; +.archive-grid-card-simple { + //container object for cards with no dek + line-height: 1; + margin-bottom: 1.4rem; } -header.tight { - margin-bottom: 3rem; - * { - margin: 0; - text-align: center; - } - h1 { - margin-bottom: 1rem; +.related { + //special rules for related post grid + //on detail pages in jrnl and src + ul { + list-style-type: none; + padding: 0; } - h2 { - display: inline-block; - border-top: 1px solid darken(#efefef, 10); - padding-top: 1rem; + .card-hed { + text-align: center; + @include fancy_sans; + @include fontsize(20); + margin: 1rem auto .25rem; } - h3 { - margin-top: .35rem; + .card-smcap { + text-align: center; } } -h4.post-source { - @include fontsize(14); +//}}} +//************** archive cards **********************************{{{ +.card-smcaps, .post-smcaps { + // formats date and location lines as small caps @include smcaps; - padding-bottom: 0em; - margin-bottom: 0; - margin-top: 0; + @include fontsize(13); font-weight: bold; - color: #b6b6b6; - a { - color: #b6b6b6; - &:hover { - color: $link_color; - } - } + margin: 0; + color: $body_font_light; +} +.card-hed { + // main headline of the card + @include fontsize(32); + color: darken($body_font_light,15); + margin: 0; + line-height: 1; } -.post-location { - h3 { - display: inline; - @include fontsize(14); +.card-hed-it { + // italic variant of card hed + // used on jrnl archives + @include fontsize(26); + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-smit { + // smaller italic variant of card hed + // used on homepage + @include fontsize(22); + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-btm { + // hed with a little bottom margin + // used in book list + margin-bottom: .5rem; +} +.card-image-sm { + // smaller card image + // used on homepage + max-height: 180px; + overflow: hidden; + margin-bottom: .5rem; + img { + margin-top: -20%; } - a { - color: $secondary_link_color; - text-decoration: none; +} +.card-image-tiny { + // even smaller card image used for + // related posts on detail pages + max-height: 120px; + overflow: hidden; + margin-bottom: .5rem; + img { + width: 100%; + margin-top: -20%; } } -.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; +.card-lede { + // subtitle or lede + @include fontsize(20); + color: darken($body_font_light,5); + font-style: italic; + line-height: 1.6; + margin: 0; } -//### GUIDE STUFF ### -.product-card { - margin: 5rem 0; +.card-dek { + // used for p test on jrnl page and elsewhere + @include fontsize(16); + line-height: 1.6; + margin: 0 0 .5rem; } -.detail .product-link { - a { - display: block; - padding: 1rem; - background: #249bd6; - color: white; - text-transform: uppercase; - font-size: 16px; - text-decoration: none; - } +.card-stars { + // ratings on books + @include fontsize(16); + display: block; } -.buy-btn { - @include fancy_sans; +.read-in { + // makes read in date in books look good 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: ":"; - } +.circle-img-wrapper { + // small images next to archive lists + border-radius: 50%; + width: 106px; + height: 106px; + overflow: hidden; + float: left; + border: 3px solid #666; + img { + width: 160px; + max-width: 160px; } - h5 { - margin-right: 1rem; + @include breakpoint(beta) { + margin-left: -128px; + margin-top: -2px; } } -.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; - } +//}}} +//************** header, dateline and expanding map **************{{{ +.post-header { + @include constrain_narrow; + color: #555; + padding-bottom: 2.6rem; + margin-bottom: 2.6rem; + border-bottom: 1px solid #efefef; + text-align: center; + @include breakpoint(beta) { + text-align: left; } } -//### PAGE NAVIGATION ### -.nav-wrapper { - @include constrain_narrow(); - border-bottom: 3px double #efefef; +.post-linewrapper { + border-top: 1px solid #efefef; } -#page-navigation { - margin: 2em auto; +.post-linewrapper, .post-linewrapper h3 { + color: lighten($secondary-link-color, 15); + margin-top: 1rem; + padding-top: 1rem; + display: inline-block; + @include smcaps; + @include fancy_sans; + @include fontsize(14); + font-weight: 600; text-align: center; - display: table; - ul { - list-style-type: none; - margin: 0 auto; - width: 100%; - text-align: center; - padding: 0; + a { + color: lighten($secondary-link-color, 15); } - li { - margin: 6px auto; - clear: both; - line-height: 24px; - text-align: center; + time { + color: $secondary-link-color } - span { - @include fancy_sans; - @include fontsize(14); - min-width: 70px; - display: block; - text-align: right; - margin-right: 10px; - float: left; + @include breakpoint(beta) { + text-align: left; } - a { - display: block; - float: left; - font-family: $fancy_serif; +} +.post-linewrapper h3 { + display: inline; +} +.post-source { + @include smcaps; + @include fancy_sans; + @include fontsize(14); + font-weight: 600; + margin: 0; +} +.map { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} +#detail-map-canvas { + height: 400px; + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -48vw; + margin-right: -49vw; +} +.lttr .post-header, .lttr .post-linewrapper, .lttr .post-linewrapper h3 { + text-align: center; +} +.post-title { + letter-spacing: -1px; + margin-bottom: .25rem; +} +.post-subtitle { + @include fontsize(22); + font-style: italic; + line-height: 1.25; + margin-top: 0; + margin-bottom: 0; + text-align: center; + @include breakpoint(beta) { text-align: left; - font-style: italic; - color: $brown; - text-decoration: none; } } - -.article-afterward { - @extend %clearfix; +//}}} +//************** post detail *************************************{{{ +.post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) { @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; +} +.post-body .picwide, .post-body .cluster { + @include constrain_wide; +} +.post-article { + h3 { + @include fancy_sans; + @include fontsize(26); + font-weight: bold; } - @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; + h4, h3 { + margin: 3rem 0 0 0; + line-height: 1.4; } - .post-subtitle { - @include fontsize(18); - text-align: center; - font-family: $fancy_serif; - font-style: italic; - font-weight: normal; - margin: .25rem auto 0; + h4+p, h3+p { + margin-top: .125rem; } - .post-summary, .post-date{ - text-align: center; - display: inline-block; - line-height: 0.6 !important; - color: #b6b6b6; + h5 { + @include fancy_sans; + @include fontsize(20); } - @include breakpoint(omega) { - margin: 0 auto; - max-width: 70%; - margin-bottom: 0; + ul { + @include fontsize(22); + list-style: circle; + margin-left: 2.5em; + list-style-position: outside; + margin-bottom: 2.4em; } +} +.picwide { @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; +} +.picwide img { + max-width: 98%; + @include breakpoint(alpha) { + max-width: 100%; } } -.post-mini-image { - max-height: 220px; - overflow: hidden; - @include breakpoint(beta) { - margin-bottom: 1rem; +p + .picwide { + margin-top: 1.75rem; + @include breakpoint(alpha) { + margin-top: 2.6rem; } - img { - margin-top: -20%; +} +.row-2 { + display: flex; + flex-direction: row; + gap: .5rem; + * > { + margin-left: 5px; } } - - +//}}} +//************** post footer *************************************{{{ .entry-footer { - @extend %clearfix; @include constrain_narrow; + border-top: 3px double #efefef; border-bottom: 3px double #efefef; - margin-top: 2em; - text-align: left; + margin-top: 3rem; + padding: 2rem; h3 { + font-weight: 600; @include smcaps; @include fontsize(16); } - h3 + ul { + ul { padding: 0; - } - li { - margin: .25em 0; + font-size: 96%; list-style-type: none; + ul { + list-style-type: disc; + padding-left: 2rem; + li { + color: $secondary-link-color; + } + } } - 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; + @include breakpoint(gamma) { + display: flex; + flex-direction: row; + ul { + display: flex; + flex-direction: column; + font-size: 92%; + } } - a { - text-decoration: none; - color: lighten($body_font_color, 20); +} +//}}} +//************** next/previous / you might also / footnotes ******{{{ +//}}} +//************** homepage banner and other special elements*******{{{ +.homepage-section-header { + @include fontsize(28); + @include fancy_sans; +} +.banner { + .post-image { + position: relative; + max-height: 900px; + overflow: hidden; } - #wildlife li ul li { - color: lighten($body_font_color, 40); - a { - color: lighten($body_font_color, 10); + + @include breakpoint(beta) { + figcaption { + position: absolute; + margin: 0; + bottom: 0; + width: 100%; + z-index: 100; + background: rgba(0,0,0,0.6); } } - @include breakpoint(beta) { - padding-bottom: 2rem; - #wildlife { - max-width: 55%; - float: left; - margin-right: 1.2rem; + .large-top-image { + position: relative; + max-height: 900px; + overflow: hidden; + max-width: 100%; + img { + margin: 0; } - #recommended-reading{ - ul { - list-style-type: none; - } + @include breakpoint(beta) { img { - max-width: 180px; + margin-top: -120px; } } } - aside { - @extend %clearfix; - } } -#field_notes { +.hero-text-wrapper { + text-align: center; + margin-bottom: 1rem; + .post-title { + @include fontsize(36); + } @include breakpoint(beta) { - max-width: 33%; - float: left; - margin-top: .15em; - margin-left: 7em; + color: white; + .post-title { + @include fontsize(42); + margin-bottom: .5rem; + } + .post-subtitle, .post-date, .post-location { + text-align: center; + a { + text-decoration: none; + @include fontsize(14); + padding: 0; + border: none; + } + } } - li:before { - content: "\2022"; - margin-right: .35rem; - color: $body_font_light; + .post-date { + display: none; } -} -.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; + .post-linewrapper { + border-color: #6a6a6a; + text-align: center; + margin-top: .25rem; + padding-top: .25rem; } - hr {display: none;} - ol { - padding-left: 1em; - @include breakpoint(alpha) { - margin-left: 1em; - } + .btn { + color: white; + text-align: center; + margin: .5rem auto; } } -sup { - line-height: 1; - .footnote-ref { - padding: 4px 3px; - +.homepage-bio { + margin: 3rem auto; + @include constrain_wide; + @include breakpoint(alpha) { + margin: 6rem auto; } } - -//### 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: ":"; +.homepage-map-img { + @include breakpoint(alpha) { + float: left; + width: 350px; + margin-right: 2rem; } } -.thoughts, .highlights, .meta-cover, .dis { - @include constrain_narrow; - font-family: $fancy_serif; - text-align: left; - p { - max-width: 100%; +.homepage-next { + margin-top: 3rem; + @include constrain_wide; + h5 { + 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; + } } } -.book-cover-wrapper { - @include constrain_wide; - img { +// About page +#about-luxagraf .circle-pic { + margin: 0 auto; + display: block; + @include breakpoint(gamma) { float: left; - max-width: 20rem; + margin-left: -250px; } } -.thoughts { - margin-top: 4rem; - p:first-of-type { - margin-top: 0; - } +.circle-pic { + border-radius: 50%; + border: 3px solid #000; } -.thoughts h5, .highlights h4 { - font-weight: 500; - letter-spacing: 1px; - margin: 3em 0 .5em 0; - @include fancy_sans; - @include smcaps; - @include fontsize(14); +//}}} +//A few Mailing list specific styles +.large-top-image{ + background: #f7f7f7; + img { + max-width: 100%; + margin: 4rem 0; + } } -.highlights div:first-of-type p:first-of-type { - margin-top: 0; +.list-hed{ + @include fontsize(32); } -.book-highlight p:last-of-type { +.list-subhed { + @include fontsize(26); + font-style: italic; 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; +// +.section { + margin-top: 6rem; } + diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss index 1ae40f8..e69de29 100644 --- a/design/sass/_fonts.scss +++ b/design/sass/_fonts.scss @@ -1,43 +0,0 @@ -@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/design/sass/_footer.scss b/design/sass/_footer.scss index 08c9942..9e20f8b 100644 --- a/design/sass/_footer.scss +++ b/design/sass/_footer.scss @@ -1,83 +1,43 @@ -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; +.page-footer { + margin: 0 auto; + border-top: 1px #f3efef solid; + margin-top: 5rem; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-size: .8125rem; + line-height: 1.2; + font-weight: 600; + text-align: center; } +.page-footer ul { + margin: 1.5rem 0 .5rem 0; + list-style-type: none; + padding: 0; } -.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; +@media screen and (min-width: 750px) { + .page-footer { + text-align: right; + max-width: 96%; } } -.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; +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .page-footer { + max-width: 1440px; + } } #license { - @include fancy_sans; - @include fontsize(12); text-transform: none; + text-align: center; letter-spacing: normal; + font-size: 14px; + font-size: .875rem; + font-weight: 300; +} +@media screen and (min-width: 750px) { + #license { + text-align: right; + } } diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index 4e0227b..93a283d 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -1,113 +1,48 @@ .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; +.generic-form fieldset { 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; +.generic-form 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(alpha){ + width: 96%; + } } -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; +.generic-form label { + display: block; + visibility: hidden; + width: 0; + height: 0; } - -.btn { - @include fontsize(15); +.btn-hollow { + @include fontsize(16); display: inline-block; - border-radius: 4px; - -webkit-appearance: none; - text-decoration: none; + padding: 10px 15px; + margin-bottom: 0; + line-height: 20px; + text-align: center; + vertical-align: middle; cursor: pointer; - background: $link_color; - color: #fff; - border: 1px solid $link_color; - padding: 7px 14px; - white-space: nowrap; + color: #ddd; + border: 0; + border-radius: 5px; + font-weight: bold; + transition: all 0.2s ease; + background: $orange; &:hover { - background: $link_color; - border: 1px solid $link_color; - } -} -.newsletter-subscribe { - margin: 3rem 0; - fieldset { - margin: 0; + color: white; } } diff --git a/design/sass/_global.scss b/design/sass/_global.scss index 5030dbf..c2c1cc0 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -1,82 +1,75 @@ -html { - border-top: 0.25em solid $brown; -} - +//font-size: 20px +//font-size: 1.25rem +//alpha = 720px +//beta = 960px +//gamma = 1170px +//delta = 1440px +// *************************** Basic element styles ***********************{{{ body { + font-size: 20px; + font-size: 1.25rem; + font-family: $fancy_serif; margin: 0 auto; padding: 0; - overflow-x: hidden; - font:$body_p_font; - color: $body_font_color; - text-align: center; - background-color: transparent + color: #222; + text-align: left; + max-width: 96%; + line-height: 1.5; } -ul { - padding: 0; +@media screen and (min-width: 1170px) { + body { + font-size: 24px; + font-size: 1.5rem; + max-width: 100%; + } } // eliminate touch delay on mobile safari a, button, input, select, textarea, label, summary { touch-action: manipulation; } +// links a { - color: $body_font_color; - -webkit-transition: all 0.1s ease; - -moz-transition: all 0.1s ease; - -ms-transition: all 0.1s ease; + color: #222; transition: all 0.1s ease; text-decoration-color: $orange; - &:hover { - text-decoration: none; - } - &:visited { - color: $body_font_color; - } } +a:hover { + text-decoration: none; +} +a:visited { + color: #222; +} + 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); +} +@media screen and (min-width: 1170px) { + p { 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 { +object, embed, video, img { max-width: 100%; - width: 100%; height: auto; } audio { max-width: 100%; - width: 100%; } blockquote { - @include fontsize(18); + font-size: 18px; + font-size: 1.125rem; display: block; - border-top: 4px solid lighten($body_font_light, 20); - border-bottom: 4px solid lighten($body_font_light, 20); + border-top: 4px solid #e6e6e6; + border-bottom: 4px solid #e6e6e6; margin: 3rem 0; position: relative; text-align: left; @@ -85,183 +78,128 @@ blockquote { 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%; + display: block; + content: ""; + 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)); } figure { margin: 0; } figcaption { - text-align: left; -} -figcaption, figcaption a { - @include fancy_sans; - @include fontsize(16); + font-family: mffnweb, Helvetica, sans-serif; + font-size: 16px; + font-size: 1rem; text-align: left; line-height: 1.9; padding: .3rem .5rem .3rem 0; color: #666; - border-bottom: 1px lighten($body_font_light, 20) solid; + border-bottom: 1px #e6e6e6 solid; margin-bottom: 1rem; } -figcaption a:visited { +figcaption a, figcaption a:visited { color: #666; } h1 { - font-family: $headline_font_serif; - @include fontsize(36); + font-size: 48px; + font-size: 3rem; font-weight: normal; + margin-bottom: 0; + line-height: 1; } h2 { - font-family: $headline_font_serif; - @include fontsize(28); + font-size: 28px; + font-size: 1.75rem; 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; - } + font-size: 24px; + font-size: 1.5rem; + font-weight: normal; } h4 { - @include fontsize(20); - text-align: left; - @include breakpoint(gamma){ - @include fontsize(22); - line-height: 1.4; - } + font-size: 22px; + font-size: 1.375rem; } h5 { - @include fontsize(16); - text-align: left; - @include breakpoint(gamma){ - @include fontsize(18); - line-height: 1.4; - } + font-size: 16px; + font-size: 1rem; } -.subhead { - font-size: 26px !important; - font-style: italic; - margin-top: 0; - margin-bottom: 0; +dd { + display: inline; + margin: 0; } -.subhead + p { - margin-top: .75rem !important; +dd:after{ + display: block; + content: ''; } -.essay-intro .subhead + p:first-of-type { - margin-top: .75rem !important; +dt{ + display: inline-block; } -//************** Universals ************************ -.hide { - display: none; +dt:after { + content: ":"; } +//************** Global layout ************************ +.content { + margin-left: auto; + margin-right: auto; + max-width: 96%; -.strike { - text-decoration: line-through; } - -.yes { - background: green !important; - color: white; +@media screen and (min-width: 1170px) { + .content { + max-width: 100%; + } } - -.no { - background: red !important; - color: white; +@media screen and (min-width: 1440px) { + .content { + max-width: 1440px; + } +} +//************** Universals ************************ +.hide { + display: none; } - .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; + font-size: 85%; } -.margin-left-none { - margin-left: 0 !important; +.buy-btn { + font-family: mffnweb, Helvetica, sans-serif; + display: block; + padding: .5rem 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + font-size: 16px; + font-size: 1rem; + text-decoration: none; + margin-right: 1rem; } -//**************** 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; - } +.buy-btn-wrapper { + display: flex; + justify-content: start; + align-items: center; + align-content: space-between; } - -.black #breadcrumbs a, .dark #breadcrumbs a { - color: $body_font_light; +.buy-btn-wrapper h4 { + margin: 0 1.5rem 0 0; + line-height: normal; } -//************* Dark Pages ********************* - -.dark body { - background: $brown; - color: $body_font_light +.buy-btn-wrapper h4:after { + content: ":"; } - -.black body { - background: #000; - color: $body_font_light +.buy-btn-wrapper h5 { + margin-right: 1rem; } - +//}}} diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 87cd180..9824ddd 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -1,189 +1,120 @@ -.header-wrapper { - @include breakpoint(beta) { - border-bottom: 1px #f3efef solid; - } +///********** class for header and footer menus *********{{{ +.menu-item { + color: lighten($secondary_link_color, 20); + display: inline-block; + margin: 0 0.25rem; } -.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; - position: absolute; - bottom: 8px; - 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; - } - } - } +.menu-item:after { + content: "\00b7"; + color: #9d9d9d; + padding-left: 0.5rem; } - -.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; - } - } +.menu-item:first-of-type { + margin-left: 0; +} +.menu-item:last-of-type { + margin-right: 0; } - - -.black nav[role="navigation"] a, .dark nav[role="navigation"] a { - color: $body_font_light; +.menu-item:last-of-type:after { + content: " "; } - - +.menu-item a, .menu-item a:visited { + text-decoration: none; + color: $secondary_link_color; +} +//}}} +///********** Header Styles *****************************{{{ .header-wrapper { - @extend %clearfix; - margin-bottom: 1em; - @include breakpoint(beta) { + padding-top: 6px; + margin: 0 auto; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-family: mffnweb, Helvetica, sans-serif; + text-align: center; +} +.header-wrapper a { + text-decoration: none; +} +.header-wrapper ul { + list-style-type: none; + padding: 0; +} +.header-wrapper nav { + border-top: 1px #444444 dotted; + border-bottom: 1px #444444 dotted; + margin: 1rem 0; + padding: 0 0.5em; + font-weight: 600; + font-size: .8125rem;; + line-height: 1.2; +} +// Rules for wider Layout +@media screen and (min-width: 750px) { + .header-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; border-bottom: 1px #f3efef solid; - position: relative; - } - @include breakpoint(gamma) { - max-width: $breakpoint-gamma; - margin-left: auto; - margin-right: auto; + margin-top: 1.25rem; + max-width: 96%; } - @include breakpoint(delta) { - margin-top: 1.3rem; - max-width: $breakpoint-delta; + .header-wrapper nav { + border: none; + margin-top: 1.7rem; } - @include breakpoint(epsilon) { - margin-top: 1.3rem; - max-width: $max_width; +} +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .header-wrapper { + max-width: 1440px; } } -.detail .header-wrapper, .detail #breadcrumbs { - transition: opacity .5s; - @include breakpoint(epsilon) { - opacity: .8; - &:hover { - opacity: 1; - } +//Logo styles +.logo-link { + display: block; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + color: $secondary_link_color; + font-size: 2rem; +} +.logo-link:before { + display: block; + content: "home-icon"; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + width: 95px; + height: 65px; + background-size: 95px; + background-size: 85px; + margin: 5px auto; + text-indent: -9999em; +} +@media screen and (min-width: 750px) { + .logo-link { + text-align: left; + margin-top: 1.25rem; } + .logo-link:before { + float: left; + height: 85px; + width: 105px; + background-size: 102px; + margin: -1rem 10px -4px 0; + } +} +//handle the funky text of the subtitle +.sitesubtitle { + display: block; + margin-top: -8px; + margin-bottom: 10px; + font-family: mffweb, Georgia, 'Times New Roman', serif; + font-style: italic; + font-weight: 300; + font-size: .75rem; } - -.black .header-wrapper, .dark .header-wrapper { - @include breakpoint(beta) { - border-bottom: 1px $body_font_light solid; +@media screen and (min-width: 750px) { + .sitesubtitle { + text-align: left; } } - +//}}} diff --git a/design/sass/_lttr.scss b/design/sass/_lttr.scss index 46abc21..7f50f2a 100644 --- a/design/sass/_lttr.scss +++ b/design/sass/_lttr.scss @@ -1,10 +1,7 @@ -.large-top-image{ - background: #f7f7f7; - img { - max-width: 94%; - margin: 4rem 0; - } +.list-hed{ + @include fontsize(32); } + .lttr { @include constrain_narrow; margin-top: 6rem; diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index 9ccd750..111c281 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -1,6 +1,5 @@ $brown: #201a11; $brown: #222; -$light: #ccc; $orange: #b53a04; $link_color: #b53a04; @@ -9,57 +8,26 @@ $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; +$body_font_light: #737373; +$secondary-link-color: #757575; @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; } @@ -75,77 +43,20 @@ $max_width: 1440px; 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; + max-width: 720px; } @include breakpoint(gamma) { - max-width: 680px; + max-width: 750px; } } - //set an element to centered, wideish column width @mixin constrain_wide() { - max-width: 90%; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { @@ -155,9 +66,8 @@ $max_width: 1440px; max-width: $breakpoint-delta; } @include breakpoint(epsilon) { - max-width: $max_width; + max-width: 1440px; } } - - - +@mixin blockmenuitem() { +} diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss index 8a0eec2..3e563aa 100644 --- a/design/sass/_queries.scss +++ b/design/sass/_queries.scss @@ -1,23 +1,16 @@ -$breakpoint-omega: 420px; //728 -$breakpoint-alpha: 728px; //728 +$breakpoint-alpha: 750px; //728 $breakpoint-beta: 824px; //784 $breakpoint-gamma: 960px; $breakpoint-delta: 1170px; -$breakpoint-epsilon: $max_width; +$breakpoint-epsilon: 1440px; @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; } } diff --git a/design/sass/screenv10.scss b/design/sass/screenv10.scss new file mode 100644 index 0000000..470c111 --- /dev/null +++ b/design/sass/screenv10.scss @@ -0,0 +1,1447 @@ +//font-size: 20px +//font-size: 1.25rem +//alpha = 720px +//beta = 960px +//gamma = 1170px +//delta = 1440px +//$orange = #b53a04 +//@media screen and (min-width: 1170px) + +//*********** custom fonts ******************************{{{ +@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; +} +//}}} +//*********** Basic element styles **********************{{{ +body { + font-size: 20px; + font-size: 1.25rem; + font-family: mffweb, Georgia, 'Times New Roman', serif; + margin: 0 auto; + padding: 0; + color: #222; + text-align: left; + max-width: 96%; + line-height: 1.5; +} +@media screen and (min-width: 1170px) { + body { + font-size: 24px; + font-size: 1.5rem; + max-width: 100%; + } +} +// eliminate touch delay on mobile safari +a, button, input, select, textarea, label, summary { + touch-action: manipulation; +} +// links +a { + color: #222; + transition: all 0.1s ease; + text-decoration-color: #b53a04; +} +a:hover { + text-decoration: none; +} +a:visited { + color: #222; +} + +p { + text-align: left; +} +@media screen and (min-width: 1170px) { + p { + line-height: 1.6; + } +} +time { + display: block; +} +abbr { + cursor: help; +} +pre { + text-align: left; +} +object, embed, video, img { + max-width: 100%; + height: auto; +} +audio { + max-width: 100%; +} +blockquote { + font-size: 18px; + font-size: 1.125rem; + display: block; + border-top: 4px solid #e6e6e6; + border-bottom: 4px solid #e6e6e6; + margin: 3rem 0; + position: relative; + text-align: left; + font-style: italic; + cite { + display: block; + text-align: right; + } +} +hr { + border: 0; + margin: 3rem 0; + display: block; + content: ""; + 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)); +} +figure { + margin: 0; +} +figcaption { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 16px; + font-size: 1rem; + text-align: left; + line-height: 1.9; + padding: .3rem .5rem .3rem 0; + color: #666; + border-bottom: 1px #e6e6e6 solid; + margin-bottom: 1rem; +} +figcaption a, figcaption a:visited { + color: #666; +} +h1 { + font-size: 48px; + font-size: 3rem; + font-weight: normal; + margin-bottom: 0; + line-height: 1; +} +h2 { + font-size: 28px; + font-size: 1.75rem; + font-weight: normal; + margin: 0; +} +h3 { + font-size: 24px; + font-size: 1.5rem; + font-weight: normal; +} +h4 { + font-size: 22px; + font-size: 1.375rem; +} +h5 { + font-size: 16px; + font-size: 1rem; +} +dd { + display: inline; + margin: 0; +} +dd:after{ + display: block; + content: ''; +} +dt{ + display: inline-block; +} +dt:after { + content: ":"; +} +form fieldset { + margin: 1rem 0; + padding: 0; + border: none; + width: 100%; + position: relative; +} +form fieldset label { + position: absolute; + font-size: 14px; + font-size: .875rem; + font-family: mffnweb, Helvetica, sans-serif; + color: #666; + 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%; + font-size: 24px; + font-size: 1.5rem; + font-family: mffnweb, Helvetica, sans-serif; +} + +//}} +//*********** Global layout **************************** {{{ +.content { + margin-left: auto; + margin-right: auto; + max-width: 96%; + +} +@media screen and (min-width: 1170px) { + .content { + max-width: 100%; + } +} +@media screen and (min-width: 1440px) { + .content { + max-width: 1440px; + } +} +@media screen and (min-width: 750px) { + .post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) { + margin-left: auto; + margin-right: auto; + max-width: 750px; + } +} +//}}} +//*********** Universals ******************************* {{{ +.hide { + display: none; +} +.alert { + color: red !important; +} +.small { + font-size: 85%; +} +.btn { + font-size: 15px; + font-size: .9375rem; + display: inline-block; + border-radius: 4px; + -webkit-appearance: none; + text-decoration: none; + cursor: pointer; + background: #b53a04; + color: #fff; + border: 1px solid #b53a04; + padding: 4px 14px; + white-space: nowrap; +} +.btn:hover { + background: #b53a04; + border: 1px solid #b53a04; +} + +.flex { + display: flex; +} +.flex .btn, .flex .btn-hollow { + flex-basis: 10%; +} +.buy-btn { + font-family: mffnweb, Helvetica, sans-serif; + display: block; + padding: .5rem 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + font-size: 16px; + font-size: 1rem; + text-decoration: none; + margin-right: 1rem; +} +.buy-btn-wrapper { + display: flex; + justify-content: start; + align-items: center; + align-content: space-between; +} +.buy-btn-wrapper h4 { + margin: 0 1.5rem 0 0; + line-height: normal; +} +.buy-btn-wrapper h4:after { + content: ":"; +} +.buy-btn-wrapper h5 { + margin-right: 1rem; +} +.hedtinycaps { + //smcaps + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 16px; + font-size: 1rem; + line-height: 1.2; + font-weight: 600; + display: inline-block; + margin-bottom: 2rem; + border-bottom: 2px solid #efefef; + text-align: center; +} +//}}} +//*********** Header Styles *****************************{{{ +//*********** <header> wrapper **************************{{{ +.header-wrapper { + padding-top: 6px; + margin: 0 auto; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-family: mffnweb, Helvetica, sans-serif; + text-align: center; +} +.header-wrapper a { + text-decoration: none; +} +.header-wrapper nav { + border-top: 1px #444444 dotted; + border-bottom: 1px #444444 dotted; + margin: 1rem 0 .5rem 0; + padding: 0 0 .25rem 0; +} +// Rules for wider Layout +@media screen and (min-width: 750px) { + .header-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: 1px #f3efef solid; + margin-top: 1.25rem; + max-width: 96%; + } + .header-wrapper nav { + border: none; + margin-top: 1.8rem; + } +} +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .header-wrapper { + max-width: 1440px; + } +} +//}}} +//*********** Logo styles *******************************{{{ +.logo-link { + display: block; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + font-size: 2rem; +} +.logo-link:before { + display: block; + content: "home-icon"; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + width: 95px; + height: 65px; + background-size: 95px; + background-size: 85px; + margin: 5px auto; + text-indent: -9999em; +} +@media screen and (min-width: 750px) { + .logo-link { + text-align: left; + margin-top: 1.25rem; + } + .logo-link:before { + float: left; + height: 85px; + width: 105px; + background-size: 102px; + margin: -1rem 10px -4px 0; + } +} +//}}} +//*********** Subtitle styles *******************************{{{ +.sitesubtitle { + display: block; + margin-top: -8px; + margin-bottom: 10px; + font-family: mffweb, Georgia, 'Times New Roman', serif; + font-style: italic; + font-weight: 300; + font-size: .75rem; +} +@media screen and (min-width: 750px) { + .sitesubtitle { + text-align: left; + } +} +//}}} +///********** class for header and footer menus *********{{{ +.nav-item, .nav-item:visited { + color: #757575; + margin: 0 0.25rem; + font-family: mffnweb, Helvetica, sans-serif; + text-decoration: none; + font-weight: 600; + font-size: .8125rem;; + line-height: 1.2; + text-transform: uppercase; +} +.nav-item:after { + content: "\00b7"; + color: #9d9d9d; + padding-left: 0.75rem; +} +.nav-item:last-of-type:after { + content: " "; +} +//}}} +//}}} +//*********** Page Breadcrumbs **************************{{{ +.breadcrumbs { + font-family: mffnweb, Helvetica, sans-serif; + margin: 0 auto; + text-align: center; +} +@media screen and (min-width: 750px) { + .breadcrumbs { + max-width: 96%; + text-align: left; + } +} +@media screen and (min-width: 1440px) { + .breadcrumbs { + max-width: 1440px; + } +} +.breadcrumbs .nav-item { + margin: 0; +} +.breadcrumbs .nav-item, .breadcrumbs .nav-item a { + color: #808080; + text-decoration: none; +} +.breadcrumbs .nav-item:after { + content: "\2192"; + padding: 0; +} +.breadcrumbs .nav-item:last-of-type:after { + content: ""; +} +//}}} +//*********** images ************************************{{{ +.picwide img { + max-width: 98%; +} +@media screen and (min-width: 750px) { + .picwide img { + max-width: 100%; + } +} + +p + .picwide { + margin-top: 1.75rem; +} +@media screen and (min-width: 750px) { + p + .picwide { + margin-top: 2.6rem; + } +} + +.row-2 { + display: flex; + flex-direction: row; + gap: .5rem; +} +.row-2 > *:last-of-type { + margin-left: 10px; +} +//}}} +//*********** archive grids *****************************{{{ +.archive-grid { + max-width: 96%; + margin-top: 2rem; + margin-left: auto; + margin-right: auto; + list-style-type: none; + padding: 0; +} +.archive-grid-quad { + //used for books and related posts in detail pages + list-style-type: none; + padding: 0; +} +@media screen and (min-width: 750px) { + .archive-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 20px; + row-gap: 1rem; + } + // homepage recent + .archive-grid-double { + grid-template-columns: 1fr 1fr; + row-gap: 1rem; + grid-gap: 16px; + } + .archive-grid-quad { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 15px; + } +} +@media screen and (min-width: 860px) { + .archive-grid-quad { + grid-template-columns: 1fr 1fr 1fr; + } + //there's only 4 related items so override the + //3-grid at breakpoint beta + .related .archive-grid-quad { + grid-template-columns: 1fr 1fr; + } +} +@media screen and (min-width: 1170px) { + .archive-grid-quad, .related .archive-grid-quad { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} +@media screen and (min-width: 1440px) { + .archive-grid { + max-width: 1440px; + } +} +.archive-grid-single { + grid-template-columns: 1fr; + row-gap: 1rem; + grid-gap: 16px; +} +@media screen and (min-width: 750px) { + // get popular and recent lined up + // side by side on the hompage + .recent-popular { + display: flex; + flex-direction: row; + width: calc(100% + 30px); + } + .recent-popular .popular { + margin-left: 30px; + } +} +.archive-grid-card a { + text-decoration: none; +} +.archive-grid-card .card-smcaps a { + color: #747474; +} +.archive-grid-card-simple { + //container object for cards with no dek + line-height: 1; + margin-bottom: 1.4rem; +} +//}}} +//*********** archive cards *****************************{{{ +.card-smcaps, .post-smcaps { + // formats date and location lines as small caps + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + color: #747474; + font-weight: bold; + font-size: 13px; + font-size: .8125rem; + margin: 0; +} +.card-hed { + // main headline of the card + font-size: 32px; + font-size: 2rem; + color: #555; + margin: 0; + line-height: 1; +} +.card-hed-it { + // italic variant of card hed + // used on jrnl archives + font-size: 26px; + font-size: 1.625rem; + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-smit { + // smaller italic variant of card hed + // used on homepage + font-size: 22px; + font-size: 1.375rem; + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-btm { + // hed with a little bottom margin + // used in book list + margin-bottom: .5rem; +} +.card-image-sm { + // smaller card image + // used on homepage + max-height: 180px; + overflow: hidden; + margin-bottom: .5rem; +} +.card-image-sm img { + margin-top: -20%; +} +.card-image-tiny { + // even smaller card image used for + // related posts on detail pages + max-height: 120px; + overflow: hidden; + margin-bottom: .5rem; + img { + width: 100%; + margin-top: -20%; + } +} +.card-lede { + // subtitle or lede + font-size: 20px; + font-size: 1.25rem; + color: #747474; + font-style: italic; + line-height: 1.6; + margin: 0; +} +.card-dek { + // used for p test on jrnl page and elsewhere + font-size: 16px; + font-size: 1rem; + line-height: 1.6; + margin: 0 0 .5rem; +} +.card-stars { + // ratings on books + font-size: 16px; + font-size: 1rem; + display: block; +} +.read-in { + // makes read in date in books look good + display: block; +} +.circle-img-wrapper { + // small images next to archive lists + border-radius: 50%; + width: 106px; + height: 106px; + overflow: hidden; + float: left; + border: 3px solid #666; +} +@media screen and (min-width: 750px) { + .circle-img-wrapper { + margin-left: -128px; + margin-top: -2px; + } +} +.circle-img-wrapper img { + width: 160px; + max-width: 160px; +} +//}}} +//*********** archive lists ****************************{{{ +.archive-wrapper{ + //page content wrapper +} +.archive-hed { + //title of an archive page + font-size: 38px; + font-size: 2.375rem; + line-height: 1.1; + margin-bottom: .5rem; + text-align: center; +} +@media screen and (min-width: 750px) { + .archive-hed { + text-align: left; + } +} +.archive-lede { + // second headline below the intro + font-size: 22px; + font-size: 1.375rem; + line-height: 1.3; + font-style: italic; + color: #999; + margin-top: .5rem; + text-align: center; + border-bottom: 1px solid #efefef; +} +@media screen and (min-width: 750px) { + .archive-lede { + text-align: left; + margin-bottom: 2.4rem; + padding-bottom: 2.4rem; + } +} +.archive-intro { + //text at the top of the list/card page + max-width: 96%; + margin: 3rem auto 4rem auto; + border-bottom: 3px double #efefef; + padding-bottom: 3rem; +} +@media screen and (min-width: 750px) { + .archive-intro { + max-width: 750px; + } +} +.archive-intro p, .archive-intro ul { + font-size: 20px; + font-size: 1.25rem; + line-height: 1.5; +} +.archive-sans { + // second headline below the intro + max-width: 96%; + margin: 0 auto; + font-family: mffnweb, Helvetica, sans-serif; + font-size: 36px; + font-size: 2.25rem; + letter-spacing: -.5px; +} +@media screen and (min-width: 750px) { + .archive-sans { + max-width: 750px; + } +} +.archive-list{ + //the ul tag for archive lists + max-width: 96%; + margin: 0 auto; + list-style-type: none; + padding: 0; +} +@media screen and (min-width: 750px) { + .archive-list { + max-width: 750px; + } +} +.archive-list-card { + // the li tag within archive lists + // used to control spacing + margin-bottom: 4rem; +} +.archive-list-card a { + text-decoration: none; +} +.archive-list-card-sm { + // less spacing in lists with no images + // used on essay pages and src + margin-bottom: 1.5rem; +} +//}}} +//*********** archive pagination ************************{{{ +.pagination { + margin: 3rem auto 0 auto; + font-family: sans-serif; + font-size: 16px; + font-size: 1rem; +} +.pagination ul { + list-style-type: none; + padding: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} +.pagination li { + padding: 6px; +} +.pagination a { + text-decoration: none; + padding: 6px; + color: #333; + border: 1px solid #333; +} +.pagination a:hover { + color: white; + background: #b53a04; +} +.pagination .prev:before { + content: "\2190"; +} +.pagination .next:after{ + content: "\2192"; +} +.pagination-top { + // currently unused but adds spacing to + // page nav when it's at the top + margin: 1rem auto 3rem; +} +//}}} +//*********** header, dateline and expanding map ********{{{ +.post-header { + margin: 0 auto 2.6rem; + padding-bottom: 2.6rem; + border-bottom: 1px solid #efefef; + text-align: center; + color: #555; +} +@media screen and (min-width: 750px) { + .post-header { + text-align: left; + max-width: 750px; + } +} +.post-dateline { + display: inline-block; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid #efefef; + font-size: 14px; + font-size: .875rem; + //smcaps + font-family: mffnweb, Helvetica, sans-serif; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + color: #747474; +} +.post-dateline a { + color: #747474; +} +.post-subtitle { + font-style: italic; + font-size: 22px; + font-size: 1.4rem; + line-height: 1.25; +} + +.map { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} +#detail-map-canvas { + height: 400px; + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -49vw; + margin-right: -49vw; +} +//}}} +//*********** post main elements ************************{{{ +.post-article p { + margin-bottom: 1.5rem; +} +.post-article h3 { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 26px; + font-size: 1.625rem; + font-weight: bold; +} +.post-article h4, h3 { + margin: 3rem 0 0 0; + line-height: 1.4; +} +.post-article h4+p, .post-article h3+p { + margin-top: .125rem; +} +.post-article h5 { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 20px; + font-size: 1.25rem; +} +.post-title { + margin-bottom: .25rem; +} +.post-location, .post-location a { + color: #adadad +} +//}}} +//*********** post footer, related, footnotes ***********{{{ +.entry-footer { + margin: 0 auto; + max-width: 96%; + border-top: 3px double #efefef; + border-bottom: 3px double #efefef; + margin-top: 3rem; + padding: 2rem; + font-size: 90%; +} +@media screen and (min-width: 750px) { + .entry-footer { + max-width: 750px; + display: flex; + flex-direction: row; + } +} + +.entry-footer .hedtinycaps { + margin-bottom: 0; +} +.related { + //slightly wider column for related posts with + //images on most detail pages + margin: 0 auto; + max-width: 96%; + text-align: center; +} +@media screen and (min-width: 960px) { + .related { + max-width: 960px; + } +} +.related time { display: inline;} +.related a { text-decoration: none;} + +.related .card-hed { + text-align: center; + font-family: mffnweb, Helvetica, sans-serif; + font-size: 20px;; + font-size: 1.25rem; + margin: 1rem auto .25rem; + color: #222; +} +.related .card-smcap { + text-align: center; + color: #999; +} + + + +.footnote { + line-height: 1; +} + + +//}}} +//*********** jrnl interpage nav ************************{{{ +.page-navigation { + max-width: 96%; + margin: 1rem auto; + border-bottom: 3px double #efefef; + padding: 1rem 0 2rem 0; + text-align: center; +} +@media screen and (min-width: 750px) { + .page-navigation { + max-width: 750px; + } +} +.page-navigation div { + line-height: 1; +} +.page-navigation .label { + display: inline-block; + font-size: 14px; + font-size: .875rem; + text-transform: uppercase; + font-weight: bold; + font-family: mffnweb, Helvetica, sans-serif; + color: #838383; + letter-spacing: 1px; + text-align: right; + min-width: 80px; +} +.page-navigation a { + text-decoration: none; + font-size: 16px; + font-size: 1rem; + font-style: italic; +} +//}}} +//*********** sighting and book specific tweaks *********{{{ +.center .post-header { + // centers the hed + text-align: center; + color: #222; +} +.center .post-smcaps { + text-align: center; +} +.post-subtitle-line{ + font-size: 22px; + font-size: 1.375rem; + text-align: center; + display: inline-block; + border-top: #333 solid 1px; + margin-top: 1rem; + padding-top: 1rem; +} +.list-sm { + font-size: 20px; + font-size: 1.25rem; +} +.book-detail .post-hed { + font-size: 34px; + font-size: 2.125rem; +} +.book-detail .post-subtitle-line { + font-style: italic; +} +.book-cover-wrapper { + float:left; + padding-right: .5rem; +} +.book-cover-wrapper img { + margin-left: -.5rem; +} +.book-metadata { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 18px; + font-size: 1.125rem; +} +.book-highlight:after { + display: block; + content: ''; + height: 30px; + border-bottom: 3px solid #efefef; + width: 200px; + margin: 0 auto 3rem auto; + padding-left: 30px; +} +.book-highlight-link { + font-size: 20px; + font-size: 1.25rem; + margin-right: .5rem; + margin-left: -1.2rem; + float: left; + line-height: 1.6; + text-decoration: none; + color: #bbb; +} +.book-highlight-body p:last-of-type { + margin-bottom: 0; +} +.book-highlight-footer { + font-size: 16px; + font-size: 1rem; + display: inline; +} +//}}} +//*********** src specific tweaks and code styling ******{{{ +.highlight { + margin: 0 auto; + max-width: 96%; + padding: 1rem; + margin-bottom: 1em; + font-size: 20px; + font-size: 1.25rem; +} +@media screen and (min-width: 1170px) { + .highlight { + max-width: 960px; + } +} +.go:before { + content: "$ "; +} +code > .comment::after { + display:none; +} +pre{ + white-space: pre-wrap; +} +//}}} +//*********** begging buttons ***************************{{{ +.donate { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 20px; + font-size: 1.25rem; + p { + line-height: 1.3; + } +} +.donate-btn { + display: inline-block; + margin-left: .5rem; +} +.donate-btn 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: 2px 7px 3px; + text-decoration: none; + width: 70px; +} +//}}} +//*********** Footer Styles *****************************{{{ +.page-footer { + margin: 0 auto; + border-top: 1px #f3efef solid; + margin-top: 5rem; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-size: .8125rem; + line-height: 1.2; + font-weight: 600; + text-align: center; +} +.page-footer nav { + margin: 1.5rem 0 .5rem 0; +} +@media screen and (min-width: 750px) { + .page-footer { + text-align: right; + max-width: 96%; + } +} +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .page-footer { + max-width: 1440px; + } +} +#license { + text-transform: none; + text-align: center; + font-family: mffnweb, Helvetica, sans-serif; + letter-spacing: normal; + font-size: 14px; + font-size: .875rem; + font-weight: 300; +} +#license a { + text-decoration: none; +} +@media screen and (min-width: 750px) { + #license { + text-align: right; + } +} +//}}} +//*********** A few Mailing list specific styles ********{{{ +.large-top-image{ + background: #f7f7f7; +} +.large-top-image img { + max-width: 100%; + margin: 4rem 0; +} +.list-hed{ + font-size: 32px; + font-size: 2rem; +} +.list-subhed { + font-size: 26px; + font-size: 1.625rem; + font-style: italic; + margin-bottom: 0; + +} + +.newsletter-subscribe { + margin: 3rem 0; +} +.newsletter-subscribefieldset { + margin: 0; +} + +// +.section { + margin-top: 6rem; +} +//}}} +//*********** comments **********************************{{{ +.comment-wrapper { + margin: 0 auto; + max-width: 96%; +} +@media screen and (min-width: 750px) { + .comment-wrapper { + max-width: 750px; + } +} +.comment-card-wrapper:after { + display: block; + margin: 4rem auto; + content: " "; + height: 1px; + width: 96%; + 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)); +} +.comment-card-hed { + border-bottom: 1px solid #ececec; + padding-bottom: .75rem; +} +.comment-card-commenter { + font-family: mffnweb, Helvetica, sans-serif; + font-weight: bold; + font-size: 22px; + font-size: 1.375rem; + display: block; + line-height: 1.2 + +} +.comment-card-image { + border: 2px #222 solid; + float: left; + margin-right: 1rem; +} +//}}} +//*********** homepage **********************************{{{ +.homepage-section-header { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 28px; + font-size: 1.75rem; +} +.banner .large-top-image { + position: relative; + max-height: 900px; + overflow: hidden; +} +.banner .large-top-image img { + margin: 0; +} +@media screen and (min-width: 750px) { + .banner .large-top-image img { + margin-top: -120px; + } +} + +@media screen and (min-width: 750px) { + .banner figcaption { + position: absolute; + margin: 0; + bottom: 0; + width: 100%; + z-index: 100; + background: rgba(0,0,0,0.6); + } +} +.hero-text-wrapper { + font-family: mffweb, Georgia, 'Times New Roman', serif; + text-align: center; + color: white; + padding-bottom: 1.5rem; +} +.hero-text-wrapper .post-dateline { + border-top: 1px solid #484848; +} +.hero-text-wrapper .post-smcaps, .hero-text-wrapper .post-smcaps a { + color: #bbb; +} +.hero-text-wrapper .btn { + margin-top: 18px; + color: white; +} +.recent-popular, .homepage-bio-section, .homepage-next { + margin: 6rem auto; + max-width: 96%; +} +@media screen and (min-width: 1440px) { + .recent-popular, .homepage-bio-section, .homepage-next { + max-width: 1440px; + } +} + +@media screen and (min-width: 600px) { + .homepage-map-img { + display: block; + height: auto; + margin: 2rem 2rem auto 0; + min-width: 350px; + } + .homepage-bio-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + } +} +.homepage-next { + margin-top: 3rem; +} +.homepage-next h5 { + text-align: center; +} +.homepage-next a { + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 14px; + font-size: .875rem; + line-height: 1.2; + font-weight: 600; + text-decoration: none; + padding: 12px 10px 12px; + border: #b53a04 1px solid; +} +.homepage-next a:after { + content: "\21E2"; + margin-left: 4px; +} +.homepage-next a:hover { + background: #b53a04; + color: white; +} +//}} +//*******************Leaflet Styles *********************{{{ +.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} + +//}}} +//*********** print stylesheet **************************{{{ +@media print { +body { + 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{ + //smcaps + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-size: .8125rem; + line-height: 1.2; + font-weight: 600; + 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 { + font-family: mffnweb, Helvetica, sans-serif; + color: #999; + font-size: 9pt; + margin-top: 0; +} +.post-location { + font-family: mffnweb, Helvetica, sans-serif; + 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/design/sass/_archives.scss b/design/sassold/_archives.scss index e690bf4..b5cb4af 100644 --- a/design/sass/_archives.scss +++ b/design/sassold/_archives.scss @@ -43,6 +43,13 @@ 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 { @@ -65,9 +72,12 @@ vertical-align: top; } .archive-grid { - margin-top: 3rem; + 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; @@ -77,6 +87,36 @@ 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; diff --git a/design/sassold/_comments.scss b/design/sassold/_comments.scss new file mode 100644 index 0000000..39c7930 --- /dev/null +++ b/design/sassold/_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/design/sassold/_details.scss b/design/sassold/_details.scss new file mode 100644 index 0000000..53e819f --- /dev/null +++ b/design/sassold/_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/design/sassold/_fonts.scss b/design/sassold/_fonts.scss new file mode 100644 index 0000000..1ae40f8 --- /dev/null +++ b/design/sassold/_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/design/sassold/_footer.scss b/design/sassold/_footer.scss new file mode 100644 index 0000000..08c9942 --- /dev/null +++ b/design/sassold/_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/design/sassold/_forms.scss b/design/sassold/_forms.scss new file mode 100644 index 0000000..4e0227b --- /dev/null +++ b/design/sassold/_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/design/sassold/_global.scss b/design/sassold/_global.scss new file mode 100644 index 0000000..5030dbf --- /dev/null +++ b/design/sassold/_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/design/sassold/_header.scss b/design/sassold/_header.scss new file mode 100644 index 0000000..4bba7a7 --- /dev/null +++ b/design/sassold/_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/design/sass/_images.scss b/design/sassold/_images.scss index 4c0951c..4c0951c 100644 --- a/design/sass/_images.scss +++ b/design/sassold/_images.scss diff --git a/design/sassold/_leaflet.scss b/design/sassold/_leaflet.scss new file mode 100644 index 0000000..b65ffb8 --- /dev/null +++ b/design/sassold/_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/sassold/_lttr.scss b/design/sassold/_lttr.scss new file mode 100644 index 0000000..ea59eec --- /dev/null +++ b/design/sassold/_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/design/sass/_map.scss b/design/sassold/_map.scss index e4bd5e4..e4bd5e4 100644 --- a/design/sass/_map.scss +++ b/design/sassold/_map.scss diff --git a/design/sassold/_mixins.scss b/design/sassold/_mixins.scss new file mode 100644 index 0000000..9ccd750 --- /dev/null +++ b/design/sassold/_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/design/sass/_notes.scss b/design/sassold/_notes.scss index 1386751..1386751 100644 --- a/design/sass/_notes.scss +++ b/design/sassold/_notes.scss diff --git a/design/sass/_pagination.scss b/design/sassold/_pagination.scss index 7dc9cb1..7dc9cb1 100644 --- a/design/sass/_pagination.scss +++ b/design/sassold/_pagination.scss diff --git a/design/sass/_photos.scss b/design/sassold/_photos.scss index 95d6c45..95d6c45 100644 --- a/design/sass/_photos.scss +++ b/design/sassold/_photos.scss diff --git a/design/sassold/_queries.scss b/design/sassold/_queries.scss new file mode 100644 index 0000000..8a0eec2 --- /dev/null +++ b/design/sassold/_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/design/sass/_resume.scss b/design/sassold/_resume.scss index 41fc8e1..41fc8e1 100644 --- a/design/sass/_resume.scss +++ b/design/sassold/_resume.scss diff --git a/design/sass/_src.scss b/design/sassold/_src.scss index 1896979..1896979 100644 --- a/design/sass/_src.scss +++ b/design/sassold/_src.scss diff --git a/design/sass/_typography.scss b/design/sassold/_typography.scss index b4e3793..b4e3793 100644 --- a/design/sass/_typography.scss +++ b/design/sassold/_typography.scss diff --git a/design/sassold/pdf_gen.scss b/design/sassold/pdf_gen.scss new file mode 100644 index 0000000..b5072cd --- /dev/null +++ b/design/sassold/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/design/sassold/print.scss b/design/sassold/print.scss new file mode 100644 index 0000000..666a797 --- /dev/null +++ b/design/sassold/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/design/sassold/screenv10.scss b/design/sassold/screenv10.scss new file mode 100644 index 0000000..dadd9ee --- /dev/null +++ b/design/sassold/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/design/sass/screenv9.scss b/design/sassold/screenv9.scss index e8666ca..e8666ca 100644 --- a/design/sass/screenv9.scss +++ b/design/sassold/screenv9.scss diff --git a/design/templates/base.html b/design/templates/base.html index 06313ea..3b9dd31 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -14,7 +14,7 @@ title="Luxagraf RSS feed" href="https://luxagraf.net/rss/"> {%block stylesheet%}<link rel="stylesheet" - href="/media/screenv9.css{%comment%}?{% now "u" %}{%endcomment%}" + href="/media/screenv10.css{%comment%}?{% now "u" %}{%endcomment%}" media="screen">{%endblock%} <link rel="stylesheet" href="/media/print.css" media="print" title="print" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> @@ -23,56 +23,33 @@ {%block extrahead%}{%endblock%} </head> <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}> - <div class="wrapper" id="wrapper"> - <div class="header-wrapper"> - <header class="site-banner"> - <div id="logo"> - <a href="/" title="Home">Luxagraf</a> - <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span> - </div> - <nav> - <ul> - <li><a href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a> & <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a></li> - <!--<li><a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a></li>--> - <li><a href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a></li> - <li><a href="/about" title="About Scott">About</a></li> - </ul> - </nav> - </header> - </div> + <header class="header-wrapper"> + <div id="logo"> + <a class="logo-link" href="/" title="Home">Luxagraf</a> + <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span> + </div> + <nav> + <a class="nav-item" href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a>{%comment%} & <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a> + <a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a>{%endcomment%} + <a class="nav-item" href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a> + <a class="nav-item" href="/about" title="About Scott">About</a> + </nav> + </header> {% block breadcrumbs %}{% endblock %} {% block primary %}{% endblock %} {% block extrabody %}{% endblock %} {% block disclaimer %}{% endblock%} - <footer class="bl"> - <ul class="footer-nav"> - <li><a href="/blogroll" title="Sites that inspire us">Blogroll</a></li> - <li><a href="/contact/" title="contact luxagraf">Contact</a></li> - <li>Follow Along: - <ul> - <li><a href="/jrnl/feed.xml" title="RSS feed">RSS</a></li> - <li><a href="/newsletter/friends/" title="Luxagraf Email Updates">Email</a></li> - <li><a href="https://www.instagram.com/luxagraf" rel="me" title="luxagraf on Instagram">Instagram</a></li> - </ul> - </ul> - <div class="support">Support luxagraf: - <div class="donate-btn"> - <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> - <input type="hidden" name="cmd" value="_s-xclick"> - <input type="hidden" name="hosted_button_id" value="HYJFZQSBGJ8QQ"> - <input type="submit" name="submit" title="Donate to luxagraf via PayPal"> - </form> - </div> - <div class="donate-btn"> - <a class="liberapay-btn" href="https://liberapay.com/luxagraf/donate"><span>Donate</span></a> - </div> - </div> + <footer class="page-footer"> + <nav> + <a class="nav-item" href="/blogroll" title="Sites that inspire us">Blogroll</a> + <a class="nav-item" href="/contact/" title="contact luxagraf">Contact</a> + <a class="nav-item" href="/jrnl/feed.xml" title="RSS feed">RSS</a> + </nav> <p id="license"> © 2003-{% now "Y" %} <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>. </p> </footer> - </div> {% block js %}{% endblock%} <script> <!-- diff --git a/design/templates/comments/list.html b/design/templates/comments/list.html index d3fe441..c320209 100644 --- a/design/templates/comments/list.html +++ b/design/templates/comments/list.html @@ -4,18 +4,18 @@ {% load bleach_tags %} {% load nofollow %} {% load comments %} - <div class="comments--wrapper"> + <div class="comment-wrapper"> {% for comment in comment_list %} - <div id="comment-{{ comment.id }}" class="comment"> + <div id="comment-{{ comment.id }}" class="comment-card-wrapper"> + <div class="comment-card-hed"> <noscript class="datahashloader" data-hash="{% if comment.user_email == "sng@luxagraf.net" %}d64f4854965b2b1c3ecafee4b2a66fac{%else%}{%if comment.user_email|has_grav %}{%gravatar_hash comment.user_email %}{%else%}default{%endif%}{%endif%}"> - <img class="gravatar" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" /> + <img class="comment-card-image" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" /> </noscript> - <div class="comment--head"> - <span class="who"><b>{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</b></span> - <span class="when">{{comment.submit_date|date:"F d, Y"}} at {{comment.submit_date|date:"g:i a"}}</span> + <span class="comment-card-commenter">{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</span> + <span class="card-smcaps">{{comment.submit_date|date:"F d, Y"}} at {{comment.submit_date|date:"g:i a"}}</span> </div> - <div class="comment--body"> + <div class="comment-card-body"> {% if comment.user_email == "sng@luxagraf.net" %} {{comment.comment|markdown|safe|smartypants}} {%else%} diff --git a/design/templates/lib/breadcrumbs.html b/design/templates/lib/breadcrumbs.html index ac47d5a..025b8e4 100644 --- a/design/templates/lib/breadcrumbs.html +++ b/design/templates/lib/breadcrumbs.html @@ -1,14 +1,14 @@ -<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a> → +<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> + <span class="nav-item" itemprop="item"> + <a href="/" itemprop="name">Home</a> <meta itemprop="position" content="1" /> - </li> - {% for crumb in breadcrumbs %}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - {% if crumb_url %} - <a href="{{crumb_url}}" itemprop="item"><span itemprop="name">{{crumb}}</span></a> - <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />{% else %} - <span itemprop="item"> - <span itemprop="name">{{crumb}}</span> - </span>{% endif %} + </span>{% for crumb in breadcrumbs %}{% if crumb_url %} + <span class="nav-item" itemprop="item"> + <a href="{{crumb_url}}" itemprop="name">{{crumb}}</a> + <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" /> + </span>{% else %} + <span class="nav-item" itemprop="item"> + <span itemprop="name">{{crumb}}</span> <meta itemprop="position" content="2" /> - </li>{%endfor%} - </ol> + </span>{% endif %}{%endfor%} + </nav> diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html index 48b9b99..9e7d8a3 100644 --- a/design/templates/lib/img_cluster.html +++ b/design/templates/lib/img_cluster.html @@ -1,8 +1,6 @@ -{% load get_image_by_size %} -{% if caption or exif %} -<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%} +{% load get_image_by_size %}{% if caption or exif %}<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%} <a href="{%get_image_by_size image "original"%}" title="view larger image {% if image.photo_credit_source%}(photo by {{image.photo_credit_source}}){%endif%}"> - <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a> + <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"></a> {% if caption or exif %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if caption or exif %}</figcaption> </figure> {% endif %} diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html index 2c9b17b..9f98020 100644 --- a/design/templates/lib/img_picwide.html +++ b/design/templates/lib/img_picwide.html @@ -1,6 +1,4 @@ -{% load get_image_by_size %} -{% if caption or exif or image.photo_credit_source %} -<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%} +{% load get_image_by_size %}{% if caption or exif or image.photo_credit_source %}<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%} <a itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%} " title="view larger image"> <img class="u-photo" itemprop="contentUrl" sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}> </a> diff --git a/design/templates/locations/location_detail.html b/design/templates/locationsold/location_detail.html index 334fa9d..334fa9d 100644 --- a/design/templates/locations/location_detail.html +++ b/design/templates/locationsold/location_detail.html diff --git a/design/templates/sightings/ap_detail.html b/design/templates/sightings/ap_detail.html deleted file mode 100644 index 154d7ac..0000000 --- a/design/templates/sightings/ap_detail.html +++ /dev/null @@ -1,59 +0,0 @@ -{% extends 'base.html' %} -{% load typogrify_tags %} -{% block extrahead %} -<style> -#detail-map-canvas { height: 100%;} -</style> -{% endblock %} -{% block bodyid %}class="detail"{%endblock%} -{% block primary %} -<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> - <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> - <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Dialogues</span></a>→ </li> - <li><span itemprop="title">{{object.common_name}}</span></li> - </ul> - - <main> - <article> - <header class="tight"> - <h1 class="hed">{{object.common_name}}</h1> - <h2 class="post-subtitle">{{object.scientific_name}}</h2> - <h3 class="post-subtitle-segundo">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3> - </header> - {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%} -{%if recording %} -<div class="audio-figure"> -<audio autoplay="autoplay" controls="controls"> - <source src="/media/{{recording.audio}}" /> -</audio> -<small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">© {{recording.copyright}}</a></small> -</div> -{%endif%} - {% if field_notes %} - <h4>Field Notes</h4>{% for note in field_notes %} - {{note.body_html|safe|smartypants}} - <p class="post-subtitle-segundo">– <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p> - <hr /> - {%endfor%} -{%endif%} - <h5>Seen at</h5> - <ul>{%for sight in sighting %} - <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li> - {%endfor%} -</article> -</main> -{% endblock %} - -{% block js %} -<script src="/media/js/leaflet-master/leaflet-mod.js"></script> -<script src="/media/js/detail.js"></script> -<script type="text/javascript"> -sightings = []; -{% for s in sighting %} -sightings.push(['{{s.latitude}}', '{{s.longitude}}']); -{% endfor %} -window.onload = function() { - createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false; -} -</script> -{% endblock %} diff --git a/design/templates/sightings/sighting_list.html b/design/templates/sightings/sighting_list.html deleted file mode 100644 index d778cb2..0000000 --- a/design/templates/sightings/sighting_list.html +++ /dev/null @@ -1,40 +0,0 @@ -{% extends 'base.html' %} -{% load typogrify_tags %} -{% load pagination_tags %} - -{% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %} -{% block metadescription %}Plants and Animals seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %} -{%block bodyid%}id="birds" class="archive"{%endblock%} - - -{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> - <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> - {% if region %}{%if region.name == 'United States'%} <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Plants and Animals</span></a> →</li> - <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Plants and Animals</span></a> →</li> - <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>dialogues</li>{%endif%} - </ul> - <main class="archive-grid dialogue-grid">{% autopaginate object_list 24%} - <h1 class="hide">Plants and Animals seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %} - <article class="archive-card">{% if object.ap.image%} - <div class="post--image"> - <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}"> - {% include "lib/img_archive.html" with image=object.ap.image %} - </a> - </div>{% endif %} - <h2 class="post-title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h2> - <time class="post-date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> - <div class="post-summary"> - <span class="post-location" itemscope itemtype="http://schema.org/Place"> - {% if object.country_name == "United States" %}<span class="p-locality locality">{{object.location_name|smartypants|safe}}</span>, {{object.state_name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location_name|smartypants|safe}}</span>, {{object.country_name}}</a>{%endif%} - </span> - </div> - </article> {% endfor %} - </main> - <nav aria-label="page navigation" class="pagination"> - {% paginate %} - </nav> -{% endblock %} - - - -{% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%} |