started work on per-post mapping

2 files changed, 42 insertions, 5 deletions

diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index 70a9c47..6a8140e 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -93,6 +93,19 @@
     }
 }
 
+/* occassionally I have section breaks */
+.break {
+    display: block;
+    margin: 3em auto; 
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+} 
+
 //### FOOTNOTES ###
 .footnote {
     @include constrain_narrow();
@@ -419,4 +432,17 @@ display: block;
     color: $body_font_light;
 }
 
-
+.map--icon {
+    @include constrain_wide;
+    display: block;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    border: 2px solid $brown;
+    margin: -38px 3em 0;
+    float: right;
+    @include breakpoint(gamma) {
+        margin: 0 auto;
+        float: none;
+    }
+}
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index 6beb37a..0fe59ae 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -19,11 +19,11 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
 {% block primary %}		
     <main role="main">
     <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}">
-            <header class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
+            <header id="head" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
                 <h1 class="p-name entry-title post--title">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
-                <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-author author hide">Scott Gilbertson</p>
-                <aside class="p-location h-adr adr post--location">
+                <time id="map-anchor" 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-author author hide" id="author">Scott Gilbertson</p>
+                <aside 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="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name|safe}}</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="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name|safe}}</a>{%endif%}
                     <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
                     <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
@@ -63,6 +63,17 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
 {% block js %}
      <script type="text/javascript">
 window.onload = function() {
+    var map_anchor = document.getElementById("head");
+    var parentDiv = map_anchor.parentNode;
+    var map_icon = document.createElement("div");
+    //var img = document.createElement("img");
+    //img.src = '//images.luxagraf.net/map-icons/ath.png';
+    //map_icon.appendChild(img);
+    map_icon.className += "map--icon";
+    map_icon.style.background = "url('//images.luxagraf.net/map-icons/ath.png')";
+    //parentDiv.insertAfter(map_icon, map_anchor);
+    map_anchor.parentNode.insertBefore(map_icon, map_anchor.nextSibling);
+
     //delay loading of gravatar images using nsoscript data-hash attribute
     dataattr = document.getElementsByClassName("datahashloader");
     for(var i=0; i<dataattr.length; i++) {