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 ec33cf7fef5460d305277eacad909d9922d05bee..5336d63971caa510dade6a7d71bbfb9368758fbb 100644 (file)
--- a/base.css
+++ b/base.css
@@ -685,6 +685,17 @@ form.aside {
        right: 1em;
 }
 
        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 {
 /* printing hints */
 
 @page {

diff --git a/index.plp b/index.plp
index f8a193876eb6ed67d4a4fc91c63579b586da5415..3e997e3dccc63d418215e2817333dbd90de55b63 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>
 <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>
 <li><a href="/emoji">emoticons</a>
 </ul>
 </div>

+</nav>