diff options
| -rw-r--r-- | design/sass/_writing_details.scss | 36 | ||||
| -rw-r--r-- | design/templates/details/entry.html | 35 |
2 files changed, 48 insertions, 23 deletions
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss index 6a8140e..24087f8 100644 --- a/design/sass/_writing_details.scss +++ b/design/sass/_writing_details.scss @@ -72,6 +72,33 @@ margin-top: 1em; } } +.footnote-ref { + padding: 0 2px; + @include fontsize(16); +} +.dark .footnote-ref { + padding: 0px 3px 0 4px; +} + +//### Inline Maps ### +#detail-map-canvas { + width: 100%; + height: 0; + margin: 0 auto; + float: none; + border: none !important; +} +#detail-map-canvas .detail-map-inner-canvas { + width: 100%; + height: 100%; + border: none !important; +} +#detail-map-canvas img { + max-width: 100%; + padding: 0; + margin: 0; + background: none; +} /* special case for debi's master list*/ .list-debi { @@ -123,6 +150,7 @@ font-size: 0.875em; line-height: 1.4 } + hr {display: none;} } .dark .footnote:before { @include light_faded_line_after; @@ -193,19 +221,19 @@ display: block; @include transparent_class; position: absolute; bottom: 10px; - left: 0; + left: 10px; font-size: 13px; padding: 8px 0 8px 2%; - width: 98%; + width: 96%; background: $brown; color: #999999; } } .embed-wrapper { + @include constrain_wide; + margin-bottom: 1em; @include breakpoint(gamma) { - width: 960px; - max-width: 960px; margin-left: auto; margin-right: auto; border: 5px solid $brown; diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html index 0fe59ae..5288c3c 100644 --- a/design/templates/details/entry.html +++ b/design/templates/details/entry.html @@ -19,18 +19,18 @@ 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 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%}"> + <header id="header" 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 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> + <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" 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> - {%comment%} (<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%} + {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} – <a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a>{%endif%}{%endwith%} </aside> </header> - <div class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}"> + <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}"> {{object.body_html|safe|smartypants|widont}} </div> </article> @@ -61,20 +61,14 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en {% render_comment_form for object %} {% endblock %} {% 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); +{% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} +<script src="/media/js/leaflet-master/leaflet-mod.js"></script> +<script src="/media/js/detail.js"></script> +{%endif%}{%endwith%} - //delay loading of gravatar images using nsoscript data-hash attribute +<script type="text/javascript"> +window.onload = function() { + //delay loading of gravatar images using noscript data-hash attribute dataattr = document.getElementsByClassName("datahashloader"); for(var i=0; i<dataattr.length; i++) { var c = dataattr[i].parentNode; @@ -82,10 +76,13 @@ window.onload = function() { img.src = 'https://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg'; img.className += "gravatar"; c.insertBefore(img, c.childNodes[3]); - } + {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} + createMap(); + var open = false; + {%endif%}{%endwith%} } - </script> +</script> {% with object.template_name as t %}{%if t == 1 or t == 3 %} <script src="{{MEDIA_URL}}js/hyphenate.min.js" type="text/javascript"></script> {%endif%}{%endwith%}{%endblock%} |