finished up initial design work

6 files changed, 211 insertions, 339 deletions

diff --git a/design/sass/_content.scss b/design/sass/_content.scss
index 9a81b64..598d63e 100644
--- a/design/sass/_content.scss
+++ b/design/sass/_content.scss
@@ -1,236 +1,74 @@
-.hero-wrapper {
-    @include fancy_sans;
-    padding: 5rem 0 0;
-    &:after {
-        @include faded_line_after;
-        margin-top: 4rem;
-        margin-bottom: 4rem;
-        padding: 0;
-    }
-}
-.circle-pic {
-    border-radius: 50%;
-    border: 5px solid #000;
-}
-.btn {
-    @include fontsize(14);
-    display: inline-block;
-    border-radius: 4px;
-    @include fancy_sans;
-    @include smcaps;
-    -webkit-appearance: none;
-    text-decoration: none;
-    cursor: pointer;
-    background: $link_color;
-    color: #fff !important;
-    border: 1px solid $link_color;
-    padding: 7px 9px;
-    white-space: nowrap;
-    &:hover {
-        background: $link_hover_color;
-        border: 1px solid $link_hover_color;
-    }
+.content-narrow {
+    margin-top: 3rem;
+    @include constrain_narrow;
 }
-.btn-small {
-    @include fontsize(10);
-    @include smcaps;
-}
-.btn-hollow {
-    @include fontsize(17);
-    padding: 6px 8px;
-    border: none; //1px solid $body_font_light;
-    color: $link_color !important;
-    outline: $link_color !important;
-    background: white;
-    border: 1px solid $link_color;
-    &:hover {
-        background: $link_color !important;
-        color: white !important;
-    }
-}
-.hed-alpha {
-    @include fancy_serif;
-    line-height: 1.2;
-    font-weight: 600;
-}
-.hed-beta {
-    line-height: 1.4;
-}
-.hed-gamma {
-    line-height: 1.4;
-    @include fontsize(20);
-    @include fancy_sans;
-    text-align: center;
-    letter-spacing: 1px;
-    margin: 0 auto;
-}
-.hed-delta {
-    @include fancy_sans;
-    @include fontsize(22);
-    font-weight: bold;
-    margin-bottom: .5em;
-}
-.hed-epsilon {
-    @include fontsize(14);
-    @include fancy_sans;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: bold;
-    color: $body_font_light;
-    line-height: 1.2;
-    text-align: center;
-    margin: 0;
+.post-header {
+    @extend %clearfix;
+    padding-bottom: 2.6rem;
+    border-bottom: 1px solid #efefef;
 }
 .hed-border {
     display: inline-block;
     border-bottom: 3px solid #efefef;
     width: auto;
 }
-.hero {
-    .hero-pic {
-        max-width: 50%;
-        margin: 1.5rem auto;
-    }
-    h3.hed-alpha  {
-        @include fontsize(24);
-    }
-    .hed-beta {
-        @include fancy_sans;
-        @include fontsize(22);
-        margin: .5rem auto;
-        text-align: center;
-        &:last-of-type:after {
-            @include faded_line_after;
-            margin-top: 2rem;
-            margin-bottom: 2rem;
-        }
-    }
-    @include breakpoint(beta) {
-        display: flex;
-        align-items: flex-start;
-        align-content: flex-start;
-        .hero-text {
-            margin-left: 5rem;
-            & > * {
-                text-align: left;
-            }
-        }
-        p {
-            width: 90%;
-            @include fontsize(20);
-        }
-        .btn {
-            margin-top: 1.5rem;
-        }
-    }
-}
-.home {
-    h4 {
-        @include fancy_sans;
-        text-align: center;
-        letter-spacing: 1px;
-    }
-    hr {
-        border-top: 3px solid #efefef;
-        margin: 5em auto;
-        width: 40%;
-    }
-}
-.border-wrapper {
-    margin: 2rem auto 0;
-}
-.home-logos {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    li {
-        margin: 0 .5rem;
-    }
-    img {
-        max-width: 80px;
-    }
+.flex {
     @include breakpoint(gamma) {
-        @include constrain_wide;
-        margin: 0 auto;
-        img {
-            max-width: 120px;
-        }
+        display: flex;
+        justify-content: center ;
     }
 }
 
-
-.home-border-wrapper {
-    @include breakpoint(beta) {
-        margin-top: 4rem;
-        .btn {
-            margin-bottom: 4rem;
-        }
-    }
-    &:before {
-        @include faded_line_after;
-        margin-top: 0;
-        margin-bottom: 5rem;
+article ul {
+    list-style-type: none;
+    @include fontsize(22);
+    li:before {
+        content: "";
+        border: 2px #000 solid !important;
+        border-radius: 50px;
+        margin-top: 16px;
+        margin-left: -12px;
+        position: absolute;
     }
 }
 
-.card-image {
-    max-height: 10rem;
-    overflow: hidden;
-    border: 4px $body_font_color solid;
-    img {
-        width: 100%;
-        margin-top: -14%;
+.archive-list {
+    @include constrain_narrow;
+    text-align: left;
+    ul {
+        padding: 0;
+        list-style-type: none;
     }
-}
-.home-card-wrapper {
-    @include breakpoint(beta) {
-        margin-top: 4rem;
-        .btn {
-            margin-bottom: 4rem;
+    a { 
+        text-decoration: none;
+        color: lighten($body_font_color, 20);
+        &:hover {
+            color: $link_color;
         }
     }
-    &:after {
-        @include faded_line_after;
-        margin-top: 0;
-        margin-bottom: 5rem;
-    }
-}
-.card {
-    margin: 4rem auto;
     p {
-        margin-top: .5rem;
-        @include fontsize(18);
-    }
-    h5 {
-        @include fontsize(24);
-        text-align: center;
-        margin: 1rem 0 0 0;
-    }
-    &:after {
-        @include faded_line_after;
-    }
-    &:last-of-type:after {
-        display: none;
-    }
-    @include breakpoint(beta) {
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: 0;
-        margin-top: 0;
-        margin-right: 2rem;
-        &:last-of-type {
-            margin-right: 0;
-        }
-        &:after {
-            display: none;
-        }
+        margin: 0;
+        @include fontsize(20);
+        font-style: italic;
     }
 }
-.flex {
-    @include breakpoint(gamma) {
-        display: flex;
-        justify-content: center ;
+.post-linewrapper {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    display: inline-block;
+    margin-left:  0;
+    border-top: 2px solid darken($body_color, 8);
+    float: left;
+}
+
+.star {
+    color: transparent;  
+    text-shadow: 0 0 0 lighten($body_font_color, 50);
+    text-decoration: none;
+    @include fontsize(22);
+    padding: 0 6px 3px 6px;
+    font-family: "Hiragino Kaku Gothic Pro", "Osaka", "Zapf Dingbats";
+    &:hover {
+        background: darken(#fff, 10);
     }
 }
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
index 77f6f7c..b80bc6b 100644
--- a/design/sass/_fonts.scss
+++ b/design/sass/_fonts.scss
@@ -33,3 +33,17 @@
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'sortsmill';
+    src: url('/media/fonts/oflgoudystmtt-webfont.woff2') format('woff2');
+    src: url('/media/fonts/oflgoudystmtt-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'sortsmill';
+    src: url('/media/fonts/oflgoudystmtt-italic-webfont.woff2') format('woff2');
+    src: url('/media/fonts/oflgoudystmtt-italic-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
index 1ff56b9..d326d4a 100644
--- a/design/sass/_footer.scss
+++ b/design/sass/_footer.scss
@@ -1,54 +1,50 @@
 footer {
-    margin-top: 5em;
+    @include constrain_wide;
+    margin-top: 6rem;
+    margin-bottom: 1rem;
     @include breakpoint(gamma) {
         max-width: 960;
+        margin-top: 8rem;
+        margin-bottom: 3rem;
     }
     &:before {
-        @include breakpoint(beta) {
-            @include faded_line_after;
-            margin-bottom: 1.2em;
-        }
-    }
-    .footer-nav {
-        list-style-type: none !important;
-        margin-left: 0 !important;
-        border-top: 1px $body_font_color dotted;
-        border-bottom: 1px $body_font_color dotted;
-        padding: .5rem 0;
-        @include breakpoint(beta) {
-            border: none;
-        }
+        @include faded_line_after;
+        margin-bottom: 2em;
     }
-    li {
-        display: inline;
-        margin: 0 .25em;
-        &:after {
-            content: "\00b7";
-            color: #999999;
-            padding-left: 0.75em;
+    .footer-nav-menu {
+        padding: 0;
+        text-align: center;
+        margin-bottom: 1rem;
+        li {
+            display: inline;
+            margin: 0 auto;
+            &:after {
+                content: "/";
+                color: #999999;
+                padding-left: 0.75em;
+            }
+            a {
+                color: $secondary-link-color;
+                text-decoration: none;
+            }
         }
-        a {
-            color: $secondary-link-color;
-            text-decoration: none;
+        li:last-of-type {
+            margin-right: 0;
+            &:after {
+                content: " ";
+            }
         }
-        ul { display:inline;}
-    }
-    li:last-of-type {
-        margin-right: 0;
-        &:after {
-            content: " ";
+        @include breakpoint(beta) {
+            float: right;
+            text-align: left;
         }
     }
     p {
-        @include fontsize(10);
         text-align: center;
-        margin-top: 1.5em;
-        margin-bottom: 1.5em;
+        a { text-decoration: none; }
+        @include breakpoint(beta) {
+            float: left;
+            text-align: left;
+        }
     }
 }
-#license {
-    @include fancy_sans;
-    @include fontsize(12);
-    text-transform: none;
-    letter-spacing: normal;
-}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 719d23a..8e3e435 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -1,18 +1,17 @@
 html {
     border-top: 0.25em solid $body_font_color;
 }
-
 body {
     margin: 0 auto;
     padding: 0;
     overflow-x: hidden;
     font:$body_p_font;
     color: $body_font_color;
-    text-align: center;
-    background-color: transparent
+    text-align: left;
+    background-color: $body_color;
 }
 ul {
-    padding: 0;
+    text-align: left;
 }
 // eliminate touch delay on mobile safari
 a, button, input, select, textarea, label, summary {
@@ -46,9 +45,10 @@ p {
     }
 }
 time {
-    @include smcaps;
-    @include fontsize(11);
     display: block;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    @include fontsize(11);
     span {
         @include fontsize(13);
     }
@@ -63,6 +63,12 @@ pre {
         line-height: 1.5;
     }
 }
+p code {
+    font-family: Inconsolata, Consolas, Courier New, monospace;
+    font-size: 96%;
+    background: darken($body_color, 8);
+    padding: 1px 3px;
+}
 object, embed, video {
     max-width: 100%;
     width: 100%;
@@ -75,9 +81,9 @@ audio {
 blockquote {
     @include fontsize(18);
     display: block;
-    border-top: 4px solid lighten($body_font_light, 20);
-    border-bottom: 4px solid lighten($body_font_light, 20);
     margin: 3rem 0;
+    padding-left: 1rem;
+    border-left: 2px solid lighten($body_font_color, 40);
     position: relative;
     text-align: left;
     font-style: italic;
@@ -85,6 +91,9 @@ blockquote {
       display: block;
       text-align: right;
     }
+    p {
+        @include fontsize(18);
+    }
     @include breakpoint(alpha){
         @include fontsize(20);
         line-height: 1.5;
@@ -92,21 +101,12 @@ blockquote {
     @include breakpoint(beta){
         @include fontsize(22);
         line-height: 1.6;
+        margin-left: 1rem;
+        p {
+            @include fontsize(20);
+        }
     }
 }
-blockquote:before {
-    @include fancy_sans;
-    @include fontsize(68);
-    content: '\201C';
-    position: absolute;
-    top: -1.35rem;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 3rem;
-    height: 2rem;
-    color: #666;
-    text-align: center;
-}
 hr {
     border: 0; 
     height: 1px;
@@ -129,7 +129,7 @@ figcaption, figcaption a {
     line-height: 1.9;
     padding: .3rem .5rem .3rem 0;
     color: #666;
-    border-bottom: 1px lighten($body_font_light, 20) solid;
+    border-bottom: 1px lighten($body_font_color, 40) solid;
     margin-bottom: 1rem;
 }
 figcaption a:visited {
@@ -161,6 +161,8 @@ h3 {
 }
 h4 {
     @include fontsize(20);
+    @include fancy_sans;
+    font-weight: bold;
     text-align: left;
     @include breakpoint(gamma){
         @include fontsize(22);
@@ -175,19 +177,50 @@ h5 {
         line-height: 1.4;
     }
 }
-.subhead {
-    font-size: 26px !important;
+//**************  Universals ************************
+.hed-primary {
+    @include fancy_serif;
+    @include fontsize(28);
+    margin: .25rem 0;
+    line-height: 1.2;
+    font-weight: 400;
+    @include breakpoint(delta) {
+        @include fontsize(32);
+        margin-top: 0;
+    }
+}
+.hed-secondary {
+    @include fancy_serif;
+    @include fontsize(20);
+    margin: 0;
     font-style: italic;
-    margin-top: 0;
-    margin-bottom: 0;
+    line-height: 1.2;
 }
-.subhead + p {
-    margin-top: .75rem !important;
+.hed-tertiary, .nav-menu {
+    @include fancy_sans;
+    @include fontsize(14);
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+    line-height: 1.3;
+    color: lighten($body_font_color, 40);
+    a {
+        color: lighten($body_font_color, 40);
+    }
 }
-.essay-intro .subhead + p:first-of-type {
-    margin-top: .75rem !important;
+.blok {
+    display: block;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    @include fontsize(13);
+    @include fancy_sans;
+    letter-spacing: 1px;
+    font-weight: bold;
+    color: lighten($body_font_color, 40);
+    text-align: left;
 }
-//**************  Universals ************************
 .hide {
     display: none;
 }
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 431897e..c5d9ed1 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -1,31 +1,8 @@
-.header-wrapper { 
-}
-
-#logo {
-    a {
-        @include fontsize(32);
-        line-height: 1;
-        text-decoration: none;
-        display: block;
-        font-weight: 300;
-        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
-        color: $body_font_color;
-    }
-    .tagline {
-        display: block;
-        @include fancy_sans;
-        @include smcaps;
-        @include fontsize(12);
-        font-style: normal;
-        margin-left: 2px;
-    }
-}
 .site-banner {
     @extend %clearfix;
     margin: 0 auto;
     @include constrain_wide;
-    @include smcaps;
-    nav {
+    .nav-menu {
         border-top: 1px #444444 dotted;
         border-bottom: 1px #444444 dotted;
         //box-shadow: 0 3px 8px 0 #e6e6e6
@@ -35,22 +12,18 @@
         margin-left: -20px;
         margin-top: 1em;
         padding: 0.25em 0.5em;
-        a {
+        a { 
+            @include fontsize(15);
             text-decoration: none;
-            color: #505050;
-            &:visited {
-                color: #505050
-            }
+            font-weight: bold;
+            color: lighten($body_font_color, 30);
         }
         ul {
-            @include smcaps;
-            @include fancy_sans;
-            @include fontsize(15);
             max-width: 100%;
-            font-weight: 600;
             margin-top: 0.5em;
             margin-bottom: 0.5em !important;
             padding: 0;
+            text-align: center;
             @include constrain(85%);
         }
         li {
@@ -68,8 +41,6 @@
                 }
             }
         }
-        @include breakpoint(beta) {
-        }
     }
     @include breakpoint(beta) {
         height: 90px;
@@ -101,22 +72,22 @@
                 margin-top: -30px;
             }
         }
-        nav {
+        .nav-menu {
             float: right;
             border: none;
             margin: 22px 0 0 0;
             padding: 0;
             ul {
                 max-width: 50em;
+                text-align: left; 
             }
         }
     }
 }
-
 .header-wrapper {
     @extend %clearfix;
     @include breakpoint(beta) {
-        border-bottom: 1px #f3efef solid;
+        border-bottom: 1px darken(#fff, 10) solid;
         position: relative;
     }
     @include breakpoint(gamma) {
@@ -133,3 +104,35 @@
         max-width: $max_width;
     }
 }
+#logo {
+    a {
+        @include fontsize(34);
+        line-height: 1;
+        text-decoration: none;
+        display: block;
+        font-weight: 300;
+        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+        text-transform: uppercase;
+        color: $body_font_color;
+        text-align: center;
+        margin-top: 1.3rem;
+        @include breakpoint(beta) {
+            text-align: left;
+            @include fontsize(32);
+        }
+    }
+    .tagline {
+        display: block;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        @include fancy_sans;
+        @include fontsize(13);
+        font-style: normal;
+        margin-left: 2px;
+        text-align: center;
+        @include breakpoint(beta) {
+            text-align: left;
+            @include fontsize(12);
+        }
+    }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index f12888e..6bd5e1b 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -1,21 +1,15 @@
-
+$body_color: darken(#fff, 3);
 $body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
 $body_font_color: #222;
 $link_color: #b53a04;
-$body_font_light: #787474;
 $secondary-link-color: #838383;
-$narrow-beta-width: 720px;
-$narrow-max-width: 750px;
+$narrow-beta-width: 680px;
+$narrow-max-width: 720px;
 $max_width: 1140px;
 $link_hover_color: #b53a04;
 
 $home-palette-primary: #14cfe7;
 
-@mixin smcaps {
-    @include fancy_sans;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
 @function calc-rem($size) {
   $remsize: $size/16;
   @return #{$remsize}rem;
@@ -35,7 +29,7 @@ $home-palette-primary: #14cfe7;
     font-family: mffnweb, Helvetica, sans-serif;
 }
 @mixin fancy-serif {
-    font-family: mffweb, Georgia, 'Times New Roman', serif;
+    font-family: mffweb, 'PT Serif', Georgia, 'Times New Roman', serif;
 }
 %clearfix {
     *zoom: 1;
@@ -50,12 +44,6 @@ $home-palette-primary: #14cfe7;
     }
 }
 
-@mixin transparent_class {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-  filter: alpha(opacity = 90);
-  opacity: 0.9;
-}
-
 @mixin faded_line_after {
     display: block;
     content: "";