refactor header; fix stuff for alex's down

oulipoh · Jan 18, 2024 · 07e912b · 07e912b
1 parent 55a5825
commit 07e912b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 35 deletions.
diff --git a/resen/down/script.js b/resen/down/script.js
@@ -4,7 +4,7 @@ let origin_x, origin_y
 
 document.addEventListener('pointerdown', e => {
     down = true
-    document.body.style.setProperty('--transparency', .1)
+    document.body.style.setProperty('--opacity', .07)
     origin_x = e.clientX
     origin_y = e.clientY
     bg_pos_dx += last_dx
@@ -13,19 +13,19 @@ document.addEventListener('pointerdown', e => {
 
 document.addEventListener('pointerup', () => {
     down = false
-    document.body.style.setProperty('--transparency', 1)
+    document.body.style.setProperty('--opacity', 1)
 })
 
 document.addEventListener('pointercancel', () => {
     down = false
-    document.body.style.setProperty('--transparency', 1)
+    document.body.style.setProperty('--opacity', 1)
 })
 
 document.addEventListener('pointermove', e => {
     if (!down)
         return
     last_dx = e.clientX - origin_x
     last_dy = e.clientY - origin_y
-    document.body.style.setProperty('--dx', bg_pos_dx + last_dx + 'px')
-    document.body.style.setProperty('--dy', bg_pos_dy + last_dy + 'px')
+    document.body.style.setProperty('--dx', bg_pos_dx + last_dx)
+    document.body.style.setProperty('--dy', bg_pos_dy + last_dy)
 })
diff --git a/resen/down/style.css b/resen/down/style.css
@@ -4,12 +4,13 @@ html {
 
 body {
     background-image: url('down.jpg');
-    background-position: clamp(100%, 43% + var(--dx, 0px), 0%) clamp(100%, 40% + var(--dy, 0px), 0%);
-    background-size: auto 500%;
+    background-position: clamp(100%, 43% + var(--dx, 0)*1px, 0%) clamp(100%, 40% + var(--dy, 0)*1px, 0%);  /* Note reverse order is due to the negative difference of element size minus upscaled image size. Avoid the separate -x/-y properties which may be broken in Chrome and Safari. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1874606, https://bugs.chromium.org/p/chromium/issues/detail?id=610627#c25 */
+    background-size: auto 400%;
     cursor: grab;
     --fg_dim: var(--fg);
+    --opacity: 1;
+    opacity: min(var(--opacity), .6);
     touch-action: pinch-zoom;
-    --transparency: 1;
     user-select: none;
     -webkit-user-select: none;
 }
@@ -18,10 +19,6 @@ footer, h1, h2, nav {
     text-shadow: white 0 0 2px;
 }
 
-header, h2 {
-    opacity: min(var(--transparency), .7);
-}
-
 nav {
     background: none;
 }
diff --git a/resen/pages.js b/resen/pages.js
@@ -522,12 +522,12 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
     header.appendChild(h1)
     if (ui[lang].dir && ui[lang].dir != document.documentElement.dir)
         nav.dir = ui[lang].dir
-    document.body.appendChild(header)
     if (pages[page].author || pages[page].authors || pages[page].translator || pages[page].translators) {
-        const current_authors = get_make_author(page, lang, true, new_tab_for_social)[lang != 'en' | 0].join(', ')
+        const current_authors = get_make_author(page, lang, header, new_tab_for_social)[lang != 'en' | 0].join(', ')
         if (page == '/' && current_authors)
             desc.push(current_authors)
     }
+    document.body.appendChild(header)
     if (desc.length) {
         meta = document.createElement('meta')
         meta.name = 'description'
@@ -548,12 +548,12 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
 }
 
 
-function get_make_author(page, lang, make, new_tab_for_social=default_new_tab_for_social) {
+function get_make_author(page, lang, elem, new_tab_for_social=default_new_tab_for_social) {
     page ??= get_page()
     lang ??= get_lang()
     const translators = merge(pages[page].translator, pages[page].translators)
     let keys = [...new Set(merge(pages[page].author, pages[page].authors, translators))]
-    if (make && authors && !keys.length)
+    if (elem && authors && !keys.length)
         keys = Object.keys(authors).slice(0, 1)
     let all_names = []
     let all_alt_names = []
@@ -563,7 +563,7 @@ function get_make_author(page, lang, make, new_tab_for_social=default_new_tab_fo
         let name = key
 
         let h2
-        if (make) {
+        if (elem) {
             h2 = document.createElement('h2')
             h2.className = 'author'
         }
@@ -577,7 +577,7 @@ function get_make_author(page, lang, make, new_tab_for_social=default_new_tab_fo
                 if (alt_langs.length)
                     alt_name += ' ' + ui[alt_langs[0]].translator
             }
-            if (make && alt_name && alt_name != name)
+            if (elem && alt_name && alt_name != name)
                 h2.title = alt_name
         }
         if (translators.includes(key))
@@ -586,7 +586,7 @@ function get_make_author(page, lang, make, new_tab_for_social=default_new_tab_fo
         all_names.push(name)
         all_alt_names.push(alt_name || name)
 
-        if (make) {
+        if (elem) {
             const a = make_link('', name)
             h2.appendChild(a)
             let url = key
@@ -616,7 +616,7 @@ function get_make_author(page, lang, make, new_tab_for_social=default_new_tab_fo
                 })
                 h2.appendChild(span)
             }
-            document.body.appendChild(h2)
+            elem.appendChild(h2)
         }
     })
     return [all_names, all_alt_names]

diff --git a/resen/petri/petri.json b/resen/petri/petri.json
@@ -52,7 +52,8 @@
     "זעם עזה": 1
   },
 
-  "labels": {"רבייה_ישראל": "BREEDING_ISRAEL", "צבא": "MILITARY", "מבצע": "OPERATION", "עזה": "GAZA", "רבייה_עזה": "BREEDING_GAZA", "ישראל": "ISRAEL", "שחרור": "DISCHARGE", "בית עלמין עזה": "GAZA CEMETERY", "פטירה_עזה": "PASSING_GAZA", "כלא": "PRISON", "הסתה": "INCITEMENT", "פטירה_ישראל": "PASSING_ISRAEL", "בית עלמין ישראל": "ISRAEL CEMETERY", "שבי": "CAPTIVITY", "חילוף": "EXCHANGE", "זעם עזה": "GAZA WRATH", "פיגוע": "TERROR ATTACK", "זעם ישראל": "ISRAEL WRATH", "חטיפה": "ABDUCTION", "ארגון טרור": "TERROR GROUP"},
+  "labels": {"רבייה_ישראל": "BREEDING_ISRAEL", "צבא": "MILITARY", "מבצע": "OPERATION", "עזה": "GAZA", "רבייה_עזה": "BREEDING_GAZA", "ישראל": "ISRAEL", "שחרור": "DISCHARGE", "בית עלמין עזה": "GAZA CEMETERY", "פטירה_עזה": "PASSING_GAZA", "זעם ישראל": "ISRAEL WRATH", "הסתה": "INCITEMENT", "פטירה_ישראל": "PASSING_ISRAEL", "בית עלמין ישראל": "ISRAEL CEMETERY", "שבי": "CAPTIVITY", "חטיפה": "ABDUCTION", "זעם עזה": "GAZA WRATH", "פיגוע": "TERROR ATTACK", "כלא": "PRISON", "חילוף": "EXCHANGE", "ארגון טרור": "TERROR GROUP"}
+,
 
   "require": [
     ["ישראל", "צבא"],

diff --git a/resen/style.css b/resen/style.css
@@ -17,10 +17,13 @@
     --row_gap: 3em;
     --mono_font: 'Courier New', monospace;
 
+    --h1_size: clamp(1.3em, 5rem, 10vw);
     --hor_scrollbar_offset: 16px;
+    --media_width: 85%;
+
+    /* Following variables must use units that are not relative to elements (i.e. avoid %, em, ex) */
     --main_margin: max(2rem, 5vw);
     --anti_margin: calc(-1 * var(--main_margin));
-    --media_width: 85%;
     --nav_lh: 2rem;
     --nav_pad_top: 4px;
     --nav_pad_bottom: 16px;
@@ -213,10 +216,6 @@ nav[dir=rtl] ~ .author {
     margin-inline-end: 1em;
 }
 
-.author + .author {
-    margin-top: -3ex;
-}
-
 blockquote {
     margin-block: 3ex;
 }
@@ -280,7 +279,7 @@ cite {
 
 .rows_first {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, (var(--media_width) - (var(--columns) - 1) * var(--column_gap)) / var(--columns), 100%), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, (var(--media_width) - (var(--columns) - 1)*var(--column_gap)) / var(--columns), 100%), 1fr));
     row-gap: var(--row_gap);
 }
 
@@ -447,15 +446,11 @@ h1, h2 {
 }
 
 h1, .subhuge {
-    font-size: clamp(1.3em, 5rem, 10vw);
-}
-
-h2 {
-    margin-bottom: 4ex;
+    font-size: var(--h1_size);
 }
 
-h2:not(:is(header, .preface_he) + *) {
-    margin-top: 6ex;
+h2:not(header *) {
+    margin-block: 6ex 4ex;
 }
 
 .harden {
@@ -464,7 +459,7 @@ h2:not(:is(header, .preface_he) + *) {
 }
 
 header {
-    margin-top: calc(var(--nav_pad_top) + var(--nav_pad_bottom) + 2 * var(--nav_lh));  /* variables must use units that will not change computed value */
+    margin-block: calc(var(--nav_pad_top) + var(--nav_pad_bottom) + 2*var(--nav_lh)) calc(var(--h1_size) * .8);
 }
 
 nav[dir=ltr] ~ header {