finished up initial design work

13 files changed, 358 insertions, 433 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: "";
diff --git a/design/templates/base.html b/design/templates/base.html
index 41a8033..9be4f51 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -7,17 +7,16 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" 
-          content="{% block metadescription %}Scott Gilbertson is a Technical Writer, Copywriter and Editor helping your company increase its online content to boost your traffic and attract new leads. {% endblock %}">
+          content="{% block metadescription %}{% endblock %}">
     <meta name="author" content="Scott Gilbertson">
     <link rel="alternate" 
           type="application/rss+xml" 
           title="RSS feed"
-          href="/rss/">
+          href="/rss">
     {%block stylesheet%}<link rel="stylesheet" 
           href="/media/screenv1.css?{% now "u" %}" 
           media="screen">{%endblock%}
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    <!--<link rel="manifest" href="/manifest.webmanifest" /> -->
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
@@ -26,30 +25,30 @@
         <header class="site-banner">
             <div id="logo">
                 <a href="/" title="Home">Libregraf</a>
-                <span class="tagline">Let's Tell Your Story</span>
+                <span class="tagline">Free Software &amp; nerdery</span>
             </div>
-            <nav>
+            <nav class="nav-menu">
                 <ul>
-                    <li><a href="/hire-me" title="">Hire Me</a></li>
-                    <li><a href="/about" title="">About Scott</a></li>
-                    <!--<li><a href="/portfolio" title="">Portfolio</a></li>
-                    <li><a href="/praise" title="">Praise</a></li>
-                    <li><a href="/contact" title="">Contact</a></li>
-                    <li><a href="/blog/" title="">Blog</a></li>-->
+                    <li><a href="/essays/" title="Previous articles">Archive</a></li>
+                    <li><a href="/linked/" title="Thoughts on Free, open source and Libre software news">Links</a></li>
+                    <li><a href="/about" title="About this site and the tools I use to make it">About</a></li>
+                    <li><a href="/contact" title="How to get in touch regarding Libregraf">Contact</a></li>
                 </ul>
             </nav>
         </header>
     </div>
     {% block content %}{% endblock %}
     {% block extrabody %}{% endblock %}
-    <footer class="bl">
-        <p id="license">
+    <footer>
+        <ul class="nav-menu footer-nav-menu">
+            <li><a href="/contact" title="How to get in touch regarding Libregraf">Contact</a></li>
+            <li><a href="/rss" title="RSS feed">RSS</a></li>
+            <li><a href="" title="Libregraf on twitter">Twitter</a></li>
+        </ul>
+        <p class="hed-tertiary">
             &copy; {% now "Y" %} 
-            <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>.
+            <span class="h-card"><a class="p-name u-url" href="https://libregraf.net/">Scott Gilbertson</a><data class="p-nickname" value="libregraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>.
         </p>
-        <ul class="footer-nav">
-            <li><a href="/contact" title="contact luxagraf">Contact</a></li>
-        </ul>
     </footer>
     </div>
     {% block js %}{% endblock%}
diff --git a/design/templates/blog/entry_detail.html b/design/templates/blog/entry_detail.html
new file mode 100644
index 0000000..ad4eda8
--- /dev/null
+++ b/design/templates/blog/entry_detail.html
@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+    <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting">
+            <header id="header" class="post-header">
+                <h1 class="p-name hed-primary" itemprop="headline">{{object.title|smartypants|safe}}</h1>
+                {% if object.sub_title %}<h2 class="p-summary hed-secondary">{{object.sub_title|smartypants|safe}}</h2>{%endif%}
+                <div class="post-linewrapper">
+                    <h5 class="hed-tertiary">Filed Under: {% for tag in object.tags.all %}<a href="/essays/tags/{{tag.slug}}" title="View all essays about {{tag}}">{{tag}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</h5>
+                    <time class="dt-published published dt-updated hed-tertiary" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                    <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span>
+                </div>
+            </header>
+        <div id="article" class="e-content entry-content" itemprop="articleBody">
+            {{object.body_html|safe|smartypants}}
+        </div>
+        </article>
+        {% with object.get_next_published as next %}
+        {% with object.get_previous_published as prev %}
+        <div class="nav-wrapper">
+        <nav id="page-navigation" {%if wildlife or object.field_notes.all or object.books.all %}{%else%}class="page-border-top"{%endif%}>
+            <ul>{% if prev%}
+                <li id="prev"><span class="bl">Previous:</span> 
+                    <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a>
+                </li>{%endif%}{% if next%}
+                <li id="next"><span class="bl">Next:</span> 
+                    <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a>
+                </li>{%endif%}
+            </ul>
+        </nav>{%endwith%}{%endwith%}
+        </div>
+        {% if object.related.all %}<div class="article-afterward related">
+            <h6 class="hedtinycaps">You might also enjoy</h6>
+            <ul class="article-card-list">{% for object in related %}
+                <li class="article-card-mini"><a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                    <div class="post-image post-mini-image">
+                        {% if object.featured_image %}
+                            {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %}
+                            {% elif object.image %}
+                            {% include "lib/img_archive.html" with image=object.image nolightbox=True %}
+                            {% else %}
+                            <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}
+                    </div>
+                    <h4 class="p-name entry-title post-title" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4>
+                    {% if object.subtitle%}<h5 class="post-subtitle">{{object.subtitle|safe|smartypants}}</h5>{%endif%}
+                    <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
+                    <p class="post-summary">
+                        <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+                            {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%}
+                        </span>
+                    &ndash;
+                    <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>
+                    </p> 
+                    </a>
+            </li>
+        {% endfor %}</ul>
+        </div>{%endif%}
+</div>
+{% endblock %}
diff --git a/design/templates/blog/entry_list.html b/design/templates/blog/entry_list.html
new file mode 100644
index 0000000..0931ac4
--- /dev/null
+++ b/design/templates/blog/entry_list.html
@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+    <main role="main" id="essay-archive" class="essay-archive archive-list">
+    <h1 class="topic-hed">Essays</h1>
+    <ul>{% for object in object_list %}
+        <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+            <span class="date dt-published hed-tertiary">{{object.pub_date|date:"F Y"}}</span>
+            <a class="u-url" href="{{object.get_absolute_url}}">
+            <h2 class="p-name hed-primary">{{object.title|safe|smartypants|widont}}</h2>
+            <p class="p-summary hed-secondary">{% if object.sub_title %}{{object.sub_title|safe|smartypants}}{%else%}{{object.metadescription}}{%endif%}</p>
+            </a>
+        </li>
+        {%endfor%}</ul>
+    </main>
+{% endblock %}
diff --git a/design/templates/homepage.html b/design/templates/homepage.html
index ed47bdb..ca8d3b5 100644
--- a/design/templates/homepage.html
+++ b/design/templates/homepage.html
@@ -2,87 +2,21 @@
 {% load typogrify_tags %}
 {% block sitename %}
 <head itemscope itemtype="http://schema.org/WebSite">
-    <title itemprop='name'>Everyone has a story - I'll help you tell yours</title>
+    <title itemprop='name'>Libregraf: Free software, open source, and web nerdery</title>
     <link rel="canonical" href="https://libregraf.net/" itemprop="url" />
 
 {% endblock %}
 
-{%block bodyid%}id="home" class="home"{%endblock%}
-
+{%block bodyid%}id="home" class="archive home"{%endblock%}
 {% block content %}
-<div class="content-wrapper hero-wrapper">
-    <div class="content hero">
-        <div class="hero-pic">
-            <img src="/media/bio.jpg" class="circle-pic" alt="Scott Gilbertson" />
-        </div>
-        <div class="hero-text">
-            <h1 class="hed-alpha">Need Content That Converts?</h1>
-            <h2 class="hed-beta">Let's find the weak spots in your content and strengthen them.</h2>
-            <h2 class="hed-beta">I'll create the content you need to amp up your traffic, leads and&nbsp;sales.</h2>
-            <h3 class="hed-alpha">My writing attracts, engages and converts.</h3>
-            <p>Whether you’re an entrepreneur, small business, or large company, my custom tailored content can catapult your online visibility and give you the traffic boost you need to attract new leads.</p>
-            <p><a href="/hire-me" class="btn btn-hollow">Let's Get Started</a></p>
-        </div>
-    </div>
-</div>
-<div class="content-wrapper">
-    <div class="content">
-        <h4 class="hed-gamma hed-border">How Can I Help You?</h4>
-        <p class="narrow">Since the dawn of the Internet I've been helping people discover the power of stories. Stories pull customers in, stories drive traffic. You don't need &#8220;marketing,&#8221; you need good stories. Here's a few ways I can help tell your story.</p>
-        <div class="home-card-wrapper">
-        <div class="flex">
-            <div class="card card-tiny">
-                <div class="card-image">
-                    <img src="/media/img/typing.jpg" alt="hands typing code on laptop" />
-                </div>
-                <h5 class="hed-delta">Technical Writing</h5>
-                <p>My specialty is making the technical easy to understand. I've used my expertise as a developer to write documentation, tutorials, and white papers. I&#8217;ve helped companies like Opera Software, Postmarkapp, Sifter tell their story to developers and users. Lets tell your story.</p>
-            </div>
-            <div class="card card-tiny">
-                <div class="card-image">
-                    <img src="/media/img/content.jpg" alt="hands typing code on laptop" />
-                </div>
-                <h5 class="hed-delta">Content Marketing</h5>
-                <p>Content marketing is marketing-speak for telling stories that captivate your audience. Whether you already have a blog or are starting from scratch, I can help refine your strategies and create content focused on achieving measurable results.</p>
-            </div>
-            <div class="card card-tiny">
-                <div class="card-image">
-                    <img src="/media/img/pen.jpg" alt="pen editing papers" />
-                </div>
-                <h5 class="hed-delta">Copywriting &amp; Copy editing</h5>
-                <p>Maybe you've already written your story, but could use a hand polishing it up. Whether you need some need some fine tuning of what you already have, or need some help organizing and streamlining your story, I can help.</p>
-            </div>
-        </div>
-            <a href="/hire-me" class="btn btn-hollow btn-link">Hire Me!</a>
-            <a href="https://google.com/" class="btn btn-hollow btn-link">Go Cheap</a>
-        </div>
-    </div>
-</div>
-<div class="content-wrapper">
-    <h6 class="hed-gamma hed-border">Companies I've helped</h6>
-        <div class="border-wrapper">
-        <ul class="list-inline home-logos">
-            <li><a href="https://wired.com/" title="Wired.com"><img src="/media/img/wired.png" alt="Wired logo" /></a></li>
-            <li><a href="https://opera.com/" title="Opera.com"><img src="/media/img/opera.png" alt="Opera Web Browser logo" /></a></li>
-            <li><a href="https://arstechnica.com/" title="ArsTechnica.com"><img src="/media/img/ars.png" alt="Ars logo" /></a></li>
-            <li><a href="https://sifterapp.com/" title="Sifter.com"><img src="/media/img/sifter.png" alt="Sifter logo" /></a></li>
-            <li><a href="https://www.boostmobile.com/" title="boostmobile"><img src="/media/img/boost.png" alt="Boost Mobile logo" /></a></li>
-            <li><a href="https://webmonkey.com/" title="Webmonkey.com"><img src="/media/img/webmonkey.jpg" alt="Webmonkey logo" /></a></li>
-            <!--<li><a href="" title=""><img src="/media/img/budgettravel.jpg" alt="Budget Travel logo" /></li>-->
-            <li><a href="https://postmarkapp.com/" title="Postmark"><img src="/media/img/postmark.png" alt="Postmarkapp logo" /></a></li>
-            <li><a href="https://theregister.co.uk/" title="The register"><img src="/media/img/register.png" alt="Register logo" /></a></li>
-        </ul>
-        </div>
-</div>
-
-<div class="content-wrapper">
-    <div class="content">
-        <div class="home-border-wrapper">
-            <h6 class="hed-gamma hed-border">What Clients Say</h6>
-        </div>
-    </div>
+<div class="content-narrow">
+{% for obj in object_list %}
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <span class="date dt-published hed-tertiary">{{obj.pub_date|date:"F d, Y"}}</span>
+    <h3 class="p-name hed-primary"><a class="u-repost-of" href="{{obj.link_url}}" title="Read the original story">{{obj.title|safe|smartypants|widont}}</a> &nbsp;<a class="hed-star u-url" href="{{obj.get_absolute_url}}">&#9733;</a></h3>
+    <div class="p-summary">{{obj.body_html|safe|smartypants}}</div>
+</article>
+{% if forloop.last %}{%else%}<hr />{%endif%}
+{% endfor %}
 </div>
 {% endblock %}
-
-#### Copywriting &amp; Copy editing
-Whether you need some writing done from scratch or just need some fine tuning of what you already have, I can help.
diff --git a/design/templates/links/link_detail.html b/design/templates/links/link_detail.html
new file mode 100644
index 0000000..500dfcb
--- /dev/null
+++ b/design/templates/links/link_detail.html
@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <span class="date dt-published blok">{{object.pub_date|date:"F d, Y"}}</span>
+    <h3 class="hed-primary"><a class="u-url" href="{{object.link_url}}" title="Read the original story">{{object.title|safe|smartypants|widont}}</a></h3>
+    <div class="p-summary">{{object.body_html|safe|smartypants}}</div>
+</article>
+</div>
+{% endblock %}
diff --git a/design/templates/links/link_list.html b/design/templates/links/link_list.html
new file mode 100644
index 0000000..f38771a
--- /dev/null
+++ b/design/templates/links/link_list.html
@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+{% for obj in object_list %}
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <span class="date dt-published blok">{{obj.pub_date|date:"F d, Y"}}</span>
+    <h3 class="p-name hed-primary"><a class="u-repost-of" href="{{obj.link_url}}" title="Read the original story">{{obj.title|safe|smartypants|widont}}</a> &nbsp;<a class="star u-url" href="{{obj.get_absolute_url}}">&#9733;</a></h3>
+    <div class="p-summary">{{obj.body_html|safe|smartypants}}</div>
+</article>
+{% endfor %}
+</div>
+{% endblock %}
diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html
new file mode 100644
index 0000000..095ccd1
--- /dev/null
+++ b/design/templates/pages/page.html
@@ -0,0 +1,12 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="page" class="detail"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <h3 class="hed-primary">{{object.title|safe|smartypants|widont}}</h3>
+    <div class="e-content">{{object.body_html|safe|smartypants}}</div>
+</article>
+</div>
+{% endblock %}