diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_header.scss | 4 | ||||
| -rw-r--r-- | design/sass/_mixins.scss | 4 | ||||
| -rw-r--r-- | design/sass/_writing_details.scss | 51 | ||||
| -rw-r--r-- | design/templates/details/page.html | 7 | ||||
| -rw-r--r-- | design/templates/lib/img_cluster.html | 8 |
5 files changed, 63 insertions, 11 deletions
diff --git a/design/sass/_header.scss b/design/sass/_header.scss index b0c83e0..10174e3 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -132,13 +132,13 @@ nav[role="navigation"] { position: relative; } @include breakpoint(gamma) { - max-width: 960px; + max-width: $breakpoint-gamma; margin-left: auto; margin-right: auto; } @include breakpoint(delta) { margin-top: 1.5em; - max-width: $breakpoint-delta - 40px; + max-width: $breakpoint-delta; } @include breakpoint(epsilon) { margin-top: 1.5em; diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index 5144ad9..0e29edf 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -115,10 +115,10 @@ $max_width: 1280px; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { - max-width: $breakpoint-gamma - 20px; + max-width: $breakpoint-gamma; } @include breakpoint(delta) { - max-width: $breakpoint-delta - 40px; + max-width: $breakpoint-delta; } @include breakpoint(epsilon) { max-width: $max_width; diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss index 2e134a5..4918ad8 100644 --- a/design/sass/_writing_details.scss +++ b/design/sass/_writing_details.scss @@ -363,6 +363,9 @@ figure.picwide img.picwide { } } .image-cluster { + .row-2, .row-3, .row-4, .stack-2, .stack-3 { + display: block; + } @include constrain_wide; @extend %clearfix; margin-bottom: 1em; @@ -379,14 +382,21 @@ figure.picwide img.picwide { margin-top: 0; max-width: 100%; } - .picwide { + img.picwide { + margin: 0; + } + figcaption, figure { margin-bottom: 0; + border: none; } - .pic66 { - max-width: 63.9%; + .stack-2 { + float: left; } @include breakpoint(beta-2) { - .picwide { + figure { + max-width: 99%; + } + img.picwide { padding: 0; margin-bottom: 0; max-width: 100%; @@ -394,18 +404,36 @@ figure.picwide img.picwide { background: none; } .row-2 { - a:last-of-type img{ + a:last-of-type img, figure:last-of-type { float: right; } } + .pic66 { + max-width: 63.9%; + } .row-right .pic25 { max-width: 49%; } .pic25 { max-width: 24.5%; } + .stack-2 { + max-width: 32.95%; + float: left; + } + .stack-2 + a img { + max-width: 66.6%; + float: right + } + .right { float: right;} + .right + a img { + float:left + } } @include breakpoint(beta) { + img.picwide { + max-width: 100%; + } div img { width: 100%; padding: 0; @@ -418,17 +446,28 @@ figure.picwide img.picwide { } .pic5 { max-width: 49.5%; - margin: 0 6px 6px 0; + margin: 0; float: left; + figcaption { + padding-bottom: .5em; + } + } + img.pic5 { + margin: 0 0 6px 0; } .pic25 { max-width: 50%; } .row-3 .pic33 { + float: left; max-width: 32.3%; + margin: 0 0 6px 0; } } @include breakpoint(gamma) { + figure { + max-width: 100%; + } .row-right { float: right; } diff --git a/design/templates/details/page.html b/design/templates/details/page.html index 833523a..a09a63a 100644 --- a/design/templates/details/page.html +++ b/design/templates/details/page.html @@ -16,3 +16,10 @@ </div> </article> {% endblock %} +{% block js %} +<script src="/media/js/lightbox.js" type="text/javascript"></script> +<script>var opts={captions:true,onload:function(){var im=document.getElementById("jslghtbx-contentwrapper");var link=im.appendChild(document.createElement('a')) +link.href=im.firstChild.src;link.innerHTML="open ";link.target="_blank";link.setAttribute('class','p-link');im.appendChild(link);}};var lightbox=new Lightbox();lightbox.load(opts);</script> +{% endblock %} + + diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html index 9fdd64f..e838252 100644 --- a/design/templates/lib/img_cluster.html +++ b/design/templates/lib/img_cluster.html @@ -1 +1,7 @@ -{% load get_image_by_size %}<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="{{cluster_class}} {%if extra%}{{extra}}{%endif%}" src="{% for size in image.sizes.all%}{%if size.name == cluster_class %}{% get_image_by_size image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a> +{% load get_image_by_size %} +{% if caption or exif %} +<figure class="{{cluster_class}}">{%endif%} + <a href="{%get_image_by_size image "original"%}" title="view larger image"><img class="{% if caption or exif %}{%else%}{{cluster_class}}{%endif%} {%if extra%}{{extra}}{%endif%}" src="{% for size in image.sizes.all%}{%if size.name == cluster_class %}{% get_image_by_size image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a> +{% if caption or exif %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if caption or exif %}</figcaption> +</figure> +{% endif %} |