diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_birds.scss | 43 | ||||
| -rw-r--r-- | design/templates/archives/birds.html | 10 | ||||
| -rw-r--r-- | design/templates/details/bird.html | 20 |
3 files changed, 63 insertions, 10 deletions
diff --git a/design/sass/_birds.scss b/design/sass/_birds.scss index d8a736e..81149ff 100644 --- a/design/sass/_birds.scss +++ b/design/sass/_birds.scss @@ -6,7 +6,7 @@ display: none !important; } -#birds { +#birds, .birds { .post--title { @include fontsize(18); a { @@ -21,6 +21,42 @@ } small { display: block;} } + .post--image { + position: relative; + width: 100%; + figcaption { + opacity: 0; + @include fancy-sans; + @include fontsize(13); + position: absolute; + bottom: 0; + text-align: left; + width: 99%; + background: rgba(0, 0, 0, 0.75); + padding: .5em 0 .5em .5em; + margin-bottom: .5em; + color: #ccc; + + a { + color: #ccc; + } + } + img { + max-width: 100%; + width: 100%; + padding: 0; + background: none; + } + .picfull { + margin: 0; + } + } + .post--image:hover figcaption { + -webkit-transition: opacity .25s ease-in; + -moz-transition: opacity .25s ease-in; + transition: opacity .25s ease-in; + opacity: 1; + } } .sci { @@ -49,6 +85,11 @@ @include constrain_narrow; } } + #endnode { + @include fancy-sans; + @include fontsize(14); + margin-top: 2em; + } } diff --git a/design/templates/archives/birds.html b/design/templates/archives/birds.html index 32a7aa1..db7c860 100644 --- a/design/templates/archives/birds.html +++ b/design/templates/archives/birds.html @@ -17,7 +17,15 @@ <h1 class="hide">Birds seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %} <article class="{% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}"> <div class="post--image"> - <a href="{{object.bird.get_absolute_url}}" title="{{object.bird}}"><img src="{{object.get_small_image}}" alt="{{ object.title }}" class="post-image" /></a> +{% load get_image_by_size %} +{% load get_image_width %} +<figure> +<a href="{{object.bird.get_absolute_url}}" title="{{object.bird}}"> +<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%}" > +</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> </div> <h3 class="post--title"><a href="{{object.bird.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.bird}}{%endif%}">{{object.bird|safe|smartypants|widont}}</a> (<span class="sci">{{object.bird.scientific_name}}</span>)</h3> <time class="post--date" datetime="{{object.date|date:'c'}}">Seen: {{object.date|date:"F"}} <span>{{object.date|date:"j, Y"}}</span></time> diff --git a/design/templates/details/bird.html b/design/templates/details/bird.html index 5140c96..43877fe 100644 --- a/design/templates/details/bird.html +++ b/design/templates/details/bird.html @@ -12,20 +12,24 @@ <h1>{{object.common_name}}</h1> <h2 class="sci">{{object.scientific_name}}</h2> <h3 class="sci">Family {{object.bird_class.scientific_name}} ({{object.bird_class}})</h3> -{% for image in sighting.images.all %} -<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px" - srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%},"{%else%}, {%endif%}{%if forloop.last%} - src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} ({{sighting.bird.scientific_name}}) photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}Scott Gilbertson{%endif%}"> -{%endfor%} - +{% load get_image_by_size %} +{% load get_image_width %} +<div class="post--image"> +<figure> +<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px" srcset="{% for size in sighting.image.sizes.all%}{% get_image_by_size sighting.image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%} + {% for size in sighting.image.sizes.all%}{%if forloop.first %} src="{% get_image_by_size sighting.image size.name %}"{%endif%}{%endfor%} alt="{{sighting.image.alt}} photographed by {% if sighting.image.photo_credit_source %}{{sighting.image.photo_credit_source}}{%else%}luxagraf{%endif%}" > +{% if sighting.image.photo_credit_source %}<figcaption>photo by <a href="{{sighting.image.photo_credit_url}}">{{sighting.image.photo_credit_source}}</a></figcaption>{%endif%} +</figure> +</div> +{%if recording %} <div class="audio-figure"> <audio autoplay="autoplay" 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}}">© {{recording.copyright}}</a></small> </div> - -<p id="endnode">Seen at {{sighting.location}}, {{sighting.location.comma_name}} in {{sighting.date|date:"M Y"}} by {% for person in sighting.seen_by.all %}<a href="/birds/{{person}}/">{{person}}</a>{%if forloop.last %}{%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}</p> +{%endif%} +<p id="endnode">Seen at {{sighting.location}}, {{sighting.location.comma_name}} in {{sighting.date|date:"M Y"}} by {% for person in sighting.seen_by.all %}<a href="/birds/{{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%}</p> {% if recording.audio %} {%endif%} </article> |