feat: revamp download section on landing page for better visibility

Replaced the "Other downloads" details element with a more accessible layout that displays all platform download links directly. Enhanced styling for the download links to improve user experience and visibility. Added functionality to prevent duplicate download options from appearing based on the selected platform. Updated CSS for improved layout and interaction.

Author: adarshaacharya

apps/landing/index.html

@@ -78,16 +78,14 @@ <h1>All of Nepal, on your menu bar.</h1>
           Download for macOS
         </a>
         <p class="download-note">Free and open source · macOS, Windows, Linux</p>
-        <details class="other-platforms" id="other-platforms">
-          <summary>Other downloads</summary>
-          <div class="other-platforms-links">
-            <a href="/dl/macos-arm64">macOS (Apple Silicon)</a>
-            <a href="/dl/macos-x64">macOS (Intel)</a>
-            <a href="/dl/windows">Windows</a>
-            <a href="/dl/linux-deb">Linux (.deb)</a>
-            <a href="/dl/linux-appimage">Linux (AppImage)</a>
-          </div>
-        </details>
+        <div class="other-platforms" id="other-platforms">
+          <span class="other-platforms-label">Also for</span>
+          <a href="/dl/macos-arm64" data-platform="macos-arm64">macOS (Apple Silicon)</a>
+          <a href="/dl/macos-x64" data-platform="macos-x64">macOS (Intel)</a>
+          <a href="/dl/windows" data-platform="windows">Windows</a>
+          <a href="/dl/linux-deb" data-platform="linux-deb">Linux (.deb)</a>
+          <a href="/dl/linux-appimage" data-platform="linux-appimage">Linux (AppImage)</a>
+        </div>
       </div>
     </div>
 
@@ -286,9 +284,21 @@ <h3>Linux</h3>
     var MAC_ARM = { href: "/dl/macos-arm64", label: "Download for macOS (Apple Silicon)" };
     var MAC_INTEL = { href: "/dl/macos-x64", label: "Download for macOS (Intel)" };
 
+    // The row below the button lists every other platform. Whichever one the
+    // button itself already offers is dropped from it, so the same download is
+    // never presented twice.
+    function dedupe() {
+      var current = btn.getAttribute("href");
+      var links = document.querySelectorAll("#other-platforms a");
+      for (var i = 0; i < links.length; i++) {
+        links[i].hidden = links[i].getAttribute("href") === current;
+      }
+    }
+
     function setMac(target) {
       btn.href = target.href;
       btn.textContent = target.label;
+      dedupe();
     }
 
     if (isMac) {
@@ -337,12 +347,26 @@ <h3>Linux</h3>
       }
     }
 
+    // Scrolls the track and nothing else. `scrollIntoView` walks every
+    // scrollable ancestor including the page, so with autoplay running it
+    // dragged the whole document downwards every few seconds.
+    function centreSlide(index) {
+      var slide = slides[index];
+      var offset = slide.offsetLeft - (track.clientWidth - slide.clientWidth) / 2;
+      var left = Math.max(0, Math.min(offset, track.scrollWidth - track.clientWidth));
+      if (track.scrollTo) {
+        track.scrollTo({ left: left, behavior: reduceMotion ? "auto" : "smooth" });
+      } else {
+        track.scrollLeft = left;
+      }
+    }
+
     function setActive(i, loop) {
       current = loop
         ? (i + slides.length) % slides.length
         : Math.max(0, Math.min(slides.length - 1, i));
       updateChrome();
-      slides[current].scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+      centreSlide(current);
     }
 
     function syncCurrentFromScroll() {

apps/landing/style.css

@@ -326,53 +326,55 @@ img {
   color: var(--text-muted);
 }
 
+/* Every platform on show, not folded away behind a disclosure. Two in five
+   visitors are not on the Mac the big button offers, and asking them to notice
+   a grey "Other downloads" line first is asking too much. */
 .other-platforms {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 12px;
   font-size: 13px;
   color: var(--text-muted);
 }
 
-.other-platforms summary {
-  cursor: pointer;
-  list-style: none;
+.other-platforms-label {
   color: var(--text-muted);
-  border-bottom: 1px dotted var(--border);
-  width: max-content;
-  transition: color 0.15s var(--ease-out-quart);
-}
-
-.other-platforms summary::-webkit-details-marker {
-  display: none;
-}
-
-.other-platforms summary:hover {
-  color: var(--gold);
-}
-
-.other-platforms-links {
-  display: flex;
-  gap: 6px 14px;
-  flex-wrap: wrap;
-  padding-top: 10px;
 }
 
 @media (max-width: 900px) {
-  .other-platforms summary {
-    margin-inline: auto;
-  }
-
-  .other-platforms-links {
+  .other-platforms {
     justify-content: center;
   }
 }
 
+/* Chips rather than a run of links: five plain anchors in a row read as one
+   sentence, and the reader cannot see where one download ends and the next
+   begins. */
 .other-platforms a {
-  color: var(--text-muted);
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 11px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface-raised);
+  color: var(--text-secondary);
   text-decoration: none;
-  border-bottom: 1px dotted color-mix(in srgb, var(--border) 100%, transparent);
+  white-space: nowrap;
+  transition: color 0.15s var(--ease-out-quart),
+    border-color 0.15s var(--ease-out-quart),
+    background-color 0.15s var(--ease-out-quart);
 }
 
 .other-platforms a:hover {
   color: var(--gold);
+  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
+  background: var(--surface-hover);
+}
+
+/* The platform the big button already offers. */
+.other-platforms a[hidden] {
+  display: none;
 }
 
 .hero-shot {