Added CSS to make contributors table resize automatically. Fixes #21

contributors.qmd

@@ -2,9 +2,70 @@
 
 We extend our sincere thanks to the diverse group of individuals who have generously contributed their expertise, insights, and time to enhance both the content and codebase of this project. Below you will find a list of all contributors. If you would like to contribute to this project, please see our [GitHub](https://github.com/harvard-edge/cs249r_book) page.
 
+
+<style>
+
+  /* Base styles for the contributors' table */
+.contributors-table {
+  width: 100%;
+  text-align: center;
+}
+
+/* Styles for the table cells */
+.contributors-table td {
+  vertical-align: top;
+}
+
+/* Media query for screens smaller than a certain width (e.g., 768px) */
+@media (max-width: 768px) {
+  /* Convert table rows and cells to block elements */
+  .contributors-table,
+  .contributors-table tbody,
+  .contributors-table tr,
+  .contributors-table td {
+    display: block;
+    width: 100%;
+  }
+
+  /* Hide the redundant td elements that are empty or not needed */
+  .contributors-table td:empty {
+    display: none;
+  }
+
+  /* Adjust padding and margins for mobile view */
+  .contributors-table td {
+    /* Adjust padding and margins as needed */
+    padding: 10px;
+    margin-bottom: 10px;
+    /* Create a border or separator effect */
+    border-bottom: 1px solid #eaeaea;
+  }
+
+  /* Ensure images and content scale correctly */
+  .contributors-table img {
+    width: 100px; /* or any other appropriate size */
+    height: auto;
+    margin: 0 auto; /* centers the image */
+  }
+
+  /* Optional: Style the name to be more prominent on mobile */
+  .contributors-table sub {
+    display: block;
+    margin-top: 5px;
+    font-size: larger; /* makes the name larger */
+  }
+}
+
+/* Ensure the class is added to the table element */
+.contributors-table {
+  /* Additional styling if needed */
+}
+  </style>
+
+
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
+<!-- markdownlint-disable --> 
 <table>
   <tbody>
     <tr>
@@ -47,4 +108,18 @@ We extend our sincere thanks to the diverse group of individuals who have genero
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 
-<!-- ALL-CONTRIBUTORS-LIST:END -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+
+<script>
+document.addEventListener('DOMContentLoaded', (event) => {
+  // Query the table using a distinctive feature, like an embedded GitHub link within a table cell.
+  var githubTables = document.querySelectorAll('table a[href^="https://github.com/"]');
+  githubTables.forEach(function(githubLink) {
+    var table = githubLink.closest('table'); // Find the closest table ancestor
+    if (table) {
+      table.classList.add('contributors-table'); // Add the 'contributors-table' class
+    }
+  });
+});
+</script>