image resizing

dainst · Apr 3, 2024 · 4468d5b · 4468d5b
1 parent d83ab8f
commit 4468d5b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 53 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,36 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>Olympia Excavation Diaries</title>
-  </head>
-  <body>
+</head>
+<body>
     <div class="content">
-      <h1 align="center">Olympia Excavation Diaries</h1>
-      <h2 align="center">A Collaborative Digital Publication</h2>
-      <p>&nbsp;&nbsp; </p>
-<div class="table-responsive">
-  <table border="1">
-    <tbody>
-      <tr>
-        <td>
-          <img src="images/GR-olympia-palaestra%20wikimedia.jpg" alt="Olympia Palaestra" title="Olympia Palaestra">
-        </td>
-        <td>
-          <img src="images/G.%20Koronaios%20-%201280px-The_Philippeion_in_Ancient_Olympia_on_October_14,_2020.jpg" alt="G. Koronaios - Philippeion" title="G. Koronaios - Philippeion">
-        </td>
-      </tr>
-      <tr>
-        <td>Olympia Palaestra -- <a href="https://commons.wikimedia.org/wiki/File:GR-olympia-palaestra.jpg">Bgabel</a></td>
-        <td>The Philippeion -- <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Philippeion_in_Ancient_Olympia_on_October_14%2C_2020.jpg/1280px-The_Philippeion_in_Ancient_Olympia_on_October_14%2C_2020.jpg">Koronaios</a></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        <h1 align="center">Olympia Excavation Diaries</h1>
+        <h2 align="center">A Collaborative Digital Publication</h2>
+        <p>&nbsp;&nbsp; </p>
+      <div class="table-responsive">
+        <table border="1">
+          <tbody>
+            <tr>
+              <td> <img src="images/GR-olympia-palaestra%20wikimedia.jpg" alt="Olympia Palaestra"
 
+                  title="Olympia Palaestra"> </td>
+              <td> <img src="images/G.%20Koronaios%20-%201280px-The_Philippeion_in_Ancient_Olympia_on_October_14,_2020.jpg"
+
+                  alt="G. Koronaios - Philippeion" title="G. Koronaios - Philippeion">
+              </td>
+            </tr>
+            <tr>
+              <td>Olympia Palaestra -- <a href="https://commons.wikimedia.org/wiki/File:GR-olympia-palaestra.jpg">Bgabel</a></td>
+              <td>The Philippeion -- <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Philippeion_in_Ancient_Olympia_on_October_14%2C_2020.jpg/1280px-The_Philippeion_in_Ancient_Olympia_on_October_14%2C_2020.jpg">Koronaios</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <p><br>
       </p>
       <p>In spring 2024, the publication of the two-volume transcript of the
@@ -70,9 +70,23 @@ <h2 align="center">A Collaborative Digital Publication</h2>
             Archivdokumenten, Forum for Digital Archaeology (2024)</a></li>
       </ul>
     </div>
-    <div class="content"><img src="images/FdAI-2024-Baumeister-Zielke-Fig_4.jpg"
-
-        alt="Baumeister-Zielke Fig_4" title="Baumeister-Zielke Fig_4" style="width: 812px; height: 376px;">
+    <div class="table-responsive">
+        <table>
+            <tbody>
+                <tr>
+                    <td>
+                        <img src="images/FdAI-2024-Baumeister-Zielke-Fig_4.jpg" alt="Baumeister-Zielke Fig_4" title="Baumeister-Zielke Fig_4">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        P. Baumeister - K. Zielke -- Fig.4
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
+</body>
+</html>
   </body>
 </html>
diff --git a/docs/styles.css b/docs/styles.css
@@ -18,44 +18,45 @@ a:hover {
     padding: 20px;
 }
 
-.image {
+.image,
+.table-responsive img {
     text-align: center;
+    max-width: 100%;
+    height: auto;
 }
 
+/* Updated to remove redundancy, applying max-width to all images */
 img {
     max-width: 100%;
     height: auto;
 }
 
-/* Responsive table and image styles */
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-td {
-  text-align: center;
-  padding: 10px;
+/* Responsive table styles, now with border removed */
+.table-responsive table {
+    width: 100%;
+    border-collapse: collapse;
+    border: none; /* Removes border from the table */
 }
 
-img {
-  width: 100%;
-  height: auto;
-  max-width: 400px; /* Adjust based on your preference */
+.table-responsive th,
+.table-responsive td {
+    border: none; /* Hides borders for th and td elements */
+    text-align: center;
+    padding: 10px;
 }
 
 /* Responsive design for smaller screens */
 @media screen and (max-width: 600px) {
-  .table-responsive {
-    display: block;
-    overflow-x: auto;
-  }
-
-  .table-responsive table {
-    width: auto;
-  }
-
-  .table-responsive img {
-    max-width: 300px; /* Smaller max-width for smaller screens */
-  }
+    .table-responsive {
+        display: block;
+        overflow-x: auto;
+    }
+
+    .table-responsive table {
+        width: auto;
+    }
+
+    .table-responsive img {
+        max-width: 300px; /* Adjusted max-width for smaller screens */
+    }
 }