Finished up majority of v8 redesign, merging back to master

16 files changed, 313 insertions, 68 deletions

diff --git a/design/config.rb b/design/config.rb
index e194907..61cbbe0 100644
--- a/design/config.rb
+++ b/design/config.rb
@@ -1,3 +1,4 @@
+require 'compass-flexbox'
 project_type = :stand_alone
 # Set this to the root of your project when deployed:
 http_path = "/"
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
index 5f96654..2553e22 100644
--- a/design/sass/_fonts.scss
+++ b/design/sass/_fonts.scss
@@ -10,9 +10,18 @@
 }
 
 @font-face {
-  font-family: "trumpgoteasmed";
-  src: url("trumpgoteasmed-webfont.eot");
-  src: url("trumpgoteasmed-webfont.eot?#iefix") format("embedded-opentype"), url("trumpgoteasmed-webfont.woff") format("woff"), url("trumpgoteasmed-webfont.ttf") format("truetype"), url("trumpgoteasmed-webfont.svg#trumpgoteasmed") format("svg");
+  font-family: "robotoslab";
+  src: url("robotoslab-regular-webfont.eot");
+  src: url("robotoslab-regular-webfont.eot?#iefix") format("embedded-opentype"), url("robotoslab-regular-webfont.woff") format("woff"), url("robotoslab-regular-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+@font-face {
+  font-family: "robotoslab-bold";
+  src: url("robotoslab-bold-webfont.eot");
+  src: url("robotoslab-bold-webfont.eot?#iefix") format("embedded-opentype"), url("robotoslab-bold-webfont.woff") format("woff"), url("robotoslab-bold-webfont.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
 }
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
index 84def82..27ccd20 100644
--- a/design/sass/_footer.scss
+++ b/design/sass/_footer.scss
@@ -19,17 +19,31 @@ footer[role="contentinfo"] {
     }
     li {
         display: inline;
-        margin: 0 .125em;
+        margin: 0 .25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
         a {
             color: $brown;
             text-decoration: none;
         }
     }
+    li:last-of-type {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
     p {
         @include fontsize(10);
+        text-align: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
     }
 }
-.dark footer[role="contentinfo"] {
+.black footer[role="contentinfo"], .dark footer[role="contentinfo"] {
     &:before {
         @include light_faded_line_after;
     }
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 346f44b..7b47418 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -85,6 +85,26 @@ h1 {
     @include fontsize(11);
 }
 
+.mailing-list--wrapper {
+    @include constrain_narrow;
+    @include breakpoint(gamma) {
+        margin-top: 6em;
+        max-width: 580px;
+        h5 {
+            margin-bottom: .5em;
+            margin-top: 5em;
+        }
+    }
+    h5 { 
+        font-weight: normal;
+        text-align: left;
+        @include fontsize(18);
+    }
+    &:before {
+        @include faded_line_after;
+        margin-top: 5em;
+    }
+}
 
 //****************  Page Breadcrumbs  ************************
 
@@ -100,7 +120,7 @@ h1 {
     }
 }
 
-.dark #breadcrumbs a, .black #breadcrumbs a {
+.black #breadcrumbs a {
     color: $body_font_light;
 }
 //************* Dark Pages *********************
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index a89636c..da9e41a 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -59,15 +59,9 @@ header[role="banner"] {
 }
 .black header h1 a, .dark header h1 a {
     color: $body_font_light;
-        &:before {
-        background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
-        background-size: 90px;
-    }
-    @include breakpoint(beta) {
-        &:before {
-            background: url("logo-new-@2x-treeonly.png") center -65px no-repeat;
-            background-size: 92px;
-        }
+    &:before {
+        background: url("logo-new-@2x-treeonly.png") center -65px no-repeat;
+        background-size: 92px;
     }
 }
 
@@ -111,7 +105,7 @@ nav[role="navigation"] {
         }
     }
     @include breakpoint(beta) {
-        float: left;
+        float: right;
         border: none;
         margin: 52px 0 0 0;
         padding: 0;
diff --git a/design/sass/_homepage.scss b/design/sass/_homepage.scss
new file mode 100644
index 0000000..d153cf6
--- /dev/null
+++ b/design/sass/_homepage.scss
@@ -0,0 +1,138 @@
+.homepage--bottom-wrapper {
+    @include constrain_wide;
+    @extend %clearfix;
+    &:before {
+        @include faded_line_after;
+    }
+}
+.homepage--arc-header {
+    @include fontsize(14);
+    font-family: sans-serif;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 2em;
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.archive--homepage {
+    @include breakpoint(beta) {
+        article {
+            display: block;
+            width: 100%;
+            text-align: left;
+        }
+    }
+    @include breakpoint(gamma) {
+        float: left;
+        margin-top: 0;
+        margin-right: 3em;
+        article {
+            width: 620px;
+            margin-left: 0;
+        }
+    }
+    @include breakpoint(delta) {
+        article {
+            width: 780px;
+            margin-left: 0;
+        }
+    }
+}
+.dark .archive--homepage {
+
+}
+.homepage--bright {
+    @include breakpoint(gamma) {
+        float: left;
+        width: 250px;
+    }
+}
+.homepage--next {
+    padding: 6px 0;
+    @include smcaps;
+    text-decoration: none;
+    &:after {
+        content: "\21E2";
+        margin-left: 4px;
+    }
+}
+.has-hero {
+    .header-wrapper {
+        margin-bottom: 0;
+    }
+    .homepage--hero {
+        border: 0;
+        padding: 0;
+        max-width: 100%;
+        position: relative;
+        z-index: 1;
+    }
+    .post--image { margin-left: 5px;}
+    .hero--wrapper {
+        @include constrain_wide;
+        position: relative;
+        z-index: 100;
+        background: rgb(0, 0, 0);
+        background: rgba(0, 0, 0, 0.6);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+        filter: alpha(opacity = 70);
+        color: $body_font_light;
+        font-weight: 400;
+        padding-bottom: 30px;
+        p { max-width: 100%; }
+        a { color: $body_font_light;}
+        time {display: none;}
+        .btn {text-decoration: none; color: white; }
+        @include breakpoint(gamma) {
+            margin-top: -218px;
+            max-width: 100%;
+            padding-left: 5px;
+            .btn { margin-top: -15px}
+        }
+    }
+    .main--header {
+        margin-bottom: 12px;
+        font-family: 'robotoslab', Georgia, Times;
+        padding-top: .25em;
+        a {
+            color: white;
+            text-decoration: none;
+        }
+    }
+    .main--location {
+        @include fontsize(9);
+        text-align: center;
+        margin-top: -12px; 
+        margin-bottom: 22px; 
+    }
+    .main--tag {
+        color: white;
+        text-align: center;
+        @include breakpoint(gamma) {
+            margin-top: -10px;
+        }
+    }
+}
+.homepage--about {
+    &:after, &:before {
+        @include faded_line_after;
+    }
+    @include breakpoint(gamma) {
+    p { 
+        @include fontsize(18);
+    }
+}
+}
+.black .archive--homepage .post--title a {
+    color: white;
+}
+.black .archive--homepage .post--location a {
+    color: $body_font_light;
+}
+.black .homepage--about {
+    &:after, &:before {
+        @include lighter_faded_line_after;
+    }
+}
diff --git a/design/sass/_mailing-list.scss b/design/sass/_mailing-list.scss
index 71df3e4..95366b8 100644
--- a/design/sass/_mailing-list.scss
+++ b/design/sass/_mailing-list.scss
@@ -1,11 +1,34 @@
 //Flexbox mixins rely on https://github.com/timhettler/compass-flexbox
-
-.b-form {}
-.b-form__object--flex { @include display-flex; }
-.b-form__object--fillspace {
-    /* This element will receive priority of size. 
-    /* All other elements will be sized at the size dictated by their display type */
+.mailing-list {
+    text-align: left;
+    .form--flex-container {
+        @include display-flex;
+    }
+}
+.form--label {
+    display: block;
+    font-weight: 600;
+    letter-spacing: 1px;
+    font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+    @include fontsize(12);
+    margin-bottom: 6px;
+}
+.form--input {
     @include flex-grow(1);
-    & + .b-form__object--fillspace-gap { margin-left: .5em; }
+    padding: .25em;
+    border: #c5c5c5 1px solid;
+    border-radius: .125em;
+    color: darken($body_font_light, 20);
+}
+.btn {
+    display: inline-block;
+    margin-left: 5px;
+    border-radius: .25em;
+    border: none;
+    padding: 8px 12px 7px;
+    max-width: 8.75em;
+    background: $orange;
+    color: white;
+    font: bold .75em Verdana,sans-serif;
+    text-transform: uppercase;
 }
-.b-form__label { display: block;}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 737f157..71246bb 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -59,6 +59,13 @@ $body_font_light: #b3aeae;
     background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
 } 
 
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
 //generic constrain function
 @mixin constrain($size) {
     max-width: $size;
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index ce44693..8f0a9a9 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -111,9 +111,9 @@
     max-width: 960px;
     }
     @include breakpoint(delta) {
-        margin-left: -220px;
-        width: 1170px;
-        max-width: 1170px;
+        margin-left: -245px;
+        width: 1155px;
+        max-width: 1155px;
     }
 }
 
diff --git a/design/sass/screenv8.scss b/design/sass/screenv8.scss
index 58bd5af..931f107 100644
--- a/design/sass/screenv8.scss
+++ b/design/sass/screenv8.scss
@@ -1,3 +1,4 @@
+@import 'flexbox'; //Flexbox relies on https://github.com/timhettler/compass-flexbox
 @import "_normalize.scss";
 @import "_fonts.scss";
 @import "_mixins.scss";
@@ -12,6 +13,8 @@
 @import "_leaflet.scss";
 @import "_map.scss";
 @import "_projects.scss";
+@import "_homepage.scss";
+@import "_mailing-list.scss";
 //@import "_tablet.sass";
 //@import "_inbox.scss";
 
diff --git a/design/templates/archives/homepage.html b/design/templates/archives/homepage.html
index 789616c..4954264 100644
--- a/design/templates/archives/homepage.html
+++ b/design/templates/archives/homepage.html
@@ -1,42 +1,61 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
-{%block bodyid%}id="home"{%endblock%}
+{%block htmlclass%}class="black"{%endblock%}
+{%block bodyid%}id="home" class="has-hero"{%endblock%}
 
-{% block primary %}<section class="archive">{% for object in object_list %}{% if forloop.counter == 1 %}
-        <article>
-            <h1><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|smartypants|widont|safe}}</a></h1>
-            <div class="img">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="post-image" /></a>
+{% block primary %}<section class="banner">{% for object in object_list %}{% if forloop.counter == 1 %}
+        <article class="h-entry hentry {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}">
+            <div class="post--image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_hero_url}}" alt="{{ object.title }}" class="u-photo post-image homepage--hero" /></a>
             </div>
-            <p class="dateline bl">
-                <span class="location" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">{% if object.country.name == "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.name|slugify}}/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%}
-                <meta itemprop="latitude" content="{{object.latitude}}" />
-                <meta itemprop="longitude" content="{{object.longitude}}" /></span> &nbsp;
-                <time datetime="{{object.pub_date|date:'c'}}" pubdate>{{object.pub_date|date:"m/d/y"}}</time>
+            <div class="hero--wrapper">
+            <h1 class="p-name entry-title post--title main--header"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h1>
+            <p class="p-author author hide">Scott Gilbertson</p>
+            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <p class="p-location h-adr adr post--location main--location">
+                    {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
+                    <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
+                    <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
             </p>
-            
-            <p class="hyphenate">{{object.dek|safe}} <span class="button"><a href="{{object.get_absolute_url}}" title="{{object.title}}">More &raquo;</a></span> </p> {%endif%}{%endfor%}
-                       
-        </article>
+            <p class="p-summary main--tag">
+              Explore the lost era of oyster farmers.      
+            </p>
+            <a href="{{object.get_absolute_url}}" class="u-url btn" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">Read</a>
+        </div>
+        </article> {% endif %} {% endfor %}
    </section>
     {%comment%}<section id="currently">
             <div class="project-tease"><a href="/projects/5x5/"><h4 id="proj">5<span>x</span>5</h4> Interviews From The Road</a><p>Lorem sit amet, consectetur adipiscing elit. Duis cursus sodales eros <cite>&ndash; William Brandon III</cite></p></div>
        </section>{%endcomment%}
-   <section class="home harchive">
-        <h1 class="sh">From the Archive</h1>
-        {% for object in object_list %}{%if forloop.counter > 1 %}<article {%if forloop.last %}class="last"{%endif%}>
-             <h1><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|smartypants|widont|safe}}</a></h1>
-             <p class="dateline bl">
-             <span class="location" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">{% if object.location.state.country.name == "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%}
-                 <meta itemprop="latitude" content="{{object.latitude}}" />
-                 <meta itemprop="longitude" content="{{object.longitude}}" />
-             </span> &nbsp;
-             <time datetime="{{object.pub_date|date:'c'}}" pubdate>{{object.pub_date|date:"m/d/y"}}</time>
-             </p>
-             {%if object.thumbnail%}<a class="permalink" href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_thumbnail_url}}" alt="{{ object.title }}" class="post-image" width="{{object.thumb_width}}" height="{{object.thumb_height}}" /></a>{%endif%}
-             <p class="hyphenate">{{object.dek|safe}}</p>
-             </article>{%endif%}
-         {% endfor %}   </section>
+    <div class="homepage--about homepage--bottom-wrapper">
+        <h3 class="homepage--arc-header">About Luxagraf</h3>
+        <p>I like to think of luxagraf as the notebook you might have found, something I might have accidentally dropped between the cushions of a jostling, camel-powered taxi winding its way through the narrow, bumpy, dusty streets of Tangier circa 1910.</p>
+        <p>It could just be a website though. Except that I don&#8217;t do lists. And I&#8217;m not trying to make&nbsp;money.</p><p>Luxagraf is a collection of field notes, a bare recording of some of my time on earth. Enjoy.</p> 
+    </div>
+    <div class="homepage--bottom-wrapper">
+   <section class="archive archive--homepage">
+        <h1 class="homepage--arc-header">Archives</h1>
+        {% for object in object_list %}{%if forloop.counter > 1 %}
+        <article class="h-entry hentry">
+            <div class="post--image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_wide_url}}" alt="{{ object.title }}" class="u-photo post-image" /></a>
+            </div>
+            <h1 class="p-name entry-title post--title"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h1>
+            <p class="p-author author hide">Scott Gilbertson</p>
+            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <p class="p-location h-adr adr post--location">
+                {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
+                <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
+                <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
+            </p>
+        </article> {% endif %}{% endfor %}
+        <p><a href="/" class="homepage--next">Read More</a></p>
+    </section>
+    <section class="homepage--bright">
+        <h1 class="homepage--arc-header">Join the Mailing List</h1>
+        {% include 'mailing_list.html' %}
+    </section>
+    </div>
 {% endblock %}
 
 {% block js %}<script async src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}
diff --git a/design/templates/base.html b/design/templates/base.html
index f84dffa..5c9ca21 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -7,6 +7,9 @@
           content="{% block metadescription %}Luxagraf: recording journeys around the world and just next door.{% endblock %}">
     <meta name="author" content="Scott Gilbertson">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--[if IE]>
+    <script src="/js/html5css3ie.min.js"></script>
+    <![endif]-->
     <link rel="alternate" 
           type="application/rss+xml" 
           title="Luxagraf RSS feed"
@@ -14,21 +17,18 @@
     {%block stylesheet%}<link rel="stylesheet" 
           href="/media/screenv8.css" 
           media="screen">{%endblock%}
-    <!--[if lte IE 8]>
+    <!--[if IE]>
     <link rel="stylesheet" 
-          href="/media/iev8.css" 
+          href="/media/css/ie.css" 
           media="screen">
     <![endif]-->
-    <!--[if lt IE 9]>
-    <script src="/media/js/html5css3ie.min.js"></script>
-    <![endif]-->
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
     <div class="wrapper">
     <div class="header-wrapper">
         <header role="banner">
-            <h1><a class="logo" id="logo" href="/" title="home">Luxagraf</a></h1>
+            <h1><a id="logo" href="/" title="home">Luxagraf</a></h1>
             <h2>Walk Slowly</h2>
         </header>
         <nav role="navigation" class="bl">
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index bfbae23..7dc98bc 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -62,6 +62,10 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
         </section>
         {%endcomment%}
     </main>
+    <div class="mailing-list--wrapper">
+    <h5>If you enjoyed this, you should join the mailing&nbsp;list&hellip;</h5>
+        {% include 'mailing_list.html' %}
+    </div>
 {% endblock %}
 {% block js %}
 {% with object.template_name as t %}{%if t == 1 or t == 3 %}
diff --git a/design/templates/details/page.html b/design/templates/details/page.html
index 74c75bd..8db04ff 100644
--- a/design/templates/details/page.html
+++ b/design/templates/details/page.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
 {% block pagetitle %}Luxagraf | {{object.title}}{% endblock %}
-{% block metadescription %}{{object.metadescription}}{% endblock %}
+{% block metadescription %}{{object.meta_description}}{% endblock %}
 {%block htmlclass%}class="single"{%endblock%}
 {%block bodyid%}id="{{object.title|lower}}"{%endblock%}								
 				
@@ -10,9 +10,9 @@
         <li>{{object.title}}</li>
     </ul>
     <article role="main">
-        <h1 class="hide">About Luxagraf</h1>
+        <h1 class="hide">{{object.title}}</h1>
         <div class="post-body-single">
-        {{object.body_html|safe}}
+        {{object.body_html|safe|smartypants|widont}}
         </div>  
     </article>
 {% endblock %}
diff --git a/design/templates/details/photo_galleries.html b/design/templates/details/photo_galleries.html
index 546d767..5275f2d 100644
--- a/design/templates/details/photo_galleries.html
+++ b/design/templates/details/photo_galleries.html
@@ -48,8 +48,8 @@
 {%endblock%}
 
 {% block js %}
-    <script type="text/javascript" src="/media/js/jquery.js"></script>
-    <script type="text/javascript" src="/media/js/jquery.scrollTo-1.4.2-min.js"></script>
+    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
+    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.scrollTo-1.4.2-min.js"></script>
     <script type="text/javascript" src="/media/js/photos.min.js" ></script>
 {% endblock%}
 
diff --git a/design/templates/mailing_list.html b/design/templates/mailing_list.html
new file mode 100644
index 0000000..50ce183
--- /dev/null
+++ b/design/templates/mailing_list.html
@@ -0,0 +1,13 @@
+{% load typogrify_tags %}
+<!-- Begin MailChimp Signup Form -->
+<div class="mailing-list">
+<form action="//longhandpixels.us7.list-manage.com/subscribe/post?u=f56776029b67b1c8c712eee00&amp;id=c578a42596" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+    <label class="form--label" for="mce-EMAIL">Your Email:</label>
+    <div class="form--flex-container">
+    <input type="email" value="" name="EMAIL" class="form--input user-field required email" id="mce-EMAIL" placeholder="jane@doe.com">
+    <div class="response" id="mce-error-response" style="display:none"></div>
+    <div class="response" id="mce-success-response" style="display:none"></div>
+	<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="btn">
+</div>
+</form>
+</div>