Compact the Download page header

i18n/ca/code.json

@@ -62,9 +62,6 @@
   "homepage.download.install.link": {
     "message": "Guia d'inici ràpid"
   },
-  "homepage.download.lead": {
-    "message": "aMule està disponible per a la majoria de plataformes d'escriptori principals."
-  },
   "homepage.download.macos.dmg.label": {
     "message": "Imatge de disc (.dmg)"
   },
@@ -86,9 +83,6 @@
   "homepage.download.version.date": {
     "message": "Publicat {date}"
   },
-  "homepage.download.version.label": {
-    "message": "Última versió"
-  },
   "homepage.download.windows.installer.label": {
     "message": "Instal·lador (.exe)"
   },

i18n/en/code.json

@@ -43,10 +43,6 @@
     "message": "Quick Start guide",
     "description": "Name of the Quick Start guide on the download page (bold text and button label)"
   },
-  "homepage.download.lead": {
-    "message": "aMule is available for most major desktop platforms.",
-    "description": "Intro line above the per-OS download panels"
-  },
   "homepage.download.linux.appimage.label": {
     "message": "AppImage",
     "description": "Label for the Linux AppImage download format"
@@ -131,10 +127,6 @@
     "message": "Released {date}",
     "description": "Release date line on the download page; {date} is the localized release date"
   },
-  "homepage.download.version.label": {
-    "message": "Latest version",
-    "description": "Badge next to the version number marking it as the latest release"
-  },
   "homepage.download.windows.installer.label": {
     "message": "Installer (.exe)",
     "description": "Label for the Windows installer download format"

i18n/es/code.json

@@ -41,9 +41,6 @@
   "homepage.download.install.link": {
     "message": "guía de inicio rápido"
   },
-  "homepage.download.lead": {
-    "message": "aMule está disponible para las principales plataformas de escritorio."
-  },
   "homepage.download.linux.appimage.label": {
     "message": "AppImage"
   },
@@ -107,9 +104,6 @@
   "homepage.download.version.date": {
     "message": "Publicado el {date}"
   },
-  "homepage.download.version.label": {
-    "message": "Última versión"
-  },
   "homepage.download.windows.installer.label": {
     "message": "Instalador (.exe)"
   },

i18n/fr/code.json

@@ -41,9 +41,6 @@
   "homepage.download.install.link": {
     "message": "Guide de démarrage rapide"
   },
-  "homepage.download.lead": {
-    "message": "aMule est disponible pour la plupart des plateformes de bureau majeures."
-  },
   "homepage.download.linux.appimage.label": {
     "message": "AppImage"
   },
@@ -107,9 +104,6 @@
   "homepage.download.version.date": {
     "message": "Publiée le {date}"
   },
-  "homepage.download.version.label": {
-    "message": "Version la plus récente"
-  },
   "homepage.download.windows.installer.label": {
     "message": "Installeur (.exe)"
   },

i18n/it/code.json

@@ -56,18 +56,12 @@
   "homepage.download.pageDescription": {
     "message": "Scarica aMule per Windows, macOS, Linux o compilalo dai sorgenti."
   },
-  "homepage.download.version.label": {
-    "message": "Ultima versione"
-  },
   "homepage.download.version.date": {
     "message": "Rilasciata il {date}"
   },
   "homepage.download.version.changelog": {
     "message": "Changelog"
   },
-  "homepage.download.lead": {
-    "message": "aMule è disponibile per la maggior parte delle principali piattaforme desktop."
-  },
   "homepage.download.foot": {
     "message": "Tutti gli artefatti sono disponibili nella {release}. aMule è disponibile anche nei repository delle {distros}, anche se i pacchetti potrebbero essere obsoleti."
   },

i18n/lv/code.json

@@ -83,9 +83,6 @@
   "homepage.download.source.os": {
     "message": "Pirmkods"
   },
-  "homepage.download.version.label": {
-    "message": "Jaunākā versija"
-  },
   "homepage.download.windows.installer.label": {
     "message": "Uzstādīšanas programma (.exe)"
   },
@@ -203,9 +200,6 @@
   "homepage.download.foot.link": {
     "message": "jaunākās versijas izlaiduma lapā"
   },
-  "homepage.download.lead": {
-    "message": "aMule ir pieejama nozīmīgākajām darbvirsmas operētājsistēmām."
-  },
   "homepage.download.version.date": {
     "message": "Publicēts {date}"
   },

i18n/pt-BR/code.json

@@ -23,9 +23,6 @@
   "homepage.download.previous.body": {
     "message": "As versões anteriores estão arquivadas no {github} e na {sourceforge}."
   },
-  "homepage.download.lead": {
-    "message": "O aMule está disponível para a maioria das principais plataformas de desktop."
-  },
   "homepage.download.macos.dmg.label": {
     "message": "Imagem de disco (.dmg)"
   },
@@ -53,9 +50,6 @@
   "homepage.download.compile": {
     "message": "O {link} tem instruções para compilar o aMule a partir do código fonte."
   },
-  "homepage.download.version.label": {
-    "message": "Versão mais recente"
-  },
   "homepage.download.windows.os": {
     "message": "Windows"
   },

i18n/ru/code.json

@@ -104,9 +104,6 @@
   "theme.SearchBar.seeAll": {
     "message": "Показать все результаты"
   },
-  "homepage.download.lead": {
-    "message": "aMule доступен для большинства основных настольных платформ."
-  },
   "homepage.download.arch.x64": {
     "message": "x64"
   },
@@ -293,9 +290,6 @@
   "theme.blog.author.noPosts": {
     "message": "Этот автор ещё не написал ни одной статьи."
   },
-  "homepage.download.version.label": {
-    "message": "Последняя версия"
-  },
   "homepage.features.corruptionHandling.title": {
     "message": "Обработка повреждений"
   },

i18n/tr/code.json

@@ -41,9 +41,6 @@
   "homepage.download.install.link": {
     "message": "Hızlı başlangıç kılavuzu"
   },
-  "homepage.download.lead": {
-    "message": "aMule, hatırı sayılır masaüstü platformlarının çoğu için mevcuttur."
-  },
   "homepage.download.linux.appimage.label": {
     "message": "AppImage"
   },
@@ -107,9 +104,6 @@
   "homepage.download.version.date": {
     "message": "Yayınlanma tarihi: {date}"
   },
-  "homepage.download.version.label": {
-    "message": "En yeni sürüm"
-  },
   "homepage.download.windows.installer.label": {
     "message": "Kurulum Programı (.exe)"
   },

i18n/zh_Hans/code.json

@@ -11,9 +11,6 @@
   "homepage.download.title": {
     "message": "下载"
   },
-  "homepage.download.lead": {
-    "message": "aMule 适用于大多数主流桌面平台。"
-  },
   "homepage.download.arch.x64": {
     "message": "x64"
   },
@@ -164,9 +161,6 @@
   "homepage.tagline": {
     "message": "跨平台兼容 eMule 的 eD2k/Kad 客户端"
   },
-  "homepage.download.version.label": {
-    "message": "最新版本"
-  },
   "homepage.features.categories.title": {
     "message": "下载分类"
   },

src/pages/download.module.css

@@ -27,33 +27,41 @@
 /* ---- Hero: title and latest version ---- */
 
 .hero {
-  padding: 4rem 0 2.5rem;
+  padding: 2.5rem 0 2rem;
   text-align: center;
 }
 
 .title {
-  font-size: 3.25rem;
+  font-size: 2.75rem;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.1;
   color: var(--ifm-heading-color);
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
-.versionRow {
+.versionMeta {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: baseline;
   flex-wrap: wrap;
-  gap: 0.5rem 0.75rem;
-  margin-bottom: 0.5rem;
+  gap: 0.25rem 1.25rem;
+  color: var(--ifm-color-emphasis-700);
+  margin: 0;
 }
 
-.versionNumber {
-  font-size: 2rem;
+.nowrap {
+  white-space: nowrap;
+}
+
+.versionMeta a {
+  font-weight: 600;
+}
+
+.versionMeta .versionNumber {
+  font-size: 1.25rem;
   font-weight: 800;
   letter-spacing: -0.02em;
-  line-height: 1.2;
   background: linear-gradient(90deg, var(--ifm-color-primary-darker), var(--ifm-color-primary-lighter));
   background-clip: text;
   color: transparent;
@@ -64,37 +72,6 @@
   opacity: 0.85;
 }
 
-.versionBadge {
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 0.25rem 0.6rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--ifm-color-primary) 15%, transparent);
-  color: var(--dl-accent);
-}
-
-.versionMeta {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.5rem;
-  color: var(--ifm-color-emphasis-700);
-  margin-bottom: 1.25rem;
-}
-
-.versionMeta a {
-  font-weight: 600;
-}
-
-.lead {
-  font-size: 1.1rem;
-  color: var(--ifm-color-emphasis-700);
-  margin: 0 auto;
-  max-width: 600px;
-}
-
 /* ---- Cards (shared by OS panels, "other ways" and previous releases) ---- */
 
 .card {
@@ -426,10 +403,6 @@
 }
 
 @media (max-width: 600px) {
-  .hero {
-    padding-top: 2.5rem;
-  }
-
   .osList {
     grid-template-columns: 1fr;
     grid-template-areas: 'win' 'mac' 'linux' 'src';
@@ -441,11 +414,20 @@
   }
 
   .title {
-    font-size: 2.5rem;
+    font-size: 2.25rem;
   }
 
-  .versionNumber {
-    font-size: 1.6rem;
+  .versionMeta {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .nowrap {
+    display: block;
+  }
+
+  .separator {
+    display: none;
   }
 
   .blockTitle {

src/pages/download.tsx

@@ -199,33 +199,29 @@ export default function DownloadPage(): React.JSX.Element {
           <h1 className={styles.title}>
             <Translate id="homepage.download.title" description="Download page title and main heading">Download</Translate>
           </h1>
-          <div className={styles.versionRow}>
+          {/* Version, date and changelog on one line: this page is for acting, keep the downloads above the fold */}
+          <p className={styles.versionMeta}>
             <Link className={styles.versionNumber} to={RELEASES_URL}>
               aMule {LATEST_VERSION}
             </Link>
-            <span className={styles.versionBadge}>
-              <Translate id="homepage.download.version.label" description="Badge next to the version number marking it as the latest release">Latest version</Translate>
-            </span>
-          </div>
-          <p className={styles.versionMeta}>
+            {/* The "·" stays glued to the changelog link; on phones the three parts stack and the "·" is hidden */}
             <span>
-              <Translate
-                id="homepage.download.version.date"
-                description="Release date line on the download page; {date} is the localized release date"
-                values={{date: formatDate(LATEST_DATE, currentLocale)}}
-              >
-                {'Released {date}'}
-              </Translate>
+              <span>
+                <Translate
+                  id="homepage.download.version.date"
+                  description="Release date line on the download page; {date} is the localized release date"
+                  values={{date: formatDate(LATEST_DATE, currentLocale)}}
+                >
+                  {'Released {date}'}
+                </Translate>
+              </span>{' '}
+              <span className={styles.nowrap}>
+                <span className={styles.separator} aria-hidden="true">·</span>{' '}
+                <Link to={CHANGELOG_URL}>
+                  <Translate id="homepage.download.version.changelog" description="Link to a release's changelog on the download page">Changelog</Translate>
+                </Link>
+              </span>
             </span>
-            <span aria-hidden="true">·</span>
-            <Link to={CHANGELOG_URL}>
-              <Translate id="homepage.download.version.changelog" description="Link to a release's changelog on the download page">Changelog</Translate>
-            </Link>
-          </p>
-          <p className={styles.lead}>
-            <Translate id="homepage.download.lead" description="Intro line above the per-OS download panels">
-              aMule is available for most major desktop platforms.
-            </Translate>
           </p>
         </header>