roundcube · johndoh · Feb 15, 2026 · Mar 8, 2026 · Mar 8, 2026
diff --git a/_bin/generate-downloads-json-data.php b/_bin/generate-downloads-json-data.php
@@ -31,6 +31,7 @@ function generate_data($version, $package_name, $basedir, $filename)
     return [
         'package' => $package_name,
         'url' => "https://github.com/roundcube/roundcubemail/releases/download/{$version}/{$filename}",
+        'version' => $version,
         'size' => $size,
         'checksum' => $sum,
     ];

diff --git a/_config.yml b/_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=2024021800',
+    css: '/styles/styles.min.css?v=2026030800',
     bootstrap: {
         css: {
             url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',

diff --git a/_data/releases.json → _data/downloads.json b/_data/releases.json → _data/downloads.json
@@ -1,64 +1,76 @@
 {
     "stable": {
-        "name": "Stable version",
-        "version": "1.6.13",
-        "sources": [
+        "title": "Stable",
+        "packages": [
             {
                 "package": "Dependent",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.6.13/roundcubemail-1.6.13.tar.gz",
+                "version": "1.6.13",
                 "size": "3.7 MB",
                 "checksum": "1ee6a0877024b6ee73bda5050686487af7bc88301b2af3355a46c4ce8e327180"
             },
             {
                 "package": "Complete",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.6.13/roundcubemail-1.6.13-complete.tar.gz",
+                "version": "1.6.13",
                 "size": "5.6 MB",
                 "checksum": "bdd1bafe79149a6b63f699fa94e7626189ec60e2c37954de7e84ee685dbbf5bb"
             },
             {
                 "package": "Framework",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.6.13/roundcube-framework-1.6.13.tar.gz",
+                "version": "1.6.13",
                 "size": "1.1 MB",
                 "checksum": "61a92c3152293f0e8401406e855a57ad8bea5b3f4b647565babe42658bbcddf8"
             }
         ]
     },
     "old-stable": {
-        "name": "Old stable",
-        "version": "1.5.3",
-        "sources": [
+        "title": "Old Stable",
+        "packages": [
         ]
     },
     "lts": {
-        "name": "LTS versions",
-        "sources": [
+        "title": "LTS",
+        "description": "Long Term Support with low maintenance mode. This means only security updates and rare fixes of serious issues will go into these release branches.",
+        "packages": [
             {
-                "package": "1.5.13 - Complete",
+                "package": "Complete",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.5.13/roundcubemail-1.5.13-complete.tar.gz",
+                "version": "1.5.13",
                 "size": "7.2 MB",
                 "checksum": "37a8309882d782fa0b39d0f6e1efaa443b96e720e9e2c51106fb230926cca2f9"
             }
         ]
     },
     "beta": {
-        "name": "Release candidate",
-        "version": "1.7-rc4",
-        "sources": [
+        "title": "Beta",
+        "description": "We recommend to test pre-release versions on a separate environment, and don't forget to backup your data before installing.",
+        "packages": [
+        ]
+    },
+    "rc": {
+        "title": "Release Candidate",
+        "description": "We recommend to test pre-release versions on a separate environment, and don't forget to backup your data before installing.",
+        "packages": [
             {
                 "package": "Dependent",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.7-rc4/roundcubemail-1.7-rc4.tar.gz",
+                "version": "1.7-rc4",
                 "size": "4.0 MB",
                 "checksum": "bf148cfd31195fec70e3f285221128a14ace619c61155c6c6f88d0d75edaf776"
             },
             {
                 "package": "Complete",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.7-rc4/roundcubemail-1.7-rc4-complete.tar.gz",
+                "version": "1.7-rc4",
                 "size": "6.1 MB",
                 "checksum": "a2a5aa6e0be3a7ab2290f193f233560dd3ef183bd3cd52de415a7b7ac9b6cb1e"
             },
             {
                 "package": "Framework",
                 "url": "https://github.com/roundcube/roundcubemail/releases/download/1.7-rc4/roundcube-framework-1.7-rc4.tar.gz",
+                "version": "1.7-rc4",
                 "size": "1.1 MB",
                 "checksum": "9ee4f4d3ce39a72de9dc23aee57fe4579b9c20e37b1b8899df73340f49335697"
             }

diff --git a/_includes/footer.html b/_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'
         });

diff --git a/download/index.html b/download/index.html
@@ -6,48 +6,39 @@
 ---
 <h1>Download your version of Roundcube</h1>
 
-{% for version in site.data.releases %}
-    {% assign id = version | first %}
-    {% assign params = version | last %}
-
-    {% if params.sources.size == 0 %}
+{% for downlad in site.data.downloads %}
+    {% assign id = downlad | first %}
+    {% assign params = downlad | last %}
+    {% if params.packages.size == 0 %}
         {% continue %}
     {% endif %}
+    <h2 id="{{ id }}">{{ params.title }} <a class="anchor" href="#{{ id }}" aria-label="Link to this section: {{ params.title }}"></a></h2>
 
-    <h2 id="{{ id }}">{{ params.name }}{% if params.version %} - {{ params.version }}{% endif %} <a class="anchor" href="#{{ id }}" aria-label="Link to this section: {{ id }}"></a></h2>
-
-    {% if id == "lts" %}
-        <p class="text-body-secondary mb-1">Long Term Support with low maintenance mode. This means only security updates and rare fixes of serious issues
-            will go into these release branches.</p>
-    {% elsif id == "beta" %}
-        <p class="text-body-secondary mb-1">We recommend to test beta versions on a separate environment, and don't forget to backup your data before installing.</p>
+    {% if params.description %}
+        <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>
-        {% for source in params.sources %}
-            <tr>
-                <th class="package fw-normal" scope="row">{{ source.package }}{% if source.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="{{ source.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
-                <td class="size text-nowrap">{{ source.size }}</td>
-                <td class="checksum font-monospace text-nowrap text-center text-lg-start pe-3">
+    <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 %}
+            <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 class="d-none d-sm-inline ms-0 ms-sm-1">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">{{ source.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

diff --git a/index.html b/index.html
@@ -15,8 +15,8 @@
                 <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png?g={{ generated }}" {% if site.data.screenshots[skin]['banner-dark'] %}data-rc-dark="/screens/skins/{{ skin }}/banner_dark.png?g={{ generated }}"{% endif %} width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
             </div>
             <div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
-                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!">Download</a>
-                <span class="version text-body-secondary">Version {{ site.data.releases.stable.version }}</span>
+                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!"><span class="ms-1">Download</span></a>
+                <span class="version text-body-secondary">Version {{ site.data.downloads.stable.packages[0].version }}</span>
             </div>
         </div>
     </div>

diff --git a/styles/styles.less b/styles/styles.less
@@ -3,9 +3,11 @@
 @nav-offset: 6rem;
 @thumbnail-width: 140px;
 
-@max-width-md: 991px;
-@max-width-sm: 767px;
-@max-width-xs: 575px;
+@min-width-sm: 576px;
+@min-width-md: 768px;
+@min-width-lg: 992px;
+@min-width-xl: 1200px;
+@min-width-xxl: 1400px;
 
 @color-primary: #37beff;
 @color-background-alt: rgba(0, 0, 0, 0.05);
@@ -52,10 +54,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;
@@ -98,25 +96,25 @@ a:not(.btn):not(.nav-link):not(.dropdown-item),
 
   > .container > .grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
 
     > .logo {
       grid-column: 1;
       grid-row: 1;
     }
 
     > .image {
-      grid-column: 2;
-      grid-row: 1 / 3;
+      grid-column: 1;
+      grid-row: 2;
     }
 
     > .download {
       grid-column: 1;
-      grid-row: 2;
+      grid-row: 3;
     }
 
-    @media (max-width: @max-width-md) {
+    @media (min-width: @min-width-md) {
       grid-template-columns: 1fr 1.5fr;
 
       > .logo {
@@ -135,23 +133,23 @@ a:not(.btn):not(.nav-link):not(.dropdown-item),
       }
     }
 
-    @media (max-width: @max-width-sm) {
-      grid-template-columns: auto;
-      grid-template-rows: auto;
+    @media (min-width: @min-width-lg) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
 
       > .logo {
         grid-column: 1;
         grid-row: 1;
       }
 
       > .image {
-        grid-column: 1;
-        grid-row: 2;
+        grid-column: 2;
+        grid-row: 1 / 3;
       }
 
       > .download {
         grid-column: 1;
-        grid-row: 3;
+        grid-row: 2;
       }
     }
   }
@@ -357,21 +355,8 @@ a.current-theme::after {
   }
 
   &::before {
-    margin-right: .5rem;
     content: @fa-var-download;
   }
-
-  &.btn-sm {
-    @media (max-width: @max-width-xs) {
-      & > span {
-        display: none;
-      }
-
-      &::before {
-        margin-right: 0;
-      }
-    }
-  }
 }
 
 div.color-modes > ul.dropdown-menu {
@@ -449,58 +434,41 @@ div.color-modes > ul.dropdown-menu {
   }
 }
 
-table.download-table {
-  th.package {
-    width: 20%;
-  }
+div.download-grid {
+  display: grid;
+  grid-template-columns: 57% 13% 21% 9%;
 
-  td.link,
-  td.size {
-    width: 15%;
-  }
+  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%;
-    }
-
-    td.size {
-      width: 20%;
-    }
-
-    td.checksum {
-      width: 5%;
-    }
+  @media (min-width: @min-width-sm) {
+    grid-template-columns: 50% 25% 15% 10%;
   }
 
-  @media (max-width: @max-width-xs) {
-    th.package {
-      width: 55%;
-    }
+  @media (min-width: @min-width-lg) {
+    grid-template-columns: 30% 15% 10% 43%;
 
-    td.link {
-      width: 20%;
+    div.col-checksum span.copy-target {
+      max-width: 90%;
     }
+  }
 
-    td.size {
-      width: 20%;
-    }
+  @media (min-width: @min-width-xxl) {
+    grid-template-columns: 30% 12% 10% 48%;
 
-    td.checksum {
-      width: 5%;
+    div.col-checksum span.copy-target {
+      max-width: none;
     }
   }
 }