initial commit

14 files changed, 1251 insertions, 0 deletions

diff --git a/design/config.rb b/design/config.rb
new file mode 100644
index 0000000..3d2c82a
--- /dev/null
+++ b/design/config.rb
@@ -0,0 +1,12 @@
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "../site/media"
+sass_dir = "sass"
+images_dir = "../site/media/img"
+javascripts_dir = "../site/media"
+#output_style = :compressed
+output_style = :compressed
+#output_style = (environment == :production) ? :compressed : :expanded
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/design/sass/_content.scss b/design/sass/_content.scss
new file mode 100644
index 0000000..9a81b64
--- /dev/null
+++ b/design/sass/_content.scss
@@ -0,0 +1,236 @@
+.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;
+    }
+}
+.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;
+}
+.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;
+    }
+    @include breakpoint(gamma) {
+        @include constrain_wide;
+        margin: 0 auto;
+        img {
+            max-width: 120px;
+        }
+    }
+}
+
+
+.home-border-wrapper {
+    @include breakpoint(beta) {
+        margin-top: 4rem;
+        .btn {
+            margin-bottom: 4rem;
+        }
+    }
+    &:before {
+        @include faded_line_after;
+        margin-top: 0;
+        margin-bottom: 5rem;
+    }
+}
+
+.card-image {
+    max-height: 10rem;
+    overflow: hidden;
+    border: 4px $body_font_color solid;
+    img {
+        width: 100%;
+        margin-top: -14%;
+    }
+}
+.home-card-wrapper {
+    @include breakpoint(beta) {
+        margin-top: 4rem;
+        .btn {
+            margin-bottom: 4rem;
+        }
+    }
+    &: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;
+        }
+    }
+}
+.flex {
+    @include breakpoint(gamma) {
+        display: flex;
+        justify-content: center ;
+    }
+}
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
new file mode 100644
index 0000000..77f6f7c
--- /dev/null
+++ b/design/sass/_fonts.scss
@@ -0,0 +1,35 @@
+@font-face {
+    font-family: 'carrois_gothicregular';
+    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: 'mffweb';
+    src: url('/media/fonts/ffmbi.woff2') format('woff2');
+    src: url('/media/fonts/ffmbi.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+
+@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;
+}
+
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
new file mode 100644
index 0000000..1ff56b9
--- /dev/null
+++ b/design/sass/_footer.scss
@@ -0,0 +1,54 @@
+footer {
+    margin-top: 5em;
+    @include breakpoint(gamma) {
+        max-width: 960;
+    }
+    &: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;
+        }
+    }
+    li {
+        display: inline;
+        margin: 0 .25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
+        a {
+            color: $secondary-link-color;
+            text-decoration: none;
+        }
+        ul { display:inline;}
+    }
+    li:last-of-type {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
+    p {
+        @include fontsize(10);
+        text-align: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+    }
+}
+#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
new file mode 100644
index 0000000..719d23a
--- /dev/null
+++ b/design/sass/_global.scss
@@ -0,0 +1,243 @@
+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
+}
+ul {
+    padding: 0;
+}
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+a {
+    color: $body_font_color;
+    -webkit-transition: all 0.1s ease;
+    -moz-transition: all 0.1s ease;
+    -ms-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    text-decoration-color: $link_color;
+    &:hover {
+        text-decoration: none;
+    }
+    &:visited {
+        color: $body_font_color;
+    }
+}
+p {
+    @include fancy_serif;
+    @include fontsize(20);
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(22);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(24);
+        line-height: 1.6;
+    }
+}
+time {
+    @include smcaps;
+    @include fontsize(11);
+    display: block;
+    span {
+        @include fontsize(13);
+    }
+}
+abbr {
+    cursor: help;
+}
+pre {
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+    }
+}
+object, embed, video {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+}
+audio {
+    max-width: 100%;
+    width: 100%;
+}
+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;
+    position: relative;
+    text-align: left;
+    font-style: italic;
+    cite {
+      display: block;
+      text-align: right;
+    }
+    @include breakpoint(alpha){
+        @include fontsize(20);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(22);
+        line-height: 1.6;
+    }
+}
+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;
+    @include faded_line_after;
+    margin: 3rem 0;
+}
+img {
+    max-width: 100%;
+}
+figure {
+    margin: 0;
+}
+figcaption {
+    text-align: left;
+}
+figcaption, figcaption a {
+    @include fancy_sans;
+    @include fontsize(16);
+    text-align: left;
+    line-height: 1.9;
+    padding: .3rem .5rem .3rem 0;
+    color: #666;
+    border-bottom: 1px lighten($body_font_light, 20) solid;
+    margin-bottom: 1rem;
+}
+figcaption a:visited {
+    color: #666;
+}
+h1 {
+    @include fancy_serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+h2 {
+    @include fancy_serif;
+    @include fontsize(28);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(30);
+        line-height: 1.6;
+    }
+}
+h3 {
+    @include fancy_sans;
+    @include fontsize(24);
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(28);
+        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;
+    }
+}
+.subhead {
+    font-size: 26px !important;
+    font-style: italic;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.subhead + p {
+    margin-top: .75rem !important;
+}
+.essay-intro .subhead + p:first-of-type {
+    margin-top: .75rem !important;
+}
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+.strike {
+    text-decoration: line-through;
+}
+.yes {
+    background: green !important;
+    color: white;
+}
+.no {
+    background: red !important;
+    color: white;
+}
+.alert {
+    color: red !important;
+}
+.small {
+    font-size: 90%;
+}
+.content {
+    @include constrain_wide; 
+}
+.narrow {
+    @include constrain_narrow;
+}
+//****************  Page Breadcrumbs  ************************
+
+#breadcrumbs {
+    @include constrain_wide();
+    padding: 0;
+    list-style-type: none;
+    text-align: center;
+    li {
+        display: inline;
+    }
+    a {
+        color: $secondary-link-color;
+    }
+    @include breakpoint(gamma) {
+        text-align: left;
+    }
+}
+
+
+.list-inline {
+    @extend %clearfix;
+    list-style-type: none;
+    padding: none;
+    li {
+        margin: 1rem;
+    }
+}
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..431897e
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,135 @@
+.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 {
+        border-top: 1px #444444 dotted;
+        border-bottom: 1px #444444 dotted;
+        //box-shadow: 0 3px 8px 0 #e6e6e6
+        padding-left: 20px;
+        padding-right: 20px;
+        margin-right: -20px;
+        margin-left: -20px;
+        margin-top: 1em;
+        padding: 0.25em 0.5em;
+        a {
+            text-decoration: none;
+            color: #505050;
+            &:visited {
+                color: #505050
+            }
+        }
+        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;
+            @include constrain(85%);
+        }
+        li {
+            display: inline;
+            margin: 0 0.25em;
+            &:after {
+                content: "\00b7";
+                color: #999999;
+                padding-left: 0.75em;
+            }
+            &:last-of-type {
+                margin-right: 0;
+                &:after {
+                    content: " ";
+                }
+            }
+        }
+        @include breakpoint(beta) {
+        }
+    }
+    @include breakpoint(beta) {
+        height: 90px;
+        position: relative;
+        #logo {
+            float: left;
+            position: absolute;
+            bottom: 28%;
+            text-align: left;
+            a {
+                width: 360px;
+                &:before {
+                    display: inline-block;
+                    background-size: 102px;
+                    //if sox
+                    #background: url("img/soxlogo.svg") center bottom no-repeat;
+                    #background-size: 70px;
+                    height: 85px;
+                    width: 105px;
+                    //if sox
+                    #width: 80px;
+                    margin-right: 10px;
+                }
+            }
+            .sitesubtitle { 
+                margin-left: 116px;
+                //if sox
+                #margin-left: 90px;
+                margin-top: -30px;
+            }
+        }
+        nav {
+            float: right;
+            border: none;
+            margin: 22px 0 0 0;
+            padding: 0;
+            ul {
+                max-width: 50em;
+            }
+        }
+    }
+}
+
+.header-wrapper {
+    @extend %clearfix;
+    @include breakpoint(beta) {
+        border-bottom: 1px #f3efef solid;
+        position: relative;
+    }
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.3rem; 
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-top: 1.3rem; 
+        max-width: $max_width;
+    }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
new file mode 100644
index 0000000..f12888e
--- /dev/null
+++ b/design/sass/_mixins.scss
@@ -0,0 +1,107 @@
+
+$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;
+$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;
+}
+@mixin fontsize($size) {
+  font-size: $size + px;
+  font-size: calc-rem($size);
+}
+
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+@mixin generic-serif {
+    font-family: Georgia, 'Times New Roman', serif;
+}
+@mixin fancy-sans {
+    font-family: mffnweb, Helvetica, sans-serif;
+}
+@mixin fancy-serif {
+    font-family: mffweb, Georgia, 'Times New Roman', serif;
+}
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@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: "";
+    margin-top: 3em;
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 94%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: $narrow-beta-width;
+    }
+    @include breakpoint(gamma) {
+        max-width: $narrow-max-width;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 94%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
+
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
new file mode 100644
index 0000000..5b7dadc
--- /dev/null
+++ b/design/sass/_queries.scss
@@ -0,0 +1,23 @@
+$breakpoint-alpha: 420px;
+$breakpoint-beta: 728px;
+$breakpoint-gamma: 824px;
+$breakpoint-delta: 960px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @content; }
+    }
+    @else if $point == "gamma" {
+        @media screen and (min-width: $breakpoint-gamma)  { @content; }
+    }
+    @else if $point == "delta" {
+        @media screen and (min-width: $breakpoint-delta)  { @content; }
+    }
+    @else if $point == "epsilon" {
+        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
+    }
+}
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
new file mode 100644
index 0000000..f1a1f72
--- /dev/null
+++ b/design/sass/screenv1.scss
@@ -0,0 +1,7 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_header.scss";
+@import "_content.scss";
+@import "_footer.scss";
diff --git a/design/templates/admin/buttons.html b/design/templates/admin/buttons.html
new file mode 100644
index 0000000..d9d3171
--- /dev/null
+++ b/design/templates/admin/buttons.html
@@ -0,0 +1,52 @@
+<style>
+    .cust {
+        margin-top: 8px;
+        margin-bottom: 16px;
+    }
+    .item {  
+        display: block;
+        float: none !important;
+        margin-left: 8px;
+        margin-top: 6px;
+        color: #444;
+        overflow: visible !important;
+    }
+    .item a {
+        text-transform: uppercase;
+        min-width: 180px;
+        font-size: 90%;
+        position: relative;
+        display: inline-block;
+        margin: 0px;
+        padding: 7px 5px;
+        height: 32px;
+        -moz-box-sizing: border-box;
+        cursor: pointer;
+        overflow: hidden;
+        vertical-align: top;
+        color: rgb(255, 255, 255);
+        background: #79aec8;
+        }
+</style>
+
+    <div class="module" id="recent-actions-module">
+            <div class="grp-module" id="grp-recent-actions-module">
+                <h2>Publish Site</h2>
+                {% if message %}
+                <ul class="messagelist">
+                    <li style="font-weight: bold; color: red;">{{message}}...</li>
+                </ul>
+                {%endif%}
+                <div class="grp-module">
+                    <ul class="grp-listing-small cust">
+                        <li class="item"><a href="/admin/build/build?id=builddetails">Build Writing Details</a></li>
+                        <li class="item"><a href="/admin/build/build?id=writingarchives">Build Writing Archives</a></li>
+                        <li class="item"><a href="/admin/build/build?id=homepage">Build Homepage</a></li>
+                        <li class="item"><a href="/admin/build/build?id=sitemap">Build Sitemap</a></li>
+                        <li class="item"><a href="/admin/build/build?id=buildrss">Build RSS</a></li>
+                        <li class="item"><a href="/admin/build/build?id=pages">Build All Pages</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+ 
diff --git a/design/templates/admin/index.html b/design/templates/admin/index.html
new file mode 100644
index 0000000..fc857f2
--- /dev/null
+++ b/design/templates/admin/index.html
@@ -0,0 +1,148 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_static %}
+
+{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/dashboard.css" %}" />
+<style>
+.module caption {
+    padding: 5px;
+}
+td, th {
+    font-size: 12px;
+    padding: 5px 8px;
+}
+.module {
+    margin-bottom: 20px;
+}
+</style>
+{% endblock %}
+
+{% block coltype %}colMS{% endblock %}
+
+{% block bodyclass %}dashboard{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block content %}
+<div id="content-main">
+
+{% if app_list %}
+        <div class="module">
+            <table>
+                <caption><a href="{{ app.app_url }}" class="section" title="{% blocktrans with name=app.name %}Models in the {{ name }} application{% endblocktrans %}">Frequently Used</a></caption>
+            <tr>
+                <th scope="row"><a href="/admin/django_comments/comment/">moderate comments</a></th>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/jrnl/entry/">jrnl</a></th>
+                <td><a href="/admin/jrnl/entry/add/" class="addlink">{% trans 'Add' %}</a></td></tr>
+            <tr>    
+                <th scope="row"><a href="/admin/photos/luximage/">photos</a></th>
+                <td><a href="/admin/photos/luximage/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/sightings/sighting/">sightings</a></th>
+                <td><a href="/admin/sightings/sighting/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>    
+                <th scope="row"><a href="/admin/fieldnotes/fieldnote/">fieldnotes</a></th>
+                <td><a href="/admin/fieldnotes/fieldnote/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>    
+                <th scope="row"><a href="/admin/locations/checkin/">check ins</a></th>
+                <td><a href="/admin/locations/checkin/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/locations/location/">locations</a></th>
+                <td><a href="/admin/locations/location/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/sightings/ap/">dialogue</a></th>
+                <td><a href="/admin/sightings/ap/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/locations/campsite/">campsite</a></th>
+                <td><a href="/admin/locations/campsite/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/jrnl/home/1/change/">homepage</a></th>
+            </tr>
+            <tr>
+                <th scope="row"><a href="/admin/pages/page/">pages</a></th>
+                <td><a href="/admin/pages/page/add/" class="addlink">Add</a></td>
+            </tr>
+            </table>
+        </div>
+    {% for app in app_list %}
+        <div class="module">
+        <table>
+        <caption>
+            <a href="{{ app.app_url }}" class="section" title="{% blocktrans with name=app.name %}Models in the {{ name }} application{% endblocktrans %}">
+                {% blocktrans with name=app.name %}{{ name }}{% endblocktrans %}
+            </a>
+        </caption>
+        {% for model in app.models %}
+            <tr>
+            {% if model.admin_url %}
+                <th scope="row"><a href="{{ model.admin_url }}">{{ model.name }}</a></th>
+            {% else %}
+                <th scope="row">{{ model.name }}</th>
+            {% endif %}
+
+            {% if model.add_url %}
+                <td><a href="{{ model.add_url }}" class="addlink">{% trans 'Add' %}</a></td>
+            {% else %}
+                <td>&nbsp;</td>
+            {% endif %}
+
+            {% if model.admin_url %}
+                <td><a href="{{ model.admin_url }}" class="changelink">{% trans 'Change' %}</a></td>
+            {% else %}
+                <td>&nbsp;</td>
+            {% endif %}
+            </tr>
+            {% if model.name == "Gigs"%}
+            <tr>    <th scope="row"><a href="{{ model.admin_url }}monthly/">Income for month</a></th></tr>
+                {% endif %}
+        {% endfor %}
+        </table>
+        </div>
+    {% endfor %}
+{% else %}
+    <p>{% trans "You don't have permission to edit anything." %}</p>
+{% endif %}
+</div>
+{% endblock %}
+
+{% block sidebar %}
+
+<div id="content-related">
+{% include 'admin/buttons.html' %}
+    <div class="module" id="recent-actions-module">
+        <h2>{% trans 'Recent Actions' %}</h2>
+        <h3>{% trans 'My Actions' %}</h3>
+            {% load log %}
+            {% get_admin_log 10 as admin_log for_user user %}
+            {% if not admin_log %}
+            <p>{% trans 'None available' %}</p>
+            {% else %}
+            <ul class="actionlist">
+            {% for entry in admin_log %}
+            <li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
+                {% if entry.is_deletion or not entry.get_admin_url %}
+                    {{ entry.object_repr }}
+                {% else %}
+                    <a href="{{ entry.get_admin_url }}">{{ entry.object_repr }}</a>
+                {% endif %}
+                <br/>
+                {% if entry.content_type %}
+                    <span class="mini quiet">{% filter capfirst %}{% trans entry.content_type.name %}{% endfilter %}</span>
+                {% else %}
+                    <span class="mini quiet">{% trans 'Unknown content' %}</span>
+                {% endif %}
+            </li>
+            {% endfor %}
+            </ul>
+            {% endif %}
+    </div>
+</div>
+{% endblock %}
diff --git a/design/templates/admin/message.html b/design/templates/admin/message.html
new file mode 100644
index 0000000..348b15d
--- /dev/null
+++ b/design/templates/admin/message.html
@@ -0,0 +1,20 @@
+{% extends 'admin/base_site.html' %}
+
+{% block content %}
+{{message}}... <span style="color:red;" id="done"></span>
+{% endblock %}
+
+{% block extrahead %}
+<script type="text/javascript">
+function delayer(){
+    console.log("function fired")
+    document.getElementById('done').innerHTML = 'done'
+    window.location = "/admin/"
+}
+
+document.addEventListener("DOMContentLoaded", function(event) { 
+    window.setTimeout(delayer, 1000);
+});
+</script>
+{% endblock %}
+
diff --git a/design/templates/base.html b/design/templates/base.html
new file mode 100644
index 0000000..41a8033
--- /dev/null
+++ b/design/templates/base.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html {%block htmlclass%}{%endblock%} dir="ltr" lang="en-US">
+    {% block sitename %}
+<head>
+    <title>{% block pagetitle %}{% endblock %}</title>{%endblock%}
+    <meta charset="utf-8">
+    <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 %}">
+    <meta name="author" content="Scott Gilbertson">
+    <link rel="alternate" 
+          type="application/rss+xml" 
+          title="RSS feed"
+          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%}>
+    <div class="wrapper" id="wrapper">
+    <div class="header-wrapper">
+        <header class="site-banner">
+            <div id="logo">
+                <a href="/" title="Home">Libregraf</a>
+                <span class="tagline">Let's Tell Your Story</span>
+            </div>
+            <nav>
+                <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>-->
+                </ul>
+            </nav>
+        </header>
+    </div>
+    {% block content %}{% endblock %}
+    {% block extrabody %}{% endblock %}
+    <footer class="bl">
+        <p id="license">
+            &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>.
+        </p>
+        <ul class="footer-nav">
+            <li><a href="/contact" title="contact luxagraf">Contact</a></li>
+        </ul>
+    </footer>
+    </div>
+    {% block js %}{% endblock%}
+<script>
+// Register our service-worker
+if (navigator.serviceWorker) {
+    window.addEventListener('load', function() {
+        if (navigator.serviceWorker.controller) {
+            navigator.serviceWorker.controller.postMessage({'command': 'trimCaches'});
+        } else {
+            navigator.serviceWorker.register('/media/js/serviceworker.js', {
+                scope: '/'
+            });
+        }
+    });
+}
+</script>
+    {%comment%}
+<!-- Piwik -->
+<script type="text/javascript">
+var _paq = _paq || [];
+_paq.push(["disableCookies"]);
+_paq.push(['trackPageView']);
+_paq.push(['enableLinkTracking']);
+(function() {
+    var u="//stats.luxagraf.net/";
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
+    _paq.push(['setSiteId', 1]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+})();
+</script>
+<noscript><p><img src="//stats.luxagraf.net/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
+<!-- End Piwik Code -->
+{%endcomment%}
+
+</body>
+</html>
+
diff --git a/design/templates/homepage.html b/design/templates/homepage.html
new file mode 100644
index 0000000..ed47bdb
--- /dev/null
+++ b/design/templates/homepage.html
@@ -0,0 +1,88 @@
+{% extends 'base.html' %}
+{% 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>
+    <link rel="canonical" href="https://libregraf.net/" itemprop="url" />
+
+{% endblock %}
+
+{%block bodyid%}id="home" class="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>
+{% 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.