moved old sass files, redid comment form styles

1 files changed, 0 insertions, 829 deletions

diff --git a/design/sass/v8/_writing_details.scss b/design/sass/v8/_writing_details.scss
deleted file mode 100644
index 9ba4015..0000000
--- a/design/sass/v8/_writing_details.scss
+++ /dev/null
@@ -1,829 +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;
-    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;
-}