working on images container with linked images

oulipoh · Jan 5, 2025 · 21f1458 · 21f1458
1 parent fa60b96
commit 21f1458
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/resen/about/index.html b/resen/about/index.html
@@ -18,21 +18,21 @@
     <p>
         רֶסֶן הוא כתב עת מקוון ליצירה אילוצית וחישובית בעברית. כתב העת שם לעצמו למטרה לתת במה
         והקשר רחב, תרבותי, היסטורי וקוסמופוליטי, לכותבים הפועלים בתחומים הללו, כמו גם להרחבה
-        וגיוון של קהילת הקוראים והחוקרים בתחום. יתפרסמו בו יצירות מקור, תרגומים וביצועים מחדש
+        וגיוון של קהילת הקוראים והחוקרים בתחום. מתפרסמות בו יצירות מקור, תרגומים וביצועים מחדש
         של יצירות מן העולם וכן מאמרים ומסות בנושאי יצירה אילוצית וחישובית.
     </p>
     <p>
         כתב העת רֶסֶן הופק בסיוע
         <a href="https://culture.pais.co.il/Pages/default.aspx">מועצת הפיס לתרבות ולאומנות</a>
         לשנת 2023 על סך 20,000 ש"ח, ולשנת 2024 על סך 29,000 ש"ח.
         ובסיוע מענק מיוחד מטעם
-        <a href="https://www.rabinovichfoundation.org.il/">קרן יהושע רבינוביץ לאומנויות תל־אביב</a>
+        <a href="https://www.rabinovichfoundation.org.il">קרן יהושע רבינוביץ לאומנויות תל־אביב</a>
         לשנת 2023 על סך 8,000 ש"ח, ולשנת 2024 על סך 10,000 ש"ח.
     </p>
     <br>
     <div class="images" style="--max_height: 250px; --min_width: 200px">
-        <img src="media/pais.png" alt="לוגו מפעל הפיס">
-        <img src="media/rabinovich.png" alt="לוגו קרן רבינוביץ">
+        <a href="https://culture.pais.co.il/Pages/default.aspx"><img src="media/pais.png" alt="לוגו מפעל הפיס"></a>
+        <a href="https://www.rabinovichfoundation.org.il"><img src="media/rabinovich.png" alt="לוגו קרן רבינוביץ"></a>
     </div>
     <br>
     <p dir="ltr">Resen journal was produced with the support of the

diff --git a/resen/about/media/pais.png b/resen/about/media/pais.png
diff --git a/resen/about/media/rabinovich.png b/resen/about/media/rabinovich.png
diff --git a/resen/style.css b/resen/style.css
@@ -682,16 +682,24 @@ iframe, object {
     width: var(--media_width);
 }
 
+.images a {
+    line-height: 0;
+}
+
+.images a:not(:first-child:last-child) {
+    display: contents;
+}
+
 .images img {
     --images_container_height: min(var(--max_media_height), var(--max_height, var(--max_media_height)));
     max-height: var(--images_container_height);
     object-fit: contain;
     width: 100%;
 }
 
-.images > img:not(:first-child:last-child) {
+.images > a:not(:first-child:last-child) img, .images > img:not(:first-child:last-child) {
     --multi_image_height_factor: .9;  /* Assumes difference between images aspect ratios is less than 10% */
-    height: calc(100% * var(--multi_image_height_factor));
+    height: calc(var(--multi_image_height_factor) * 100%);
     max-height: calc(var(--images_container_height) / var(--multi_image_height_factor));
 }