replace download table with grid for more flexibility

Author: johndoh

_config.yml

@@ -18,7 +18,7 @@ libs: {
         url: 'https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.js',
         sri: 'sha384-SlYTcCEsC10TwMfcpGjqd+bWfA2QdB0CInBtPX6erDT3NnEkhX2X3gJ83UyHtXs3'
     },
-    css: '/styles/styles.min.css?v=2026021500',
+    css: '/styles/styles.min.css?v=2026030800',
     bootstrap: {
         css: {
             url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',

_includes/footer.html

@@ -78,7 +78,7 @@
 
     document.querySelectorAll('a.copy-popover-link').forEach((sumbtn) => {
         var popover = new bootstrap.Popover(sumbtn, {
-            content: sumbtn.closest('td').querySelector('.copy-popover-target').innerHTML,
+            content: sumbtn.closest('div').querySelector('.copy-popover-target').innerHTML,
             html: true,
             customClass: 'copy-popover'
         });

download/index.html

@@ -18,31 +18,27 @@ <h2 id="{{ id }}">{{ params.title }} <a class="anchor" href="#{{ id }}" aria-lab
         <p class="text-body-secondary mb-1">{{ params.description }}</p>
     {% endif %}
 
-    <table class="table table-striped download-table">
-    <thead>
-        <tr>
-            <th class="package" scope="col">Package</th>
-            <td class="link"></td>
-            <th class="size text-nowrap" scope="col">Size</th>
-            <th class="checksum" scope="col"><span class="d-none d-lg-inline">SHA-256 checksum</span></th>
-        </tr>
-    </thead>
-    <tbody>
+    <div class="download-grid grid-striped" role="table">
+        <div class="item-header fw-bold"role="row">
+            <div class="col-package" role="columnheader">Package</div>
+            <div class="col-link" role="columnheader"></div>
+            <div class="col-size" role="columnheader">Size</div>
+            <div class="col-checksum" role="columnheader"><span class="d-none d-lg-inline">SHA-256 checksum</span></div>
+        </div>
         {% for package in params.packages %}
-            <tr>
-                <th class="package fw-normal" scope="row">{{ package.version }} - {{ package.package }}{% if package.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</th>
-                <td class="link text-center text-lg-start"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
-                <td class="size text-nowrap">{{ package.size }}</td>
-                <td class="checksum font-monospace text-nowrap text-center text-lg-start pe-3">
+            <div class="item-content" role="row">
+                <div class="col-package" role="rowheader">{{ package.version }} - {{ package.package }}{% if package.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</div>
+                <div class="col-link" role="cell"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></div>
+                <div class="col-size" role="cell">{{ package.size }}</div>
+                <div class="col-checksum" role="cell">
                     <span class="d-none d-lg-inline copy-popover-target">
-                        <span class="copy-target d-block d-lg-inline text-nowrap overflow-auto py-3 py-lg-0">{{ package.checksum }}</span><span class="py-3 py-lg-0"><a class="copy-link" href="#" aria-label="Copy text"></a></span>
+                        <span class="copy-target d-block d-md-inline-block overflow-hidden text-nowrap text-truncate py-3 py-lg-0">{{ package.checksum }}</span><span class="py-3 py-lg-0 ps-1"><a class="copy-link align-top" href="#" aria-label="Copy text"></a></span>
                     </span>
                     <a class="d-inline d-lg-none copy-popover-link checksum" href="#" aria-label="SHA-256 checksum" onclick="return false;" data-bs-title="SHA-256 checksum" data-bs-placement="left"></a>
-                </td>
-            </tr>
+                </div>
+            </div>
         {% endfor %}
-    </tbody>
-    </table>
+    </div>
 {% endfor %}
 
 <p id="fn1" class="text-body-secondary">1. Dependent packages only contain sources which are licensed under the GPL but they require some third-party

styles/styles.less

@@ -3,10 +3,13 @@
 @nav-offset: 6rem;
 @thumbnail-width: 140px;
 
+@max-width-xxl: 1399px;
 @max-width-md: 991px;
 @max-width-sm: 767px;
 @max-width-xs: 575px;
 
+@min-width-lg: 992px;
+
 @color-primary: #37beff;
 @color-background-alt: rgba(0, 0, 0, 0.05);
 @color-header-background: #212529;
@@ -52,10 +55,6 @@ html[data-bs-theme="dark"] {
   --bs-navbar-toggler-padding-x: 0;
 }
 
-.table {
-  --bs-table-striped-bg: var(--rc-color-background-alt);
-}
-
 .bg-quote,
 .bg-badge {
   background-color: var(--rc-color-background-alt) !important;
@@ -449,58 +448,37 @@ div.color-modes > ul.dropdown-menu {
   }
 }
 
-table.download-table {
-  th.package {
-    width: 30%;
-  }
+div.download-grid {
+  display: grid;
+  grid-template-columns: 30% 12% 10% 48%;
 
-  td.link,
-  td.size {
-    width: 12%;
-  }
+  div.item-header,
+  div.item-content {
+    display: contents;
 
-  td.checksum {
-    font-size: 0.9em;
+    > div {
+      padding: .5rem;
+      border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+    }
   }
 
-  tbody th,
-  tbody td {
-    vertical-align: middle;
+  &.grid-striped > div:nth-of-type(even) > div {
+    background-color: var(--rc-color-background-alt);
   }
 
-  @media (max-width: @max-width-md) {
-    th.package {
-      width: 40%;
-    }
-
-    td.link {
-      width: 35%;
-    }
+  @media (min-width: @min-width-lg) and (max-width: @max-width-xxl) {
+    grid-template-columns: 30% 15% 10% 43%;
 
-    td.size {
-      width: 20%;
+    div.col-checksum span.copy-target {
+      max-width: 90%;
     }
+  }
 
-    td.checksum {
-      width: 5%;
-    }
+  @media (max-width: @max-width-md) {
+    grid-template-columns: 50% 25% 15% 10%;
   }
 
   @media (max-width: @max-width-xs) {
-    th.package {
-      width: 55%;
-    }
-
-    td.link {
-      width: 20%;
-    }
-
-    td.size {
-      width: 20%;
-    }
-
-    td.checksum {
-      width: 5%;
-    }
+    grid-template-columns: 57% 13% 21% 9%;
   }
 }