From c923464fd83fb6b37dc084e4148a4d37e6b01c28 Mon Sep 17 00:00:00 2001
From: Eyal Gruss <eyalgruss@gmail.com>
Date: Sat, 20 Jan 2024 15:04:35 +0200
Subject: [PATCH] cent is two columns

---
 resen/cent/index.html | 10 +++++-----
 resen/pages.js        |  6 +++---
 resen/style.css       | 36 ++++++++++++++++++++++--------------
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/resen/cent/index.html b/resen/cent/index.html
index 3347050..5e7a45a 100644
--- a/resen/cent/index.html
+++ b/resen/cent/index.html
@@ -18,8 +18,8 @@
         "Cent visions de guerre"
         <bdi>(1916)</bdi>.
     </p>
-    <pre class="poem">
-
+    <div class="narrow_poem two_col">
+        <pre>
 1.
 
 גּוּפוֹת סְבִיב שׁוּחוֹת
@@ -53,8 +53,8 @@
 חֳלִי הַבָּשָׂר
 מְבַשֵּׂר עַל אֶפְשָׁרוּת
 כְּנִיסַת רְסִיס זָר
-
-
+</pre>
+        <pre>
 6.
 
 בַּרְזֶל, עוֹפֶרֶת,
@@ -88,8 +88,8 @@
 עִם הָאֲדָמָה
 הַגְּוִיּוֹת חוֹגְגוֹת
 אֵרוּסֵי דָּמִים
-
 </pre>
+    </div>
     <p dir="ltr">
         Translated from French from "Cent visions de guerre" (1916).
     </p>
diff --git a/resen/pages.js b/resen/pages.js
index 8376e4c..b35b650 100644
--- a/resen/pages.js
+++ b/resen/pages.js
@@ -333,9 +333,9 @@ function shortcut(elem, key) {
 }
 
 
-function add_nav_element(nav, url, label, cls, delta, key) {
+function add_nav_element(nav, url, label, cls, delta=0, key) {
     const elem = nav.appendChild(make_link(url, label, ['nowrap', cls], key ? `[${key}]` : ''))
-    if (delta != undefined)
+    if (delta != null)
         elem.style.marginInlineEnd = 1.5 + Math.max(delta, 0) + 'em'
     shortcut(elem, key)
     return elem
@@ -425,7 +425,7 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
 
     span = document.createElement('span')
     const next = add_nav_element(span, '', ui[lang].next, 'next', 0, shortcuts.next)
-    const prev = add_nav_element(span, '', ui[lang].prev, 'prev', 0, shortcuts.prev)
+    const prev = add_nav_element(span, '', ui[lang].prev, 'prev', null, shortcuts.prev)
     nav.appendChild(span)
     set_next_prev_page(page, next, prev, lang, url_kw)
 
diff --git a/resen/style.css b/resen/style.css
index 73c940a..a9ecbd4 100644
--- a/resen/style.css
+++ b/resen/style.css
@@ -273,8 +273,8 @@ cite {
 }
 
 .contents {
+    column-count: var(--columns);
     column-gap: var(--column_gap);
-    columns: var(--columns);
 }
 
 .rows_first {
@@ -575,6 +575,12 @@ ul.mono {
     text-align: center;
 }
 
+.narrow_poem {
+    margin-block: 8ex;
+    margin-inline: auto;
+    max-width: fit-content;
+}
+
 nav {
     background-color: inherit;
     inset-inline: 0;
@@ -674,14 +680,8 @@ button#play.on::before {
     content: '\25fc';
 }
 
-.poem {
-    margin-block: 4ex 4rem;
-    margin-inline: auto;
-    max-width: fit-content;
-}
-
-header + .poem {
-    padding-top: 2ex;
+nav[dir=ltr] ~ .preface_he {
+    display: none;
 }
 
 .punct {
@@ -809,10 +809,6 @@ nav[dir=rtl] ~ :nth-last-child(1 of .refs):not([data-title]) {
     flex-grow: 1;
 }
 
-nav[dir=ltr] ~ .preface_he {
-    display: none;
-}
-
 .social {
     display: inline-block;
 }
@@ -854,6 +850,15 @@ a.sponsors {
     text-align: center;
 }
 
+.two_col {
+    column-count: 2;
+    column-gap: min(4em, 5vw);
+}
+
+.two_col > :first-child {
+    margin-top: 0;
+}
+
 .video {
     aspect-ratio: 16 / 9;
     border: none;
@@ -913,8 +918,11 @@ a.sponsors {
     .refs > blockquote {
         margin-inline: 0;
     }
-}
 
+    .two_col {
+        column-count: 1;
+    }
+}
 
 /* stuff for https://oulipoh.com/resen/ */