updated stylesheets and added essays

9 files changed, 194 insertions, 32 deletions

diff --git a/design/sass/_archives.scss b/design/sass/_archives.scss
index 6e2e66a..a2caba9 100644
--- a/design/sass/_archives.scss
+++ b/design/sass/_archives.scss
@@ -64,6 +64,45 @@
     margin: 0;
 }
 
+.archive-list {
+    @include constrain_narrow;
+    @include breakpoint(epsilon) {
+    }
+    text-align: left;
+    h1 {
+        text-align: left;
+        @include fancy_sans;
+    }
+    span {
+        @include fancy_sans;
+        @include smcaps;
+        @include fontsize(13);
+        font-weight: bold;
+        color: #999;
+    }
+    ul {
+        padding: 0;
+        list-style-type: none;
+    }
+    a { 
+        text-decoration: none;
+        color: lighten($body_font_color, 20);
+        &:hover {
+            color: $link_color;
+        }
+    }
+    h2 {
+        font-family: $fancy_headline_font_serif;
+        @include fontsize(32);
+        margin: 0;
+        line-height: 1.1;
+    }
+    p {
+        margin: 0;
+        @include fontsize(20);
+        font-family: $fancy_italic;
+    }
+}
 // Specific pages vary slightly
 // Books
 .book-grid {
@@ -228,6 +267,7 @@
     }
     .post-location {
         color: lighten($body_font_light, 5);
+
     }
     .btn {
         @include smcaps;
diff --git a/design/sass/_comments.scss b/design/sass/_comments.scss
index 52ff6b1..45c81dc 100644
--- a/design/sass/_comments.scss
+++ b/design/sass/_comments.scss
@@ -59,8 +59,8 @@
 
 .comment--form--wrapper {
     @include constrain_narrow();
-    &:before {
-        @include faded_line_after;
+    p {
+        font-family: $fancy_headline_font_serif;
     }
 }
 .comment--form--header {
diff --git a/design/sass/_details.scss b/design/sass/_details.scss
index 8cadba4..ffc32f5 100644
--- a/design/sass/_details.scss
+++ b/design/sass/_details.scss
@@ -1,12 +1,31 @@
 .detail {
+    #article {
+        padding-bottom: 2rem;
+        border-bottom: 3px double #efefef;
+    }
     article {
+        font-family: mffweb, Georgia, 'Times New Roman', serif;
         @include constrain_narrow;    
         margin-top: 4rem;
+        h1 {
+            font-family: mffweb, Georgia, 'Times New Roman', 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-family: $fancy_italic;
+        font-size: 1.5rem;
+        line-height: 1;
+        margin-top: .5rem;
+    }
     .map {
         width: 100vw;
         position: relative;
@@ -16,12 +35,39 @@
         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 {
+        font-family: $fancy_italic;
+        h4 {
+            margin-bottom: 0;
+        }
+    }
+    p.small {
+        @include fontsize(18);
+    }
     .sci {
         text-align: center;
         @include fontsize(24);
@@ -33,6 +79,12 @@
         @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 {
@@ -69,11 +121,31 @@
         margin-right: -49vw;
     }
 }
-
+h4.post-source {
+    @include fontsize(14);
+    @include smcaps;
+    display: inline-block;
+    margin-top: 0em;
+    padding-top: 1em;
+    padding-bottom: 0em;
+    border-top: 1px solid #efefef;
+    margin-bottom: 0;
+    font-weight: bold;
+    color: #b6b6b6;
+    a {
+        color: #b6b6b6;
+        &:hover {
+            color: $link_color;
+        }
+    }
+}
 //### PAGE NAVIGATION ###
+.nav-wrapper {
+    @include constrain_narrow();
+    border-bottom: 3px double #efefef;
+}
 #page-navigation {
     margin: 2em auto;
-    @include constrain_narrow();
     text-align: center;
     display: table;
     ul {
@@ -90,16 +162,18 @@
         text-align: center;
     }
     span {
+        @include fancy_sans;
+        @include fontsize(14);
         min-width: 70px;
         display: block;
         text-align: right;
         margin-right: 10px;
-        margin-top: 2px;
         float: left;
     }
     a {
         display: block;
         float: left;
+        font-family: $fancy_headline_font_serif;
         text-align: left;
         font-style: italic;
         color: $brown;
@@ -110,6 +184,7 @@
 .entry-footer {
     @extend %clearfix;
     @include constrain_narrow;
+    border-bottom: 3px double #efefef;
     margin-top: 2em;
     text-align: left;
     h3 {
@@ -148,7 +223,7 @@
         }
     }
     @include breakpoint(beta) {
-        margin-bottom: 4em;
+        padding-bottom: 2rem;
         #wildlife {  
             max-width: 55%;
             float: left;
@@ -165,14 +240,6 @@
     }
     aside {
         @extend %clearfix;
-        margin-bottom: 3em;
-    }
-    &:after, &:before {
-        @include faded_line_after;
-        @include breakpoint(beta) {
-            display: block;
-            margin-bottom: 2em;
-        }
     }
 }
 #field_notes {
@@ -197,12 +264,6 @@
     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: 1rem;
         line-height: 1.4;
@@ -229,7 +290,6 @@ sup {
 }
 
 // ### Books ###
-
 .book-metadata {
     text-align: left;
     dd {
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
index dfe632a..ed4a212 100644
--- a/design/sass/_fonts.scss
+++ b/design/sass/_fonts.scss
@@ -1,10 +1,34 @@
 @font-face {
     font-family: 'carrois_gothicregular';
-    src: url('carroisgothic-regular-webfont.eot');
-    src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('carroisgothic-regular-webfont.woff') format('woff'),
-         url('carroisgothic-regular-webfont.ttf') format('truetype');
+    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-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-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-face {
+    font-family: 'mffmbi';
+    src: url('/media/fonts/ffmbi.woff2') format('woff2');
+    src: url('/media/fonts/ffmbi.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 6807fa4..20f9056 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -154,6 +154,22 @@ h3 {
         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;
+    }
+}
 //**************  Universals ************************
 .hide {
     display: none;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 9c00f5e..a4f0386 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -95,12 +95,14 @@ nav[role="navigation"] {
     padding: 0.25em 0.5em;
     a {
         text-decoration: none;
-        color: #505050;
+        color: lighten(#505050, 20);
     }
     ul {
         @include smcaps;
+        @include fancy_sans;
+        @include fontsize(13);
         max-width: 100%;
-        font-weight: 300;
+        font-weight: 600;
         margin-top: 0.5em;
         margin-bottom: 0.5em;
         padding: 0;
@@ -140,7 +142,7 @@ nav[role="navigation"] {
     @extend %clearfix;
     margin-bottom: 1em;
     @include breakpoint(beta) {
-        border-bottom: 1px $brown solid;
+        border-bottom: 1px #e4e4e4 solid;
         position: relative;
     }
     @include breakpoint(gamma) {
@@ -149,11 +151,11 @@ nav[role="navigation"] {
         margin-right: auto;
     }
     @include breakpoint(delta) {
-        margin-top: 1.5em; 
+        margin-top: 1.3rem; 
         max-width: $breakpoint-delta;
     }
     @include breakpoint(epsilon) {
-        margin-top: 1.5em; 
+        margin-top: 1.3rem; 
         max-width: $max_width;
     }
 }
diff --git a/design/sass/_images.scss b/design/sass/_images.scss
index 298171e..faf6e88 100644
--- a/design/sass/_images.scss
+++ b/design/sass/_images.scss
@@ -97,3 +97,12 @@ p + .picwide {
     width: 100%; 
     height: 100%; 
 }
+.pullpicleft {
+    display: none;
+    @include breakpoint(gamma) {
+        display: block;
+        float: left;
+        margin-left: -280px;
+        padding-right: 1rem;
+    }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 1df6cad..2de8000 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -5,6 +5,8 @@ $orange: #b53a04;
 $link_color: #b53a04;
 
 $headline_font_serif: Georgia, 'Times New Roman', serif;
+$fancy_headline_font_serif: mffweb, Georgia, 'Times New Roman', serif;
+$fancy_italic: mffmbi, Georgia, 'Times New Roman', serif; 
 
 $body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
 $body_font_color: $brown;
@@ -13,7 +15,7 @@ $body_font_light: #b3aeae;
 $archive_p_line_height: 1.6;
 //$light;
 $narrow-beta-width: 640px;
-$narrow-max-width: 700px;
+$narrow-max-width: 750px;
 $max_width: 1440px;
 
 @mixin smcaps {
@@ -49,7 +51,7 @@ $max_width: 1440px;
     font-family: sans-serif;
 }
 @mixin fancy-sans {
-    font-family: Helvetica, sans-serif;
+    font-family: mffnweb, Helvetica, sans-serif;
 }
 @mixin fancy-sans-bold {
     font-family: Helvetica, sans-serif;
diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss
index c8fbb95..0ae3b0d 100644
--- a/design/sass/_photos.scss
+++ b/design/sass/_photos.scss
@@ -229,6 +229,15 @@
 //  }
 //}
 
+.circle-pic {
+    border-radius: 50%;
+    border: 3px solid #000;
+}
+#about-luxagraf .circle-pic {
+    float: left;
+    margin-left: -250px;
+}
+
 //lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss
 
 /**