index: link sections in columns
authorMischa POSLAWSKY <perl@shiar.org>
Thu, 25 May 2017 17:18:54 +0000 (19:18 +0200)
committerMischa POSLAWSKY <perl@shiar.org>
Mon, 29 May 2017 17:23:12 +0000 (19:23 +0200)
Appropriate HTML5 navigation element can be used safely because unstyled
MSIE versions does not support columns.  Column number hardcoded to enable
center-alignment.

base.css
index.plp

index ec33cf7..5336d63 100644 (file)
--- 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 {
index f8a1938..3e997e3 100644 (file)
--- 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>