moved design to bak because I don't need to access it much

1 files changed, 601 insertions, 0 deletions

diff --git a/bak/design/old/v9/_details.scss b/bak/design/old/v9/_details.scss
new file mode 100644
index 0000000..53e819f
--- /dev/null
+++ b/bak/design/old/v9/_details.scss
@@ -0,0 +1,601 @@
+.detail {
+    #article {
+        padding-bottom: 2rem;
+        border-bottom: 3px double #efefef;
+    }
+    article {
+        font-family: $fancy_serif;
+        @include constrain_narrow;    
+        margin-top: 4rem;
+        h1 {
+            font-family: $fancy_serif;
+            line-height: 1em;
+            letter-spacing: -1px;
+            @include fontsize(48);
+            font-weight: normal;
+            margin-bottom: .25rem
+        }
+        ul {
+            text-align: left;
+            @include fontsize(18);
+        }
+    }
+    .post-subtitle {
+        font-style: italic;
+        font-size: 1.4rem;
+        line-height: 1.25;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .post-subtitle-segundo {
+        @include fancy_sans;
+        @include smcaps;
+        @include fontsize(13);
+        font-weight: bold;
+        color: #999;
+
+    }
+    .post-linewrapper {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        display: inline-block;
+        border-top: 1px solid #efefef;
+    }
+    .post-location {
+        color: #b6b6b6;
+        text-align: center;
+        a {
+            color: #b6b6b6;
+            text-decoration: underline;
+            text-decoration-color: $orange;
+        }
+        @include breakpoint(gamma) {
+            text-align: left;
+        }
+    }
+    .post-date {
+        text-align: center;
+        @include breakpoint(alpha) {
+            text-align: left;
+        }
+    }
+    .map {
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+    }
+    .post-header {
+        @include fancy_sans;
+        @include fontsize(18);
+        color: lighten($body_font_color, 20);
+        padding-bottom: 2.6rem;
+        border-bottom: 1px solid #efefef;
+        @include breakpoint(alpha) {
+            text-align: left;
+        }
+        time {
+        }
+    }
+    p:first-of-type {
+        margin-top: 2.6rem;
+    }
+    h4, h5 {
+        @include fancy_sans;
+        margin: 3rem 0 0 0;
+    }
+    h4 + p, .afterward h4 + p {
+        margin-top: .125rem;
+    }
+    h5 {
+        margin: 0
+    }
+    .afterward {
+        p {font-style: italic;}
+        h4 {
+            margin-bottom: 0;
+        }
+    }
+    p.small {
+        @include fontsize(18);
+    }
+    .sci {
+        text-align: center;
+        @include fontsize(24);
+        font-weight: 400;
+        margin: 0;
+
+    }
+    .sci:nth-child(3) {
+        @include fontsize(18);
+        margin-bottom: 2rem;
+    }
+    ul {
+        list-style: circle;
+        margin-left: 2.5em;
+        list-style-position: outside;
+        margin-bottom: 2.4em;
+    }
+    // Ack, id selector, so wrong, but easy handles the slightly different footer
+    // in the dialogue section that lists all the sightings
+    #endnode {
+        h5 {
+            @include fontsize(14);
+            @include smcaps;
+            @include fancy_sans;
+            margin-bottom: 1rem;
+            margin-top: 2rem;
+        }
+        ul {
+            margin-bottom: 2em;
+            list-style-type: none;
+            padding: 0;
+            li {
+                color: lighten($body_font_color, 30);
+                margin-bottom: 0;
+                margin-top: 0;
+                &:before {
+                  content: "\2022";
+                  color: lighten($body_font_color, 30);
+                  margin-right: .35rem;
+                }
+            }
+        }
+    }
+    #detail-map-canvas {
+        height: 400px;
+        width: 98vw;
+        position: relative;
+        left: 49%;
+        right: 49%;
+        margin-left: -48vw;
+        margin-right: -49vw;
+    }
+}
+.post-dateline {
+    display: inline-block;
+    margin-top: 0em;
+    padding-top: 1rem;
+    padding-bottom: 2.6rem;
+    border-top: 1px solid #efefef;
+}
+header.tight {
+    margin-bottom: 3rem;
+    * {
+        margin: 0;
+        text-align: center;
+    }
+    h1 {
+        margin-bottom: 1rem;
+    }
+    h2 {
+        display: inline-block;
+        border-top: 1px solid darken(#efefef, 10);
+        padding-top: 1rem;
+    }
+    h3 {
+        margin-top: .35rem;
+    }
+}
+h4.post-source {
+    @include fontsize(14);
+    @include smcaps;
+    padding-bottom: 0em;
+    margin-bottom: 0;
+    margin-top: 0;
+    font-weight: bold;
+    color: #b6b6b6;
+    a {
+        color: #b6b6b6;
+        &:hover {
+            color: $link_color;
+        }
+    }
+}
+.post-location {
+    h3 {
+        display: inline;
+        @include fontsize(14);
+    }
+    a {
+        color: $secondary_link_color;
+        text-decoration: none;
+    }
+}
+.post-essay ~ p:first-child:first-letter {
+    @include fancy_sans;
+    font-size: 75px;
+    line-height: 60px;
+    padding-top: 4px;
+    padding-right: 8px;
+    padding-left: 3px;
+}
+//### GUIDE STUFF ###
+.product-card {
+    margin: 5rem 0;
+}
+.detail .product-link {
+    a {
+        display: block;
+        padding: 1rem;
+        background: #249bd6;
+        color: white;
+        text-transform: uppercase;
+        font-size: 16px;
+        text-decoration: none;
+    }
+}
+.buy-btn {
+    @include fancy_sans;
+    display: block;
+    padding: .5rem 1rem;
+    background: #249bd6;
+    color: white;
+    text-transform: uppercase;
+    @include fontsize(16);
+    text-decoration: none;
+    margin-right: 1rem;
+}
+.buy-btn-wrapper {
+    display: flex;
+    justify-content: start;
+	align-items: center;
+	align-content: space-between;
+    h4 {
+        margin: 0 1.5rem 0 0;
+        line-height: normal;
+        &:after {
+            content: ":";
+        }
+    }
+    h5 {
+        margin-right: 1rem;
+    }
+}
+.post-guide .buy-btn-wrapper {
+    margin-top: 4rem;
+    justify-content: center;
+}
+.detail .post-guide {
+    h3 {
+        @include fontsize(27);
+        margin: 4rem 0 .5rem 0;
+        & + p {
+            margin-top: 0;
+        }
+    }
+}
+//### PAGE NAVIGATION ###
+.nav-wrapper {
+    @include constrain_narrow();
+    border-bottom: 3px double #efefef;
+}
+#page-navigation {
+    margin: 2em auto;
+    text-align: center;
+    display: table;
+    ul {
+        list-style-type: none;
+        margin: 0 auto;
+        width: 100%;
+        text-align: center;
+        padding: 0;
+    }
+    li {
+        margin: 6px auto;
+        clear: both;
+        line-height: 24px;
+        text-align: center;
+    }
+    span {
+        @include fancy_sans;
+        @include fontsize(14);
+        min-width: 70px;
+        display: block;
+        text-align: right;
+        margin-right: 10px;
+        float: left;
+    }
+    a {
+        display: block;
+        float: left;
+        font-family: $fancy_serif;
+        text-align: left;
+        font-style: italic;
+        color: $brown;
+        text-decoration: none;
+    }
+}
+
+.article-afterward {
+    @extend %clearfix;
+    @include constrain_narrow;
+    padding-bottom: 2rem;
+    .article-card-mini {
+        margin-bottom: 0
+    }
+    .hedtinycaps {
+        display: inline-block;
+        margin-bottom: 2.5rem;
+        border-bottom: 2px solid #efefef;
+    }
+    @include breakpoint(gamma) {
+        @include constrain(960px);
+    }
+}
+.related-bottom {
+    @extend %clearfix;
+    &:after {
+        display: block;
+        content: '';
+        @include constrain_narrow;
+        height: 30px;
+        border-bottom: 3px double #efefef;
+    }
+}
+.article-card-list {
+    padding: 0 !important;
+    margin: 0 !important;
+    list-style-type: none !important;
+    margin: 0 auto !important;
+}
+.article-card-mini, .detail .article-card-mini {
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 2rem;
+    max-width: 100%;
+    a { text-decoration: none;}
+    .post-title {
+        @include fontsize(20);
+        text-align: center;
+        line-height: 1.2;
+        margin: 0;
+    }
+    .post-subtitle {
+        @include fontsize(18);
+        text-align: center;
+        font-family: $fancy_serif;
+        font-style: italic;
+        font-weight: normal;
+        margin: .25rem auto 0;
+    }
+    .post-summary, .post-date{
+        text-align: center;
+        display: inline-block;
+        line-height: 0.6 !important;
+        color: #b6b6b6;
+    }
+    @include breakpoint(omega) {
+        margin: 0 auto;
+        max-width: 70%;
+        margin-bottom: 0;
+    }
+    @include breakpoint(alpha) {
+        max-width: 50%;
+    }
+    @include breakpoint(beta) {
+        max-width: 47%;
+        float: left;
+        margin-right: 1rem;
+        margin-bottom: 1.5rem;
+    }
+    @include breakpoint(gamma) {
+        max-width: 230px;
+        float: left;
+        margin-right: .5rem;
+    }
+}
+.post-mini-image {
+    max-height: 220px;
+    overflow: hidden;
+    @include breakpoint(beta) {
+        margin-bottom: 1rem;
+    }
+    img {
+        margin-top: -20%;
+    }
+}
+
+
+.entry-footer {
+    @extend %clearfix;
+    @include constrain_narrow;
+    border-bottom: 3px double #efefef;
+    margin-top: 2em;
+    text-align: left;
+    h3 {
+        @include smcaps;
+        @include fontsize(16);
+    }
+    h3 + ul {
+        padding: 0;
+    }
+    li {
+        margin: .25em 0;
+        list-style-type: none;
+    }
+    li ul {
+        columns: 2 auto;
+        list-style-type: none;
+        margin-left: .5rem;
+        padding: 0;
+    }
+    li ul li:before {
+      content: "\2022";
+      margin-right: .45rem;
+      color: lighten($body_font_color, 40);
+    }
+    .grouper {
+        margin-top: 1em;
+    }
+    a {
+        text-decoration: none;
+        color: lighten($body_font_color, 20);
+    }
+    #wildlife li ul li {  
+        color: lighten($body_font_color, 40);
+        a {
+            color: lighten($body_font_color, 10);
+        }
+    }
+    @include breakpoint(beta) {
+        padding-bottom: 2rem;
+        #wildlife {  
+            max-width: 55%;
+            float: left;
+            margin-right: 1.2rem;
+        }
+        #recommended-reading{
+            ul { 
+                list-style-type: none;
+            }
+            img {
+                max-width: 180px;
+            }
+        }
+    }
+    aside {
+        @extend %clearfix;
+    }
+}
+#field_notes {
+    @include breakpoint(beta) {
+        max-width: 33%;
+        float: left;
+        margin-top: .15em;
+        margin-left: 7em;
+    }
+    li:before {
+      content: "\2022";
+      margin-right: .35rem;
+      color: $body_font_light;
+    }
+}
+.rr-clear {
+    clear: left;
+}
+
+//### FOOTNOTES ###
+.footnote {
+    margin: 1em auto 0 auto;
+    padding: 0;
+    list-style-type: none;
+    p {
+        font-size: 1rem;
+        line-height: 1.4;
+        margin-top: 0 !important;
+    }
+    hr {display: none;}
+    ol {
+        padding-left: 1em;
+        @include breakpoint(alpha) {
+            margin-left: 1em;
+        }
+    }
+}
+sup {
+    line-height: 1;
+    .footnote-ref {
+        padding: 4px 3px;
+        
+    }
+}
+
+//### Figments ###
+.downloads {
+    list-style-type: none;
+}
+
+// ### Books ###
+.book {
+    &:after {
+        display: block;
+        content: '';
+        height: 30px;
+        border-bottom: 3px solid #efefef;
+        width: 200px;
+        margin: 0 auto 3rem auto;
+        padding-left: 30px;
+    }
+}
+.book-metadata {
+    text-align: left;
+    @include fancy_sans;
+    dd {
+      display: inline;
+      margin: 0;
+    }
+    dd:after{
+      display: block;
+      content: '';
+    }
+    dt{
+      display: inline-block;
+    }
+    dt:after {
+        content: ":";
+    }
+}
+.thoughts, .highlights, .meta-cover, .dis {
+    @include constrain_narrow;
+    font-family: $fancy_serif;
+    text-align: left;
+    p {
+        max-width: 100%;
+    }
+}
+.book-cover-wrapper {
+    @include constrain_wide;
+    img {
+        float: left;
+        max-width: 20rem;
+    }
+}
+.thoughts {
+    margin-top: 4rem;
+    p:first-of-type {
+        margin-top: 0;
+    }
+}
+.thoughts h5, .highlights h4 {
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin: 3em 0 .5em 0;
+    @include fancy_sans;
+    @include smcaps;
+    @include fontsize(14);
+}
+.highlights div:first-of-type p:first-of-type {
+    margin-top: 0;
+}
+.book-highlight p:last-of-type {
+    margin-bottom: 0;
+}
+.book p:last-of-type, .highlights div:first-of-type p:last-of-type{
+    margin-top: 8px;
+}
+.highlink {
+    @include fontsize(20);
+    margin-right: .5rem;
+    float: left;
+    line-height: 1.6;
+    text-decoration: none;
+    color: lighten($body_font_color, 60);
+    @include breakpoint(alpha) {
+        margin-top: 1px;
+    }
+    &:visited {
+        color: lighten($body_font_color, 60);
+    }
+}
+.foot {
+    margin-top: 16px;
+    @include fancy_sans;
+    @include fontsize(16);
+}
+.dis {
+    @include fontsize(16);
+    text-align: center;
+}