2 files changed, 72 insertions, 0 deletions
diff --git a/design/sass/_lttr.scss b/design/sass/_lttr.scss
new file mode 100644
index 0000000..4ce9f13
--- /dev/null
+++ b/design/sass/_lttr.scss
@@ -0,0 +1,62 @@
+.large-top-image{
+    background: #faf7f5;
+    img {
+        max-width: 94%;
+        margin: 4rem 0;
+    }
+}
+.lttr {
+    @include constrain_narrow;
+    margin-top: 6rem;
+    header {
+        padding-bottom: 3rem;
+        border-bottom: 1px #f0edeb solid
+    }
+}
+.lttr-box {
+    background: #faf7f5;
+    padding: .5rem;
+    display: inline-block;
+    border: 1px #e0dedc solid;
+}
+.lttr-cover {
+    margin-right: 1.2rem;
+}
+#recommended-reading {
+    .book-title {
+        @include fontsize(28);
+        font-weight: 400;
+        margin-bottom: 0;
+    }
+    h6 {
+        margin-top: 0;
+        @include fontsize(18);
+        font-weight: 400;
+    }
+}
+
+#page-navigation img {
+    width: 300px;
+    height: 160px;
+    object-fit: cover;
+}
+#page-navigation h4 {
+    text-align: center;
+    @include fontsize(22);
+    @include fancy_sans;
+    color: #333;
+}
+#page-navigation .nav-title {
+     @include fontsize(22);
+     line-height: 1.5;
+}
+#page-navigation .photo-arrow-next {
+    text-align: left;
+}
+.page-nav-photo li {
+    display: inline-block;
+    margin: 0 0 0 3rem !important;
+    &:first-of-type {
+        margin-left: 0 !important;
+    }
+}
diff --git a/design/templates/lib/img_product.html b/design/templates/lib/img_product.html
new file mode 100644
index 0000000..4a8c36d
--- /dev/null
+++ b/design/templates/lib/img_product.html
@@ -0,0 +1,10 @@
+{% load get_image_by_size %}
+{% load get_image_width %}
+{% if caption or exif or image.photo_credit_source %}
+<figure{%if not is_cluster %} class="picfull"{%endif%}>{%else%}{%if not is_cluster %}<div class="picfull">{%endif%}{%endif%}
+        <a itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%} " title="view larger image">
+            <img class="u-photo" itemprop="contentUrl" sizes="(max-width: 750px) 100vw, (min-width: 751) 750px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% 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 or image.photo_credit_source %}<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 image.photo_credit_source %}{%if caption or exif %} | {%endif%}image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}" itemprop="author">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source %}</figcaption>
+</figure>{%else%}{%if not is_cluster %}</div>{%endif%}
+{% endif %}