Add go top of page link to major sections

Per [issure 283](#283),
add a link to each major section of the about page which allows the user
to move to the index of topics at the top of the page.

public_html/css/hpr.css

@@ -371,6 +371,9 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
+.lane > article > header > .index-link {
+	float: right;
+}
 .lane.stack > article  {
 	border-radius: 0.5rem;
 	border: thin solid var(--background-secondary);

templates/content-about.tpl.html

@@ -19,6 +19,7 @@
 <div class="lane stack">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="about">About HPR<a href="<!--% absolute_url(baseurl,'about.html#about') %-->">.</a></h1>
 	</header>
 <h2 id="community">The HPR Community<a href="<!--% absolute_url(baseurl,'about.html#community') %-->">.</a></h2>
@@ -95,6 +96,7 @@ now hosting our media files.
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="contact">Contact<a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">.</a></h1>
 	</header>
 <h2 id="contact_primary">Primary Contact Points</h2>
@@ -129,6 +131,7 @@ now hosting our media files.
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id ="press" >In the Press<a href="<!--% absolute_url(baseurl,'about.html#press') %-->">.</a></h1>
 	</header>
 <ul>
@@ -149,6 +152,7 @@ now hosting our media files.
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="how_to_help">How to Help<a href="<!--% absolute_url(baseurl,'about.html#how_to_help') %-->">.</a></h1>
 	</header>
 <p>
@@ -196,6 +200,7 @@ You can help by:
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="download">Download Archive<a href="<!--% absolute_url(baseurl,'about.html#download') %-->">.</a></h1>
 	</header>
 <p>Please be aware that our Archive exceeds <strong>62Gb</strong> <em>(Ogg: 21Gb, Spx: 16Gb, mp3: 25Gb)</em>. We are happy for you to download them, but please make sure that you are not going to incur additional bandwidth charges on your side.</p>
@@ -222,6 +227,7 @@ You can download the audio of the episodes directly from the command line using
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="so_you_want_to_record_a_podcast">So you want to record a podcast<a href="<!--% absolute_url(baseurl,'about.html#so_you_want_to_record_a_podcast') %-->">.</a></h1>
 	</header>
 <p>Well you've come to the right place. Our goal here at HPR is to make it as easy as possible for you to get a podcast released. We take care of the hard bits so you don't need to. Recording your first show is always a daunting prospect but <a href="<!--% absolute_url(baseurl) %-->correspondents/index.html">hundreds of people</a> like yourself have done it and so can you.
@@ -338,6 +344,7 @@ and chat with a live person 24/7.
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="requested_topics">Requested topics<a href="<!--% absolute_url(baseurl,'about.html#requested_topics') %-->">.</a></h1>
 	</header>
 <p>This is a list of topics that have been requested by the community. 
@@ -411,6 +418,7 @@ Feel free to add it to the list by emailing admin at hpr or by tweeting us on <a
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="agreement">Stuff you need to know<a href="<!--% absolute_url(baseurl,'about.html#agreement') %-->">.</a></h1>
 	</header>
 <p>
@@ -627,6 +635,7 @@ These shows contain a message alerting listeners to the fact that we had free sl
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="recording_a_podcast">Recording a Podcast</h1>
 	</header>
 <p>
@@ -745,6 +754,7 @@ There is no need to add any information to the file as that will be inserted bas
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="promote_hpr">Please promote HPR<a href="<!--% absolute_url(baseurl,'about.html#promote_hpr') %-->') %-->">.</a></h1>
 	</header>
 <p>Feel free to use the promotional material to spread the word in your podcasts, or have them played on to other shows.</p>
@@ -766,6 +776,7 @@ There is no need to add any information to the file as that will be inserted bas
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="requesting_slot">Picking a slot for your show</h1>
 	</header>
 <p>
@@ -814,6 +825,7 @@ Once you have pressed submit you will not be able to edit any of the information
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="adding_an_episode">Adding an Episode</h1>
 	</header>
 <p>
@@ -953,6 +965,7 @@ Your show information is used to process the media files, on the website, in the
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="workflow">Workflow</h1>
 	</header>
 <ol>
@@ -970,6 +983,7 @@ Your show information is used to process the media files, on the website, in the
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="faq">Frequently Asked Questions</h1>
 	</header>
 <h2 data-number="0.1" id="what-is-hacker-public-radio"><span class="header-section-number">0.1</span> What is Hacker Public Radio?</h2>