changed layout of sightings pages

4 files changed, 61 insertions, 17 deletions

diff --git a/design/sass/_birds.scss b/design/sass/_birds.scss
index 81149ff..d491f1d 100644
--- a/design/sass/_birds.scss
+++ b/design/sass/_birds.scss
@@ -79,16 +79,57 @@
     .map { 
         margin: 0 auto;
         width: 99%; 
-        height: 200px; 
-        @include constrain_wide;
+        height: 400px; 
         @include breakpoint(beta) {
             @include constrain_narrow;
         }
     }
     #endnode {
+        @include breakpoint(beta) {
+            text-align: left;
+        }
         @include fancy-sans;
         @include fontsize(14);
-        margin-top: 2em;
+        margin-top: 4rem;
+        h5 {
+            @include fontsize(14);
+            @include smcaps;
+            @include fancy_sans;
+            margin-bottom: 1rem;
+            margin-top: 2rem;
+        }
+        ul {
+            margin-bottom: 2em;
+            li {
+            color: lighten($body_font, 30);
+            &:before {
+              content: "\2022";
+              color: lighten($body_font, 30);
+              margin-right: .35rem;
+          }
+        }
+        }
+        a {
+            text-decoration: none;
+            color: lighten($body_font, 10);
+        }
+        &:before {
+            @include faded_line_after;
+        }
+    }
+    #detail-map-canvas {
+        width: 100vw;
+        @include constrain_wide;
+        position: relative;
+        @include breakpoint(gamma) {
+            left: calc(-20%);
+        }
+        @include breakpoint(delta) {
+            left: calc(-38%);
+        }
+        @include breakpoint(epsilon) {
+            left: calc(-45%);
+        }
     }
 }
 
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index 9dec803..27f73b9 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -780,6 +780,12 @@ figure.picwide img.picwide {
         text-decoration: none;
         color: lighten($body_font, 20);
     }
+    #wildlife li ul li {  
+        color: lighten($body_font, 40);
+        a {
+            color: lighten($body_font, 10);
+        }
+    }
     @include breakpoint(beta) {
         margin-bottom: 4em;
         #wildlife {  
diff --git a/design/templates/archives/sightings.html b/design/templates/archives/sightings.html
index e9d4610..413ec44 100644
--- a/design/templates/archives/sightings.html
+++ b/design/templates/archives/sightings.html
@@ -18,14 +18,12 @@
         <article class="{% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}">
             <div class="post--image">
 {% load get_image_by_size %}
-{% load get_image_width %}
+{% load get_image_width %}{% if object.ap.image%}
 <figure>
 <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
-<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px" srcset="{% for size in object.image.sizes.all%}{% get_image_by_size object.image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-   {% for size in object.image.sizes.all%}{%if forloop.first %} src="{% get_image_by_size object.image size.name %}"{%endif%}{%endfor%} alt="{{object.image.alt}} photographed by {% if object.image.photo_credit_source %}{{object.image.photo_credit_source}}{%else%}luxagraf{%endif%}" >
+    <img src="{% get_image_by_size object.ap.image 'pic5' %}" /> 
 </a>
-{% if object.image.photo_credit_source %}<figcaption>photo by <a href="{{object.image.photo_credit_url}}">{{object.image.photo_credit_source}}</a></figcaption>{%endif%}
-</figure>
+</figure>{%endif%}
             </div>
             <h3 class="post--title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h3>
             <time class="post--date" datetime="{{object.pub_date|date:'c'}}">Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
@@ -38,12 +36,6 @@
                     </span>
                 </span>
             </p>
-            <div class="audio-figure">{% for recording in object.ap.recordings.all %}
-                <audio controls="controls">  
-                    <source src="/media/{{recording.audio}}" />  
-                </audio>
-                <small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
-            </div>{% endfor %}
         </article> {% endfor %}
     </main>
     <nav class="pagination">
diff --git a/design/templates/details/sighting.html b/design/templates/details/sighting.html
index fd060f7..718583f 100644
--- a/design/templates/details/sighting.html
+++ b/design/templates/details/sighting.html
@@ -26,9 +26,14 @@
 <small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
 </div>
 {%endif%}
-<p id="endnode">Seen at {%for sight in sighting %}{{sight.location}}, {{sight.location.comma_name}}  in {{sight.pub_date|date:"M Y"}} {%comment%}by {% for person in sight.seen_by.all %}<a href="{% url 'sightings:list_by_person' person %}">{% if person.username == "luxagraf"%}Scott{%else%}{{person.username|capfirst}}{%endif%}</a>{%if forloop.last %}. {%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}{%endcomment%}{%endfor%} </p>
-{% if recording.audio %}
-{%endif%}
+<div id="endnode">
+    <aside id="locations">
+        <h5>Seen at</h5>
+        <ul>{%for sight in sighting %}
+            <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li>
+        {%endfor%}</ul>
+    </aside>
+</div>
 </article>
 </main>
 {% endblock %}