public_html/css/hpr.css

@@ -766,6 +766,11 @@ fieldset > table td input[type="radio"] {
     border: 1px solid #ddd;
 	padding: 0.1em 0;
 }
+nav > ul > li::marker {
+	content: "✽ ";
+	font-size: 1.05rem;
+	color: var(--background-secondary);
+}
 nav.episodes {
 	color: var(--background-primary);
 	font-size: 0.9em;
@@ -817,6 +822,17 @@ nav.episodes span a:hover svg #bar {
 	stroke: var(--link-secondary-hover);
 	fill: var(--link-secondary-hover);
 }
+details[open] > * {
+	margin-left: 1.35rem;
+	padding-right: 1.35rem;
+}
+details[open] > summary {
+	margin-left: 0;
+	padding-right: 0;
+}
+details > summary:hover {
+	cursor: pointer;
+}
 @media (min-width: 600px) {
 	body > header .bounding-box {
 		justify-content: space-between;
@@ -913,6 +929,17 @@ nav.episodes span a:hover svg #bar {
 	#host {
 		gap: 2rem;
 	}
+	nav > ul {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-flow: wrap;
+		gap: 0.5rem 1rem;
+	}
+	nav > ul > li {
+		flex: 1 0 max-content;
+		max-width: 50%;
+	}
 	nav.episodes {
 		display: inline-block;
 	}

templates/content-about.tpl.html

@@ -1,24 +1,24 @@
 <!--% page_title = "HPR ~ About this community podcast" %-->
 <h1 id="welcome">Welcome to HPR<a href="<!--% absolute_url(baseurl,'about.html#about') %-->">.</a></h1>
-
+<nav>
 <ul>
-  <li><a href="<!--% absolute_url(baseurl,'about.html#about') %-->">About HPR.</a></li>
+  <li><a href="<!--% absolute_url(baseurl,'about.html#about') %-->">About HPR.</a>
   <ul>
     <li><a href="<!--% absolute_url(baseurl,'about.html#community') %-->">The HPR Community</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#history') %-->">Our History</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#free_culture') %-->">Free Culture</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#do_no_harm') %-->">Do No Harm</a></li>
-    <li><a href="<!--% absolute_url(baseurl,'about.html#governance') %-->">Governance</a></li>
+    <li><a href="<!--% absolute_url(baseurl,'about.html#governance') %-->">Governance</a>
     <ul>
       <li><a href="<!--% absolute_url(baseurl,'about.html#maillist') %-->">HPR Mail List</a></li>
       <li><a href="<!--% absolute_url(baseurl,'about.html#hosting_providers') %-->">Hosting Providers</a></li>
       <li><a href="<!--% absolute_url(baseurl,'about.html#janitors') %-->">Janitors</a></li>
       <li><a href="<!--% absolute_url(baseurl,'about.html#auditors') %-->">Auditors</a></li>
-    </ul>
+    </ul></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#kill_switch') %-->">Kill Switch</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#recent_policy_changes') %-->">Recent Policy Changes</a></li>
-  </ul>
-  <li><a href="<!--% absolute_url(baseurl,'about.html#how_to_help') %-->">How to Help</a></li>
+  </ul></li>
+  <li><a href="<!--% absolute_url(baseurl,'about.html#how_to_help') %-->">How to Help</a>
   <ul>
     <li><a href="<!--% absolute_url(baseurl,'about.html#submit_a_show') %-->">Submit a show</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#comment') %-->">Comment on a show</a></li>
@@ -31,15 +31,15 @@
     <li><a href="<!--% absolute_url(baseurl,'about.html#hpr_wikipedia_page') %-->">(Re)Creating a HPR page on wikipedia</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#free_culture_podcasts') %-->">Help the Free Culture Podcasts Project</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#supporters') %-->">Please support our Supporters</a></li>
-  </ul>
-  <li><a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">Contact</a></li>
+  </ul></li>
+  <li><a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">Contact</a>
   <ul>
     <li><a href="<!--% absolute_url(baseurl,'about.html#contact_primary') %-->">Primary Contact Points</a></li>
     <li><a href="<!--% absolute_url(baseurl,'about.html#contact_secondary') %-->">Secondary Contact Points</a></li>
-  </ul>
+  </ul></li>
   <li><a href="<!--% absolute_url(baseurl,'about.html#press') %-->">In the Press</a></li>
 </ul>
-
+</nav>
 <div class="lane stack">
 <article>
   <header>

templates/content-contribute.tpl.html

@@ -1,18 +1,19 @@
 <!--% page_title = "HPR ~ Contribute to this community podcast" %-->
-
-<ul>
+<h2>Contribute a show</h2>
+<nav><ul>
   <li><a href="<!--% absolute_url(baseurl,'contribute.html#so_you_want_to_record_a_podcast') %-->">So you want to record a podcast</a></li>
   <li><a href="<!--% absolute_url(baseurl,'contribute.html#stuff_you_need_to_know') %-->">Stuff you need to know</a></li>
   <li><a href="<!--% absolute_url(baseurl,'contribute.html#pick_a_topic') %-->">Pick a Topic</a></li>
   <li><a href="<!--% absolute_url(baseurl,'contribute.html#recording_a_podcast') %-->">Recording a Podcast</a></li>
   <li><a href="<!--% absolute_url(baseurl,'contribute.html#requesting_slot') %-->">Deciding when your show is released</a></li>
   <li><a href="<!--% absolute_url(baseurl,'contribute.html#confirmation_email') %-->">Confirmation Email</a></li>
-  <li><a href="<!--% absolute_url(baseurl,'contribute.html#uploading_an_episode') %-->">Uploading an Episode</a></li>
+  <li><a href="<!--% absolute_url(baseurl,'contribute.html#uploading_an_episode') %-->">Uploading an Episode</a>
   <ul>
     <li><a href="<!--% absolute_url(baseurl,'contribute.html#personal_information') %-->">Personal Information</a></li>
     <li><a href="<!--% absolute_url(baseurl,'contribute.html#episode_information') %-->">Episode Information</a></li>
+  </ul></li>
 	</ul>
-</ul>
+</nav>
 
 <div class="lane stack">
 <article>