Retire Makefile and parallelize image processing

3 files changed, 43 insertions, 8 deletions

diff --git a/share/templates/default/details.tmpl b/share/templates/default/details.tmpl
index 85b21cb..f0cbda8 100644
--- a/share/templates/default/details.tmpl
+++ b/share/templates/default/details.tmpl
@@ -1,11 +1,13 @@
 cat <<END
 <div class='view'>
-    <a href="${render_page_num_html}-${render_preview_num_html}.html">
-        <img class='view ${render_animation_class_html}' border='0' src='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}' />
-    </a>
-    <div class="details-panel">
-        <h1>Details</h1>
-        ${render_exif_details_html}
+    <div class="details-layout">
+        <a class="details-photo-link" href="${render_page_num_html}-${render_preview_num_html}.html">
+            <img class='view details-photo ${render_animation_class_html}' border='0' src='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}' />
+        </a>
+        <div class="details-panel">
+            <h1>Details</h1>
+            ${render_exif_details_html}
+        </div>
     </div>
     <div class="navigator">
         <a href="${render_page_num_html}-${render_view_prev_html}.html" class="arrow">&lArr;</a>
diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 238126a..4423544 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -41,12 +41,26 @@ cat <<END
         div.details-panel {
             background-color: #000000;
             border: 3px solid #ffffff;
-            margin: 2 auto;
+            flex: 1 1 34%;
             max-width: 900px;
             padding: 10px;
             text-align: left;
         }
 
+        div.details-layout {
+            align-items: flex-start;
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+            margin: 0 auto;
+            max-width: 98vw;
+        }
+
+        a.details-photo-link {
+            flex: 1 1 62%;
+            min-width: 0;
+        }
+
         div.details-panel h1 {
             font-size: 1.1em;
             margin-top: 0;
@@ -96,6 +110,13 @@ cat <<END
             object-fit: contain;
         }
 
+        div.details-layout img.details-photo {
+            height: auto;
+            max-height: min(${render_height_html}px, 85vh);
+            max-width: 100%;
+            width: auto;
+        }
+
         .animate-none{}
         .animate-fading {animation:fading 10s}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
 
@@ -156,6 +177,18 @@ cat <<END
                 transition-duration: 0.01ms !important;
             }
         }
+
+        @media (max-width: 900px) {
+            div.details-layout {
+                align-items: center;
+                flex-direction: column;
+            }
+
+            div.details-panel {
+                box-sizing: border-box;
+                width: 95%;
+            }
+        }
     </style>
 </head>
 
diff --git a/share/templates/default/next.tmpl b/share/templates/default/next.tmpl
index c5aa5c9..55596ae 100644
--- a/share/templates/default/next.tmpl
+++ b/share/templates/default/next.tmpl
@@ -1,6 +1,6 @@
 cat <<END
 <div class="navigator">
     <a href='${render_next_html}.html'>Next ${render_maxpreviews_html} pictures</a>
-    <a href="${render_prev_html}.html" class="arrow">&rArr;</a>
+    <a href="${render_next_html}.html" class="arrow">&rArr;</a>
 </div>
 END