Responsive desgin

This website honors the user's default font settings (both to be kind and
for accessibility reasons).  Consequently, the responsive layout is based on
character units (ch) rather than pixels.

3 files changed, 16 insertions, 15 deletions

diff --git a/src/about.htm b/src/about.htm
index c8622ef..231a3ce 100644
--- a/src/about.htm
+++ b/src/about.htm
@@ -1,3 +1,5 @@
+<h1 id="about">About</h1>
+
 <aside class="sm">
   <img src="/images/me-libreplanet-2016.png"
        alt="Photo of Mike Gerwitz holding a microphone in front of a blackboard"
@@ -5,17 +7,13 @@
        class="inline-img avatar" />
 
   <p>
-    GPG Fingerprint: <tt>D6E9 B930 028A 6C38 F43B  2388 FEF6 3574 5E6F 6D05</tt>
-    <a href="https://emailselfdefense.fsf.org/">[?]</a>
+    GPG Fingerprint:
+    <tt>D6E9 B930 028A 6C38 F43B  2388 FEF6 3574 5E6F 6D05</tt>&nbsp;<!--
+      --><a href="https://emailselfdefense.fsf.org/">[?]</a>
   </p>
-  <ul class="links">
-    <li><a href="about/resume">View my résumé/CV.</a></li>
-  </ul>
 </aside>
 
-<article class="abstract">
-  <h1>About</h1>
-
+<article class="abstract" aria-labelledby="about">
   <p>
     I am a <a href="http://www.gnu.org/philosophy/">free (as in
       freedom) software</a> <a href="https://stallman.org/articles/on-hacking.html">hacker</a>
@@ -82,6 +80,9 @@
       and <a href="/about/key-transition.txt.old.asc">old</a> keys.
   </p>
   <p>
+    <a href="about/resume">View my résumé/CV.</a>
+  </p>
+  <p>
     <span class="attribution"><a href="https://media.libreplanet.org/u/libreplanet/m/session-03-c-ms-png-libreplanet-2016-sessions-ec00/">LibrePlanet
     2016 Photo</a> Copyright&nbsp;©&nbsp;2016 Kori&nbsp;Feener,
       <a href="https://creativecommons.org/licenses/by/4.0/">CC&nbsp;BY&nbsp;4.0</a>;
diff --git a/src/h12title b/src/h12title
index c638b96..b5f6026 100755
--- a/src/h12title
+++ b/src/h12title
@@ -32,8 +32,9 @@ main()
 
   local title
   title=$(
-    <<<"$body" grep -A1 '<article' \
+    <<<"$body" grep -A10 '<main' \
       | grep '<h1' \
+      | head -n1 \
       | grep -oP '(?<=>)[^<]+' \
   )
 
diff --git a/src/index.sh b/src/index.sh
index b48ed69..83a38f0 100755
--- a/src/index.sh
+++ b/src/index.sh
@@ -88,6 +88,11 @@ main()
   src/mkheader index
 
   cat <<EOF
+<h1 id="latest-posts">Latest Posts</h1>
+<section class="asideable" aria-labelledby="latest-posts">
+  $( abstracts {1..2} )
+</section>
+
 <aside>
   <ul class="links">
     <li><a class="box free-sw" href="#">What is Free/Libre Software?</a></li>
@@ -95,12 +100,6 @@ main()
   </ul>
 </aside>
 
-<section aria-labelledby="latest-posts">
-  <h1 id="latest-posts">Latest Posts</h1>
-
-  $( abstracts {1..2} )
-</section>
-
 <section class="highlight">
   <h1 class="title">The Surreptitious Assault on Privacy, Security,
     and Freedom</h1>