Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use fewer lists and more cascading instead of specific rules. Still requires compiling with sass to strip comments and compress, but would in theory work on its own. Reduced CSS file size by 2/3
author: luxagraf <sng@luxagraf> 2021-01-15 14:54:30 -0500
committer: luxagraf <sng@luxagraf> 2021-01-15 14:54:30 -0500
commit: 47b79fd9d4329e73cef7929ed8f64d9eeb287ae5 (patch)
tree: 189381bfe0d81fdc1105679910114deaab3cdb58 /design/templates
parent: e61f3d2c4537a2670c40b33eb02231a71dfb028a (diff)
8 files changed, 41 insertions, 167 deletions
diff --git a/design/templates/base.html b/design/templates/base.html
index 06313ea..3b9dd31 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -14,7 +14,7 @@
           title="Luxagraf RSS feed"
           href="https://luxagraf.net/rss/">
     {%block stylesheet%}<link rel="stylesheet" 
-                              href="/media/screenv9.css{%comment%}?{% now "u" %}{%endcomment%}" 
+                              href="/media/screenv10.css{%comment%}?{% now "u" %}{%endcomment%}" 
           media="screen">{%endblock%}
     <link rel="stylesheet" href="/media/print.css" media="print" title="print" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
@@ -23,56 +23,33 @@
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
-    <div class="wrapper" id="wrapper">
-    <div class="header-wrapper">
-        <header class="site-banner">
-            <div id="logo">
-                <a href="/" title="Home">Luxagraf</a>
-                <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a> &amp; <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a></li>
-                    <!--<li><a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a></li>-->
-                    <li><a href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a></li>
-                    <li><a href="/about" title="About Scott">About</a></li>
-                </ul>
-            </nav>
-        </header>
-    </div>
+    <header class="header-wrapper">
+        <div id="logo">
+            <a class="logo-link" href="/" title="Home">Luxagraf</a>
+            <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span>
+        </div>
+        <nav>
+            <a class="nav-item" href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a>{%comment%} &amp; <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a>
+            <a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a>{%endcomment%}
+            <a class="nav-item" href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a>
+            <a class="nav-item" href="/about" title="About Scott">About</a>
+        </nav>
+    </header>
     {% block breadcrumbs %}{% endblock %}
     {% block primary %}{% endblock %}
     {% block extrabody %}{% endblock %}
     {% block disclaimer %}{% endblock%}
-    <footer class="bl">
-        <ul class="footer-nav">
-            <li><a href="/blogroll" title="Sites that inspire us">Blogroll</a></li>
-            <li><a href="/contact/" title="contact luxagraf">Contact</a></li>
-            <li>Follow Along:
-                <ul>
-                    <li><a href="/jrnl/feed.xml" title="RSS feed">RSS</a></li>
-                    <li><a href="/newsletter/friends/" title="Luxagraf Email Updates">Email</a></li>
-                    <li><a href="https://www.instagram.com/luxagraf" rel="me" title="luxagraf on Instagram">Instagram</a></li>
-                </ul>
-        </ul>
-         <div class="support">Support luxagraf: 
-             <div class="donate-btn">
-                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-                <input type="hidden" name="cmd" value="_s-xclick">
-                <input type="hidden" name="hosted_button_id" value="HYJFZQSBGJ8QQ">
-                <input type="submit" name="submit" title="Donate to luxagraf via PayPal">
-                </form>
-            </div>
-            <div class="donate-btn">
-                <a class="liberapay-btn" href="https://liberapay.com/luxagraf/donate"><span>Donate</span></a>
-            </div>
-        </div>
+    <footer class="page-footer">
+        <nav>
+            <a class="nav-item" href="/blogroll" title="Sites that inspire us">Blogroll</a>
+            <a class="nav-item" href="/contact/" title="contact luxagraf">Contact</a>
+            <a class="nav-item" href="/jrnl/feed.xml" title="RSS feed">RSS</a>
+        </nav>
         <p id="license">
             &copy; 2003-{% now "Y" %} 
             <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>.
         </p>
     </footer>
-    </div>
     {% block js %}{% endblock%}
 <script>
 <!--
diff --git a/design/templates/comments/list.html b/design/templates/comments/list.html
index d3fe441..c320209 100644
--- a/design/templates/comments/list.html
+++ b/design/templates/comments/list.html
@@ -4,18 +4,18 @@
 {% load bleach_tags %}
 {% load nofollow %}
 {% load comments %}
-        <div class="comments--wrapper">
+        <div class="comment-wrapper">
         {% for comment in comment_list %}
-        <div id="comment-{{ comment.id }}" class="comment">
+        <div id="comment-{{ comment.id }}" class="comment-card-wrapper">
+		    <div class="comment-card-hed">
             <noscript class="datahashloader" data-hash="{% if comment.user_email == "sng@luxagraf.net" %}d64f4854965b2b1c3ecafee4b2a66fac{%else%}{%if comment.user_email|has_grav %}{%gravatar_hash comment.user_email %}{%else%}default{%endif%}{%endif%}"> 
-                <img class="gravatar" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" />
+                <img class="comment-card-image" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" />
             </noscript>
-		    <div class="comment--head">
-                <span class="who"><b>{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</b></span>
-                <span class="when">{{comment.submit_date|date:"F d, Y"}} at  {{comment.submit_date|date:"g:i a"}}</span>
+                <span class="comment-card-commenter">{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</span>
+                <span class="card-smcaps">{{comment.submit_date|date:"F d, Y"}} at  {{comment.submit_date|date:"g:i a"}}</span>
             </div>
 		
-            <div class="comment--body">
+            <div class="comment-card-body">
                 {% if comment.user_email == "sng@luxagraf.net" %}
                 {{comment.comment|markdown|safe|smartypants}}
                 {%else%}
diff --git a/design/templates/lib/breadcrumbs.html b/design/templates/lib/breadcrumbs.html
index ac47d5a..025b8e4 100644
--- a/design/templates/lib/breadcrumbs.html
+++ b/design/templates/lib/breadcrumbs.html
@@ -1,14 +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;
+<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" />
-        </li>
-        {% for crumb in breadcrumbs %}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-            {% if crumb_url %}
-            <a href="{{crumb_url}}" itemprop="item"><span itemprop="name">{{crumb}}</span></a>
-            <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />{% else %}
-            <span itemprop="item">
-                <span itemprop="name">{{crumb}}</span>
-            </span>{% endif %}
+        </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" />
-        </li>{%endfor%}
-    </ol>
+        </span>{% endif %}{%endfor%}
+    </nav>
diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html
index 48b9b99..9e7d8a3 100644
--- a/design/templates/lib/img_cluster.html
+++ b/design/templates/lib/img_cluster.html
@@ -1,8 +1,6 @@
-{% load get_image_by_size %}
-{% if caption or exif %}
-<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
+{% 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%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
+        <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/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html
index 2c9b17b..9f98020 100644
--- a/design/templates/lib/img_picwide.html
+++ b/design/templates/lib/img_picwide.html
@@ -1,6 +1,4 @@
-{% 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%}
+{% 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>
diff --git a/design/templates/locations/location_detail.html b/design/templates/locationsold/location_detail.html
index 334fa9d..334fa9d 100644
--- a/design/templates/locations/location_detail.html
+++ b/design/templates/locationsold/location_detail.html
diff --git a/design/templates/sightings/ap_detail.html b/design/templates/sightings/ap_detail.html
deleted file mode 100644
index 154d7ac..0000000
--- a/design/templates/sightings/ap_detail.html
+++ /dev/null
@@ -1,59 +0,0 @@
-{% extends 'base.html' %}
-{% load typogrify_tags %}
-{% block extrahead %}
-<style>
-#detail-map-canvas { height: 100%;}
-</style>
-{% endblock %}
-{% block bodyid %}class="detail"{%endblock%}
-{% block primary %}
-<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-        <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Dialogues</span></a>&rarr; </li>
-        <li><span itemprop="title">{{object.common_name}}</span></li>
-    </ul>
-
-    <main>
-    <article>
-        <header class="tight">
-            <h1 class="hed">{{object.common_name}}</h1>
-            <h2 class="post-subtitle">{{object.scientific_name}}</h2>
-            <h3 class="post-subtitle-segundo">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3>
-        </header>
-    {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%}
-{%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}}">&copy; {{recording.copyright}}</a></small>
-</div>
-{%endif%}
- {% if field_notes %}
-            <h4>Field Notes</h4>{% for note in field_notes %}
-                {{note.body_html|safe|smartypants}}
-                <p class="post-subtitle-segundo">&ndash; <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p>
-                <hr />
-        {%endfor%}
-{%endif%}
-        <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%}
-</article>
-</main>
-{% endblock %}
-
-{% block js %}
-<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
-<script src="/media/js/detail.js"></script>
-<script type="text/javascript">
-sightings = [];
-{% for s in sighting %}
-sightings.push(['{{s.latitude}}', '{{s.longitude}}']);
-{% endfor %}
-window.onload = function() {
-    createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false;
-}
-</script>
-{% endblock %}
diff --git a/design/templates/sightings/sighting_list.html b/design/templates/sightings/sighting_list.html
deleted file mode 100644
index d778cb2..0000000
--- a/design/templates/sightings/sighting_list.html
+++ /dev/null
@@ -1,40 +0,0 @@
-{% extends 'base.html' %}
-{% load typogrify_tags %}
-{% load pagination_tags %}
-
-{% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
-{% block metadescription %}Plants and Animals  seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %}
-{%block bodyid%}id="birds" class="archive"{%endblock%}
-
-
-{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-        {% if region %}{%if region.name == 'United States'%} <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Plants and Animals</span></a> &rarr;</li>
-        <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Plants and Animals</span></a> &rarr;</li> 
-        <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>dialogues</li>{%endif%}
-    </ul>
-    <main class="archive-grid dialogue-grid">{% autopaginate object_list 24%}
-    <h1 class="hide">Plants and Animals 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="archive-card">{% if object.ap.image%} 
-            <div class="post--image">
-                <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
-                    {% include "lib/img_archive.html" with image=object.ap.image  %}
-                </a>
-            </div>{% endif %}
-            <h2 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>)</h2>
-            <time class="post-date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <div class="post-summary">
-                <span class="post-location" itemscope itemtype="http://schema.org/Place">
-                    {% if object.country_name == "United States" %}<span class="p-locality locality">{{object.location_name|smartypants|safe}}</span>, {{object.state_name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location_name|smartypants|safe}}</span>, {{object.country_name}}</a>{%endif%}
-                </span>
-            </div>
-        </article> {% endfor %}
-    </main>
-    <nav aria-label="page navigation" class="pagination">
-    {% paginate %}
-    </nav>
-{% endblock %}
-
-
-
-{% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}
author	luxagraf <sng@luxagraf>	2021-01-15 14:54:30 -0500
committer	luxagraf <sng@luxagraf>	2021-01-15 14:54:30 -0500
commit	47b79fd9d4329e73cef7929ed8f64d9eeb287ae5 (patch)
tree	189381bfe0d81fdc1105679910114deaab3cdb58 /design/templates
parent	e61f3d2c4537a2670c40b33eb02231a71dfb028a (diff)