tweaked header to no longer use h1/h2, updated styles

author: luxagraf <sng@luxagraf.net> 2019-03-13 21:34:31 -0600
committer: luxagraf <sng@luxagraf.net> 2019-03-13 21:34:31 -0600
commit: f6c872b5d7807e443c8e4e1a4f22a8d99562e17c (patch)
tree: 8582d055de929138d5d3168a315667e56af804f8 /design/templates
parent: b471347e0477fa410b3f2c595dfbd3d90bf44140 (diff)
6 files changed, 48 insertions, 52 deletions
diff --git a/design/templates/archives/books.html b/design/templates/archives/books.html
index 59bac34..1862563 100644
--- a/design/templates/archives/books.html
+++ b/design/templates/archives/books.html
@@ -30,7 +30,7 @@
                     <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
         </article>
         {% endfor %}</div>
-    <nav class="pagination">{% paginate %}
+    <nav aria-label="page navigation" class="pagination">{% paginate %}
     </nav>
         </main>
 {% endblock %}
diff --git a/design/templates/base.html b/design/templates/base.html
index 4c7ddac..495a496 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -23,50 +23,50 @@
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
     <div class="wrapper" id="wrapper">
     <div class="header-wrapper">
-        <header role="banner">
-            <h1><a id="logo" href="/" title="home">Luxagraf</a></h1>
-            <h2>{%block sitesubtitle %}Walk Slowly{% endblock%}</h2>
+        <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="/jrnl/" title="What I've been up to lately">Jrnl</a></li>
+                    <li><a href="/essays/" title="longer essays and posts about non-travel related things">Essays</a></li>
+                    <li><a href="/newsletter/" title="The 'friends of a long year' newsletter">Lttr</a></li>
+                    <!--<li id="guide"><a href="/guides/" title="">Guides</a></li>-->
+                    <li><a href="/src/" title="The indie web is awesome, learn how to built it">Src</a></li>
+                    <li><a href="/about" title="About Scott">About</a></li>
+                    <li><a href="/projects/" title="the less visible portions of the iceberg">More</a></li>
+                </ul>
+            </nav>
         </header>
-        <nav role="navigation" class="bl">
-            <ul>
-                <li id="laverdad"><a href="/jrnl/" title="What I've been up to lately">Jrnl</a></li>
-                <li id="laverdad"><a href="/essays/" title="">Essays</a></li>
-                <li id="lttr"><a href="/newsletter/" title="The 'friends of a long year' newsletter">Lttr</a></li>
-                <!--<li id="guide"><a href="/guides/" title="">Guides</a></li>-->
-                <li id="src"><a href="/src/" title="The indie web is awesome, learn how to built for it">Src</a></li>
-                <li id="about"><a href="/about" title="About Scott">About</a></li>
-                <li id="etc" class="last"><a href="/projects/" title="the less visible portions of the iceberg">More</a></li>
-            </ul>
-        </nav>
     </div>
     {% block primary %}{% endblock %}
     {% block extrabody %}{% endblock %}
-    <footer role="contentinfo">
-        <nav class="bl">
-            <ul>
-                <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/" title="Luxagraf Email Updates">Email</a></li>
-                        <li><a href="https://twitter.com/luxagraf" rel="me" title="follow luxagraf on Twitter">Twitter</a></li>
-                        <li><a href="https://www.facebook.com/luxagraf" rel="me" title="luxagraf on Facebook">Facebook</a></li>
-                    </ul>
-            </ul>
+    <footer class="bl">
+        <ul>
+            <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/" title="Luxagraf Email Updates">Email</a></li>
+                    <li><a href="https://twitter.com/luxagraf" rel="me" title="follow luxagraf on Twitter">Twitter</a></li>
+                    <li><a href="https://www.facebook.com/luxagraf" rel="me" title="luxagraf on Facebook">Facebook</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" alt="Donate to luxagraf via PayPal">
-            </form>
+             <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>
-        <div class="donate-btn">
-            <a class="liberapay-btn" href="https://liberapay.com/luxagraf/donate"><span>Donate</span></a>
-        </div>
-        </div>
-       </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>, except photos, which are licensed under the Creative Commons (<a href="http://creativecommons.org/licenses/by-sa/3.0/" title="read the Attribution-Share Alike 3.0 deed">details</a>).
diff --git a/design/templates/fieldnotes/fieldnote_list.html b/design/templates/fieldnotes/fieldnote_list.html
index c667ef3..5c9c808 100644
--- a/design/templates/fieldnotes/fieldnote_list.html
+++ b/design/templates/fieldnotes/fieldnote_list.html
@@ -36,8 +36,7 @@
         </li>
         {%endif%}{%endfor%}</ul>
        </main>
-
-     <nav class="pagination">
+    <nav aria-label="page navigation" class="pagination">
     {% paginate %}
     </nav>
 {% endblock %}
diff --git a/design/templates/jrnl/entry_list.html b/design/templates/jrnl/entry_list.html
index 2201e34..5aef750 100644
--- a/design/templates/jrnl/entry_list.html
+++ b/design/templates/jrnl/entry_list.html
@@ -34,11 +34,7 @@
             </p>
         </article> {% endfor %}
     </main>
-    <nav class="pagination">
+    <nav aria-label="page navigation" class="pagination">
     {% paginate %}
     </nav>
 {% endblock %}
-
-
-
-{% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}
diff --git a/design/templates/lttr/subscriber_form.html b/design/templates/lttr/subscriber_form.html
index 3fb906a..83e1e28 100644
--- a/design/templates/lttr/subscriber_form.html
+++ b/design/templates/lttr/subscriber_form.html
@@ -10,21 +10,22 @@
     </ul>
     <main role="main" id="essay-archive" class="essay-archive archive-list">
         <div class="essay-intro">
-            <h2>Join the <em>Friends of a Long Year</em>.</h2>
-            <form action="" method="post" class="generic-form flex">{% csrf_token %}
+            <h1 class="list-hed">Join the <em>Friends of a Long Year</em>.</h1>
+            <form action="" method="post" class="generic-form flex newsletter-subscribe">{% csrf_token %}
                 {% for field in form %}
                 <fieldset>
                     {{field.label_tag}}
                     {{field}}
                 </fieldset>
-                {% if forloop.last %}<input type="submit" name="post" class="submit-post btn btn-hollow" value="Subscribe" />{%endif%}
+                {% if forloop.last %}<input type="submit" name="post" class="btn" value="Subscribe" />{%endif%}
             </form>
             <small class="alert">{% if field.errors %}{{field.errors}}{% endif %}</small>
                 {%endfor%}
-            <p>Say what? <em>Friends of a Long Year</em> is an infrequent mailing that will keep you up-to-date with luxagraf and offer some thoughts on topics like travel, photography, the natural world, tools, walking and other ephemera. It comes about twice a month, sometimes less, sometimes more. Unsubscribing is easy. It's all self-hosted, secure, and <a href="/privacy" title="My privacy policy">private</a>.</p>
+            <h2 class="subhead">Say what? </h2>
+            <p><em>Friends of a Long Year</em> is an infrequent mailing that will keep you up-to-date with luxagraf and offer some thoughts on topics like travel, photography, the natural world, tools, walking and other ephemera. It comes about twice a month, sometimes less, sometimes more. Unsubscribing is easy. It's all self-hosted, secure, and <a href="/privacy" title="My privacy policy">private</a>.</p>
             <p>The name comes from the great early 20th century explorer and desert rat, Mary Hunter Austin, whose collected essays, <a href="https://archive.org/details/lostbordersillu00brotgoog/page/n8"><cite>Lost Borders</cite></a> is dedicated to the "Friends of a Long Year". This somewhat inscrutable dedication grabbed me, and seemed like the perfect name for this mailing list.</p>
         </div>
-        <h1 class="topic-hed">Letters</h1>
+        <h3 class="list-title">Letters</h3>
     <ul>{% for object in object_list %}
         <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
             <span class="date dt-published">{{object.pub_date|date:"F Y"}}</span>
diff --git a/design/templates/sightings/sighting_list.html b/design/templates/sightings/sighting_list.html
index 3ae33e5..d778cb2 100644
--- a/design/templates/sightings/sighting_list.html
+++ b/design/templates/sightings/sighting_list.html
@@ -30,7 +30,7 @@
             </div>
         </article> {% endfor %}
     </main>
-    <nav class="pagination">
+    <nav aria-label="page navigation" class="pagination">
     {% paginate %}
     </nav>
 {% endblock %}
author	luxagraf <sng@luxagraf.net>	2019-03-13 21:34:31 -0600
committer	luxagraf <sng@luxagraf.net>	2019-03-13 21:34:31 -0600
commit	f6c872b5d7807e443c8e4e1a4f22a8d99562e17c (patch)
tree	8582d055de929138d5d3168a315667e56af804f8 /design/templates
parent	b471347e0477fa410b3f2c595dfbd3d90bf44140 (diff)