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