From: Mischa POSLAWSKY <perl@shiar.org>
Date: Thu, 25 May 2017 17:18:54 +0000 (+0200)
Subject: index: link sections in columns
X-Git-Tag: v1.10~10
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/a4aefb765b44c548e0b8b319f78648b43e98791d?ds=sidebyside

index: link sections in columns

Appropriate HTML5 navigation element can be used safely because unstyled
MSIE versions does not support columns.  Column number hardcoded to enable
center-alignment.
---

diff --git a/base.css b/base.css
index ec33cf7..5336d63 100644
--- a/base.css
+++ b/base.css
@@ -685,6 +685,17 @@ form.aside {
 	right: 1em;
 }
 
+#index nav {
+	columns: 3;
+	-moz-columns: 3;
+	-webkit-columns: 3;
+}
+nav > .section {
+	break-inside: avoid;
+	-webkit-column-break-inside: avoid; /* webkit */
+	page-break-inside: avoid; /* moz */
+}
+
 /* printing hints */
 
 @page {
diff --git a/index.plp b/index.plp
index f8a1938..3e997e3 100644
--- a/index.plp
+++ b/index.plp
@@ -32,6 +32,7 @@ if (open my $log, '-|', git => 'log', -1, @format) {{
 }}
 
 :>
+<nav>
 <div class="section">
 <h2>Keyboard maps</h2>
 <ul>
@@ -71,4 +72,5 @@ if (open my $log, '-|', git => 'log', -1, @format) {{
 <li><a href="/emoji">emoticons</a>
 </ul>
 </div>
+</nav>