summaryrefslogtreecommitdiff
path: root/design/sass/_writing_details.scss
diff options
context:
space:
mode:
Diffstat (limited to 'design/sass/_writing_details.scss')
-rw-r--r--design/sass/_writing_details.scss828
1 files changed, 0 insertions, 828 deletions
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
deleted file mode 100644
index 5cf7479..0000000
--- a/design/sass/_writing_details.scss
+++ /dev/null
@@ -1,828 +0,0 @@
-// ##############################################
-// Most of the basic formatting for paragraphs is
-// handled in _global.scss. This just handles the
-// bits specific to article detail pages
-// e.g. header, footnotes, images, page nav, two
-// col and dark page
-// ##############################################
-
-figcaption, figcaption a {
- line-height: 1.9;
- padding-left: .5em;
- text-align: left !important;
- @include fancy_sans;
- @include fontsize(12);
- color: #666;
-}
-figcaption a:visited {
- color: #666;
-}
-.post--header {
- @include constrain_narrow();
- @include breakpoint(beta) {
- text-align: left;
- margin-top: 3em;
- margin-bottom: .75em;
- }
- @include breakpoint(delta) {
- margin-top: 4em;
- }
-}
-.page--title {
- @include constrain_narrow();
- @include breakpoint(beta) {
- text-align: left;
- margin-top: 2em;
- }
-}
-.post--location {
- @include smcaps;
- @include fontsize(11);
-}
-.post--article, .notes .h-entry, {
- h2, h3 {
- @include constrain_narrow;
- font-family: Helvetica Neue, Helvetica, sans-serif;
- text-align: left;
- }
- blockquote {
- @include constrain_narrow;
- text-align: left;
- padding: 20px;
- font-style: italic;
- p {
- margin-left: 1em;
- margin-right: 1em;
- }
- }
- .notes {
- @include smcaps;
- @include constrain_narrow;
- font-weight: normal;
- text-align: left;
- &:before {
- @include faded_line_after;
- margin-bottom: 3em;
- }
- }
- .addendum {
- @include constrain_narrow;
- text-align: left;
- dt {
- margin-left: -30px;
- font-style: italic;
- padding-left: 30px;
- text-indent: -30px;
- margin-bottom: .5em;
- }
- dd { margin-left: 0; margin-bottom: 1.5em;}
- }
- .numeral {
- display: block;
- font: bold 1.2em sans-serif;
- margin-bottom: 0;
- margin-top: 1em;
- }
- .vid {
- margin: 4em 0;
- }
- .small {
- font-size: 96%;
- }
- figure {
- @include constrain_wide;
- margin-bottom: 2em;
- }
- figure.picfull {
- max-width: 680px;
- margin-bottom: 2em;
- border-bottom: 1px solid #eae6e6;
- padding-bottom: .5em;
- }
- cite {
- font-style: italic;
- }
-}
-.footnote-ref {
- padding: 0 2px;
- @include fontsize(16);
-}
-.dark, .black {
- .footnote-ref {
- padding: 0px 3px 0 4px;
- }
- figure.picfull {
- border-color: #424040;
- }
- figcaption {
- color: #8F8B8B;
- }
-}
-.black {
- .post--article {
- color: #9C9292;
- }
- .post--article img {
- padding: none;
- background: none;
- }
- #page-navigation a {
- color: $body_font_light;
- }
-}
-
-
-//### Inline Maps ###
-#detail-map-canvas {
- width: 100%;
- height: 0;
- margin: 0 auto;
- float: none;
- border: none !important;
-}
-#detail-map-canvas .detail-map-inner-canvas {
- width: 100%;
- height: 100%;
- border: none !important;
-}
-#detail-map-canvas img {
- max-width: 100%;
- padding: 0;
- margin: 0;
- background: none;
-}
-
-/* special case for debi's master list*/
-.list-debi {
- @include constrain_narrow();
- text-align: left;
- > li {
- font-weight: bold;
- margin: .25em 0 .25em 0;
- }
- li ul li {
- font-weight: normal;
- margin: .25em 0 .25em .5em;
- &:before {
- content: "\2022";
- display: inline-block;
- margin-right: 10px;
- margin-top: 2px;
- }
- }
-}
-
-/* occassionally I have section breaks */
-.break {
- display: block;
- margin: 3em auto;
- content: "";
- height: 1px;
- width: 100%;
- background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
- background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
- background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
- background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
-}
-
-//### FOOTNOTES ###
-.footnote {
- @include constrain_narrow();
- margin: 1em auto 0 auto;
- padding: 0;
- list-style-type: none;
- &:before, &:after {
- @include faded_line_after;
- @include breakpoint(beta) {
- margin-bottom: 2em;
- }
- }
- p {
- font-size: 0.875em;
- line-height: 1.4;
- }
- hr {display: none;}
- ol {
- padding-left: 1em;
- @include breakpoint(alpha) {
- margin-left: 1em;
- }
- }
-}
-.dark .footnote:before {
- @include light_faded_line_after;
-}
-
-//### IMAGES AND FIGURES ###
-.postpic, .postpicright {
- display: block;
- width: auto;
-}
-.postpic {
- float: left;
- margin: 0.3em 10px 10px 0;
-}
-.postpicright {
- float: right;
- margin: 0.3em 0 10px 10px;
-}
-.postpicleft {
- float: left;
- margin: 5px;
-}
-.picfull {
- margin-top: 20px;
-}
-.picfullv {
- margin-top: 20px;
-margin-left: auto;
-margin-right: auto;
-display: block;
-}
-img.picwide {
- background: none;
- max-width: 100%;
- clear: both;
- margin: 1em 0;
- @include breakpoint(gamma) {
- margin-left: -140px;
- max-width: $breakpoint-gamma;
- }
- @include breakpoint(delta) {
- margin-left: -245px;
- max-width: $breakpoint-delta;
- }
- @include breakpoint(epsilon) {
- margin-left: -300px;
- max-width: $max_width *.99;
- }
-}
-.picwide figcaption {
- margin-bottom: 2em;
- border-bottom: 1px solid #eae6e6;
- padding-bottom: .5em;
- @include generic_sans;
- @include breakpoint(gamma) {
- text-align: right;
- width: $breakpoint-gamma;
- max-width: $breakpoint-gamma;
- }
- @include breakpoint(delta) {
- width: $breakpoint-delta;
- max-width: $breakpoint-delta;
- }
- @include breakpoint(epsilon) {
- width: $max_width;
- max-width: $max_width;
- }
-}
-figure.picwide img.picwide {
- margin: auto !important;
- @include breakpoint(epsilon) {
- margin-left: 0;
- }
-}
-.notes figure.picwide, .h-entry figure.picwide, .birds figure.picwide {
- @include breakpoint(gamma) {
- margin-left: -140px;
- }
- @include breakpoint(delta) {
- margin-left: -245px;
- }
- @include breakpoint(epsilon) {
- margin-left: -300px;
- max-width: $max_width *.99;
- }
-}
-.src .picwide, .h-entry figure.picwide {
- margin-left: auto !important;
-}
-.picwide960 {
- clear: both;
- margin: 1em 0;
- @include breakpoint(gamma) {
- margin-left: -140px;
- width: 960px;
- max-width: 960px;
- }
-}
-.sans-caption {
- @include generic_sans;
- small, a {
- display: block;
- font-size: 64%;
- }
- & > .picwide960 {
- margin-bottom: 0;
- }
-}
-
-.figure {
- position: relative;
- max-width: 90%;
- margin: 0 auto;
- @include breakpoint(gamma) {
- max-width: 640px;
- }
- @include breakpoint(delta) {
- max-width: 680px;
- }
- .legend {
- display: block;
- @include transparent_class;
- position: absolute;
- bottom: 10px;
- left: 10px;
- font-size: 13px;
- padding: 8px 0 8px 2%;
- width: 96%;
- background: $brown;
- color: #999999;
- }
-}
-.picgroup {
- margin: 0 auto 1.5em;
- max-width: 90%;
- .picgroup-cap {
- font-size: 88%;
- max-width: 550px;
- margin: -8px auto 0;
- text-align: left;
- background: $brown;
- color: #999999;
- padding: 8px 1.4%;
- }
- @include breakpoint(gamma) {
- img {
- max-width: 555px;
- padding: 8px;
- }
- }
- @include breakpoint(delta) {
- .picgroup-cap {
- padding: 8px 1%;
- }
- }
- @include breakpoint(epsilon) {
- .picgroup-cap {
- max-width: 1128px;
- margin: -14px auto 0;
- padding: 9px;
- }
- }
-}
-.image-cluster, .cluster {
- .row-2, .row-3, .row-4, .stack-2, .stack-3 {
- display: block;
- }
- @include constrain_wide;
- @extend %clearfix;
- margin-bottom: 2em;
- margin-top: 2em;
- max-width: 100%;
- p {
- max-width: 100%;
- margin-top: 0;
- margin-bottom: 0;
- }
-
- img {
- width: 100%;
- padding: 0;
- margin-top: 0;
- max-width: 100%;
- }
- img.picwide {
- margin: 0;
- }
- figcaption, figure {
- margin-bottom: 0;
- border: none;
- }
- .stack-2 {
- float: left;
- }
- @include breakpoint(beta-2) {
- figure {
- max-width: 99%;
- }
- img.picwide {
- padding: 0;
- margin-bottom: 0;
- max-width: 100%;
- width: 100%;
- background: none;
- }
- .row-2 {
- a:last-of-type img, figure:last-of-type {
- float: right;
- margin-right: 0;
- }
- figure:first-child {
- float:left;
- }
- }
- .pic66 {
- max-width: 63.9%;
- }
- figure.pic66 { float: left; max-width: 65.9%;}
- .row-right .pic25 {
- max-width: 49%;
- }
- .pic25 {
- max-width: 24.5%;
- }
- .stack-2 {
- max-width: 32.95%;
- float: left;
- }
- .stack-2 + a img {
- max-width: 66.6%;
- float: right
- }
- .extra-2 {
- max-width: 65.9%;
- }
- .right { float: right;}
- .right + a img {
- float:left
- }
- }
- @include breakpoint(beta) {
- img.picwide {
- max-width: 100%;
- }
- div img {
- width: 100%;
- padding: 0;
- margin: 0 6px 0 0;
- }
- div a:last-of-type {
- img {
- margin-right: 0;
- }
- }
- .pic5 {
- max-width: 49.5%;
- margin: 0;
- float: left;
- figcaption {
- padding-bottom: .5em;
- }
- }
- img.pic5 {
- margin: 0 6px 6px 0;
- }
- .pic25 {
- max-width: 50%;
- }
- .row-3 .pic33 {
- float: left;
- max-width: 32.3%;
- margin: 0 0 6px 0;
- padding-right: 6px;
- background: transparent;
- }
- }
- @include breakpoint(gamma) {
- figure {
- max-width: 100%;
- }
- .row-right {
- float: right;
- }
- .row-3 .pic33 {
- max-width: 32.6%;
- }
- }
- @include breakpoint(epsilon) {
- .row-3 .pic33 {
- max-width: 32.8%;
- }
- .pic5 {
- max-width: 49.7%;
- }
- }
-
-}
-
-.embed-wrapper {
- @include constrain_wide;
- @include breakpoint(gamma) {
- margin-left: auto;
- margin-right: auto;
- }
-}
-.embed-container {
- position: relative;
- padding-bottom: 56.25%;
- height: 0;
- overflow: hidden;
- max-width: 100%;
- height: auto;
-}
-.embed-container iframe, .embed-container object, .embed-container embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-.post--body--single ul {
- @include constrain_narrow();
- margin: 1em auto;
- text-align: left;
- list-style-type: disc;
-}
-
-//### PAGE NAVIGATION ###
-#page-navigation {
- margin: 2em auto;
- @include constrain_narrow();
- text-align: center;
- display: table;
- ul {
- margin: 0 auto;
- width: 100%;
- text-align: center;
- padding: 0;
- }
- li {
- margin: 6px auto;
- clear: both;
- line-height: 24px;
- text-align: center;
- }
- span {
- min-width: 70px;
- display: block;
- text-align: right;
- margin-right: 10px;
- margin-top: 2px;
- float: left;
- }
- a {
- display: block;
- float: left;
- text-align: left;
- font-style: italic;
- color: $brown;
- text-decoration: none;
- }
-}
-
-//### COMMENTS AND FORMS ###
-.comments--header {
- font-family: Helvetica Neue, Helvetica, sans-serif;
- line-height: 6em;
- @include fontsize(16);
- font-style: italic;
- &:before {
- @include faded_line_after;
- margin-top: 2em;
- }
-}
-.comments--wrapper {
- @include constrain_narrow();
- text-align: left;
- margin-top: -2em;
-}
-.comment {
- margin-top: 2.5em;
- margin-bottom: 2.5em;
- &:first-child {
- margin-top: none;
- }
- &:after {
- @include faded_line_after;
- }
- &:last-child:after {
- display: none;
- }
-}
-.comment--head, .comment--body {
- margin-left: 80px;
-}
-.comment--head {
- margin-bottom: 1em;
-}
-.comment--body {
- margin-bottom: 3em;
-}
-.who {
- font-family: Helvetica Neue, Helvetica, sans-serif;
- @include fontsize(18);
-}
-.when {
- @include fontsize(13);
- margin-left: 1em;
- font-style: italic;
-}
-
-.gravatar {
- border: 2px $brown solid;
- background: transparent;
- max-width: 100%;
- padding: 0;
- float: left;
- margin-top: 5px;
-}
-
-
-.comment--form--wrapper {
- @include constrain_narrow();
- &:before {
- @include faded_line_after;
- }
-}
-.comment--form--header {
- margin-top: 2em;
-}
-.comment--form {
- margin: 0 auto;
- @include breakpoint(delta) {
- margin-left: 20%
- }
- label {
- display: block;
- font-weight: 500;
- letter-spacing: 1px;
- font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
- @include fontsize(13);
- }
- input, textarea {
- padding: .25em;
- border: #c5c5c5 1px solid;
- border-radius: .125em;
- color: darken($body_font_light, 20);
- width: 100%;
- @include breakpoint(gamma) {
- width: 70%;
- }
- }
- input[type="submit"] {
- width: auto;
- color: white;
- letter-spacing: 1px;
- background: $orange;
- font: bold .65em Verdana,sans-serif;
- text-transform: uppercase;
- border: none;
- border-radius: .25em;
- padding: 8px 12px 7px;
- }
- blockquote {
- margin: 3em 0;
- p {
- @include fontsize(18);
- }
- }
- h2, h3 { text-align: left}
-}
-.comment--form--header-h1 {
- @include breakpoint(delta) {
- text-align: left;
- margin-left: 30%;
- @include fontsize(24);
- }
-}
-.cform-arc {
- @include breakpoint(delta) {
- margin-left: 30%;
- }
-}
-
-// ##############################################
-// On double and double-dark make the top wide
-// with two columns of text (nothing for ie9-
-// ##############################################
-@include breakpoint(gamma) {
- .post--header--double {
- float: left;
- max-width: 200px;
- margin-right: 2em;
- margin-top: 5px;
- .post--title, .post--date, .post--location {
- text-align: right;
- }
- .post--title {
- line-height: 1.1;
- margin-top: 1.2em;
- }
- }
- .col {
- margin-top: 3rem;
- -moz-column-count: 2;
- -moz-column-gap: 30px;
- -webkit-column-count: 2;
- -webkit-column-gap: 30px;
- column-count: 2;
- column-gap: 30px;
- p { margin-top: 0; margin-bottom: 2em;}
- p:first-of-type:first-letter {
- @include fontsize(60);
- line-height: 42px;
- display: block;
- float: left;
- padding: 11px 8px 5px 0;
- }
- }
-}
-.post--article--double {
- @include constrain_wide();
-}
-
-// ##############################################
-// On dark and double-dark pages we invert the
-// colors, most of which happens in _global but
-// the page nav links need to be done here
-// ##############################################
-.dark #page-navigation a {
- color: $body_font_light;
-}
-
-.map--icon {
- @include constrain_wide;
- display: block;
- width: 35px;
- height: 35px;
- border-radius: 50%;
- border: 2px solid $brown;
- margin: -38px 3em 0;
- float: right;
- @include breakpoint(gamma) {
- margin: 0 auto;
- float: none;
- }
-}
-.entry-footer {
- @extend %clearfix;
- @include constrain_narrow;
- margin-top: 2em;
- text-align: left;
- li {
- margin: .25em 0;
- }
- li ul {
- columns: 2 auto;
- }
- li ul li:before {
- content: "\2022";
- margin-right: .35rem;
- color: lighten($body_font, 40);
- }
- .grouper {
- margin-top: 1em;
- }
- a {
- text-decoration: none;
- color: lighten($body_font, 20);
- }
- #wildlife li ul li {
- color: lighten($body_font, 40);
- a {
- color: lighten($body_font, 10);
- }
- }
- @include breakpoint(beta) {
- margin-bottom: 4em;
- #wildlife {
- max-width: 55%;
- float: left;
- margin-right: 1.2rem;
- }
- #recommended-reading{
- img {
- max-width: 180px;
- }
- }
- }
- aside {
- @extend %clearfix;
- margin-bottom: 3em;
- }
- &:after, &:before {
- @include faded_line_after;
- @include breakpoint(beta) {
- display: block;
- margin-bottom: 2em;
- }
- }
-}
-#field_notes {
- @include breakpoint(beta) {
- max-width: 33%;
- float: left;
- margin-top: .15em;
- margin-left: 7em;
- }
- li:before {
- content: "\2022";
- margin-right: .35rem;
- color: $body_font_light;
- }
-}
-.rr-clear {
- clear: left;
-}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-16 17:32:22 +0000