12 files changed, 151 insertions, 0 deletions
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..2e24177
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html {%block htmlclass%}{%endblock%} dir="ltr" lang="en-US">
+    {% block sitename %}
+<head>
+    <title>{% block pagetitle %}{% endblock %}</title>{%endblock%}
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" 
+          content="{% block metadescription %}{% endblock %}">
+    <meta name="author" content="Corrinne Gilbertson">
+    {%block stylesheet%}<link rel="stylesheet" 
+                              href="/media/screenv1.css{%comment%}?{% now "u" %}{%endcomment%}" 
+          media="screen">{%endblock%}
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+    {%block extrahead%}{%endblock%}
+</head>
+<body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
+    <header class="header-wrapper">
+        <div id="logo">
+            <a class="logo-link" href="/" title="Home">Cumulus<span>Learning</span></a>
+        </div>
+        <nav>
+            <a class="nav-item" href="/about" title="About Corrinne">About</a>
+            <a class="nav-item" href="/private-tutoring" title="Work with me">Work With Me</a>
+            <a class="nav-item" href="/faq" title="Frequently asked questions">FAQ</a>
+            {%comment %}<a class="nav-item" href="/what-is-structured-word-inquiry" title="How structured word inquiry helps children learn to read">What Is SWI?</a> 
+            <a class="nav-item" href="/resources/" title="Resources for parents and teachers">Resources</a>{% endcomment%}
+            <a class="nav-item" href="/contact/" title="Contact Corrinne">Contact</a>
+        </nav>
+    </header>
+    {% block breadcrumbs %}{% endblock %}
+    {% block primary %}{% endblock %}
+    {% block extrabody %}{% endblock %}
+    <footer class="page-footer">
+        <nav>
+            <a class="nav-item" href="/about" title="About Corrinne">About</a>
+            <a class="nav-item" href="/private-tutoring" title="Work with me">Work With Me</a>
+            <a class="nav-item" href="/faq" title="Frequently asked questions">FAQ</a>
+            {%comment %}<a class="nav-item" href="/what-is-structured-word-inquiry" title="How structured word inquiry helps children learn to read">What Is SWI?</a> 
+            <a class="nav-item" href="/resources/" title="Resources for parents and teachers">Resources</a>{% endcomment%}
+            <a class="nav-item" href="/contact/" title="Contact Corrinne">Contact</a>
+        </nav>
+        <p id="license">
+            &copy; 2020-{% now "Y" %} 
+            <span class="h-card"><a class="p-name u-url" href="https://tk.net/">Corrinne Gilbertson</a><data class="p-locality" value="Everywhere"></data><data class="p-country-name" value="United States"></data></span>.
+        </p>
+    </footer>
+    {% block js %}{% endblock%}
+</body>
+</html>
diff --git a/templates/lib/breadcrumbs.html b/templates/lib/breadcrumbs.html
new file mode 100644
index 0000000..025b8e4
--- /dev/null
+++ b/templates/lib/breadcrumbs.html
@@ -0,0 +1,14 @@
+<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
+        <span class="nav-item" itemprop="item">
+            <a href="/" itemprop="name">Home</a>
+            <meta itemprop="position" content="1" />
+        </span>{% for crumb in breadcrumbs %}{% if crumb_url %}
+        <span class="nav-item" itemprop="item">
+            <a href="{{crumb_url}}" itemprop="name">{{crumb}}</a>
+            <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />
+        </span>{% else %}
+        <span class="nav-item" itemprop="item">
+            <span itemprop="name">{{crumb}}</span>
+            <meta itemprop="position" content="2" />
+        </span>{% endif %}{%endfor%}
+    </nav>
diff --git a/templates/lib/breadcrumbs_detail.html b/templates/lib/breadcrumbs_detail.html
new file mode 100644
index 0000000..170c53a
--- /dev/null
+++ b/templates/lib/breadcrumbs_detail.html
@@ -0,0 +1,14 @@
+<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
+        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+            <a itemprop="item" href="/"><span itemprop="name">Home</span></a> &rarr;
+            <meta itemprop="position" content="1" />
+        </li>
+        {% for crumb in breadcrumbs %}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">{% if forloop.last %}
+            <span itemprop="item">
+                <span itemprop="name" class="faint">{{crumb}}</span>
+            </span>
+            <meta itemprop="position" content="{{ forloop.counter|add:"+1"}}" />{%else%}
+            <a href="{{crumb_url}}" itemprop="item"><span itemprop="name">{{crumb}}</span></a> &rarr;
+            <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />{% endif %}
+        </li>{%endfor%}
+    </ol>
diff --git a/templates/lib/friends_featured_img.html b/templates/lib/friends_featured_img.html
new file mode 100644
index 0000000..999c780
--- /dev/null
+++ b/templates/lib/friends_featured_img.html
@@ -0,0 +1,6 @@
+{% load get_image_by_size %}
+<img sizes="(max-width: 728px) 100vw, (min-width: 729px) 520px"
+     srcset="{% get_image_by_size image 'featured_jrnl'%} 520w, {% get_image_by_size image 'picwide-sm'%} 720w"
+     src="{% get_image_by_size image 'picwide-sm'%}"
+     alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"
+    style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;max-width:94%; border:40px solid #f4f2f0;" />
diff --git a/templates/lib/img_archive.html b/templates/lib/img_archive.html
new file mode 100644
index 0000000..4ff8e8a
--- /dev/null
+++ b/templates/lib/img_archive.html
@@ -0,0 +1,7 @@
+{% load get_image_by_size %}
+{% get_image_by_size image 'featured_jrnl' as featured %}
+<img sizes="(max-width: 728px) 100vw, (min-width: 729px) 520px"
+     srcset="{{featured}} 520w, {%get_image_by_size image 'picwide-sm'%} 720w"
+     src="{{featured}}"
+     alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" 
+     {% if not nolightbox %}data-jslghtbx="{{image.get_image_by_size}}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}{%endif%}>
diff --git a/templates/lib/img_blok.html b/templates/lib/img_blok.html
new file mode 100644
index 0000000..2d0e947
--- /dev/null
+++ b/templates/lib/img_blok.html
@@ -0,0 +1,9 @@
+{% load get_image_by_size %}
+{% if caption or exif or image.photo_credit_source %}
+<figure{%if not is_cluster %} class="blokwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="blokwide">{%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: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{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.slug %}"{%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 %}
diff --git a/templates/lib/img_cluster.html b/templates/lib/img_cluster.html
new file mode 100644
index 0000000..9e7d8a3
--- /dev/null
+++ b/templates/lib/img_cluster.html
@@ -0,0 +1,6 @@
+{% load get_image_by_size %}{% if caption or exif %}<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
+    <a href="{%get_image_by_size image "original"%}" title="view larger image {% if image.photo_credit_source%}(photo by {{image.photo_credit_source}}){%endif%}">
+        <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{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.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%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 %}
diff --git a/templates/lib/img_pic960.html b/templates/lib/img_pic960.html
new file mode 100644
index 0000000..1915ce6
--- /dev/null
+++ b/templates/lib/img_pic960.html
@@ -0,0 +1,9 @@
+{% load get_image_by_size %}
+{% if caption or exif or image.photo_credit_source %}
+<figure{%if not is_cluster %} class="pic960"{%endif%}>{%else%}{%if not is_cluster %}<div class="pic960">{%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: 959px) 100vw, (min-width: 960px) 960px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{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.slug %}"{%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 %}
diff --git a/templates/lib/img_picfull.html b/templates/lib/img_picfull.html
new file mode 100644
index 0000000..15dd5f6
--- /dev/null
+++ b/templates/lib/img_picfull.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.slug %} {{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.slug %}"{%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 %}
diff --git a/templates/lib/img_pictall.html b/templates/lib/img_pictall.html
new file mode 100644
index 0000000..7d539e8
--- /dev/null
+++ b/templates/lib/img_pictall.html
@@ -0,0 +1,9 @@
+{% load get_image_by_size %}
+{% load get_image_width %}
+{% if caption %}
+<figure class="picfull">{%endif%}
+<a href="{%get_image_by_size image "original"%} " title="view larger image"><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.slug %} {% if image.is_portait %}{% get_image_width image size.height %}w{%else%}{{size.width}}w{%endif%}{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
+   {% for size in image.sizes.all%}{%if forloop.first %} src="{% get_image_by_size image size.slug%}"{%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 %}<figcaption>{{image.caption|safe}}</figcaption>
+</figure>
+{% endif %}
diff --git a/templates/lib/img_picwide.html b/templates/lib/img_picwide.html
new file mode 100644
index 0000000..9f98020
--- /dev/null
+++ b/templates/lib/img_picwide.html
@@ -0,0 +1,7 @@
+{% load get_image_by_size %}{% if caption or exif or image.photo_credit_source %}<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%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: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{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.slug %}"{%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 %}
diff --git a/templates/lib/img_product.html b/templates/lib/img_product.html
new file mode 100644
index 0000000..58dd43e
--- /dev/null
+++ b/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.slug%} {{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.slug %}"{%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 %}