commit 585e72079e3851188a07ed61f4f56148d9eca6bd
parent 5e121d17e1a8addff56c0263f6baded90aa2f12f
Author: Joris Hartog <jorishartog@hotmail.com>
Date: Tue, 8 Sep 2026 08:31:11 +0200
feat: highlight light wallet on downloads page
Diffstat:
2 files changed, 151 insertions(+), 4 deletions(-)
diff --git a/www/assets/static-listing.css b/www/assets/static-listing.css
@@ -325,6 +325,117 @@ body > h3 {
margin-bottom: 10px;
}
+.light-wallet-card {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ gap: 18px;
+ align-items: center;
+ overflow: hidden;
+ margin: 18px 0 32px;
+ border: 1px solid rgba(141, 233, 205, .38);
+ border-radius: 14px;
+ padding: 22px;
+ background:
+ radial-gradient(circle at 88% 20%, rgba(213, 245, 95, .13), transparent 34%),
+ linear-gradient(135deg, rgba(141, 233, 205, .1), rgba(21, 25, 27, .96) 54%);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
+}
+
+.light-wallet-card::after {
+ content: "";
+ position: absolute;
+ right: -54px;
+ bottom: -72px;
+ width: 180px;
+ height: 180px;
+ border: 1px solid rgba(213, 245, 95, .1);
+ border-radius: 50%;
+ pointer-events: none;
+}
+
+.light-wallet-icon {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ place-items: center;
+ width: 58px;
+ height: 58px;
+ border: 1px solid rgba(141, 233, 205, .32);
+ border-radius: 16px;
+ background: rgba(141, 233, 205, .09);
+ color: var(--cyan);
+}
+
+.light-wallet-icon svg {
+ width: 29px;
+ height: 29px;
+ fill: none;
+ stroke: currentColor;
+ stroke-width: 1.7;
+ stroke-linecap: round;
+}
+
+.light-wallet-copy {
+ position: relative;
+ z-index: 1;
+}
+
+.light-wallet-copy h2 {
+ margin: 7px 0 4px;
+ font-size: 22px;
+}
+
+.light-wallet-copy p {
+ max-width: 620px;
+ margin: 0;
+ font-size: 14px;
+}
+
+.light-wallet-tags {
+ display: flex;
+ gap: 9px;
+ align-items: center;
+}
+
+.light-wallet-tags .tag {
+ margin: 0;
+ border-color: rgba(141, 233, 205, .42);
+ color: var(--cyan);
+}
+
+.wallet-platform {
+ color: var(--muted);
+ font-size: 11px;
+ font-weight: 800;
+ letter-spacing: .04em;
+ text-transform: uppercase;
+}
+
+.light-wallet-button {
+ position: relative;
+ z-index: 1;
+ gap: 8px;
+ white-space: nowrap;
+}
+
+.download-heading {
+ display: flex;
+ justify-content: space-between;
+ align-items: end;
+ gap: 16px;
+ margin-top: 10px;
+}
+
+.download-heading h2 {
+ margin: 0 0 3px;
+}
+
+.download-heading p {
+ margin: 0;
+ font-size: 14px;
+}
+
.card {
min-width: 0;
border: 1px solid var(--line);
@@ -426,6 +537,14 @@ hr {
h1 { font-size: 34px; }
.grid { grid-template-columns: 1fr; }
.download-grid { grid-template-columns: 1fr; }
+ .light-wallet-card {
+ grid-template-columns: auto minmax(0, 1fr);
+ }
+ .light-wallet-button {
+ grid-column: 1 / -1;
+ justify-content: center;
+ width: 100%;
+ }
table { display: block; overflow-x: auto; }
}
diff --git a/www/downloads.html b/www/downloads.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#0d0f10">
- <meta name="description" content="Download the latest iuna node and desktop app releases for Linux, macOS, and Windows, with SHA-256 checksums.">
+ <meta name="description" content="Open the lightweight iuna mobile wallet or download the latest node and desktop app releases for Linux, macOS, and Windows.">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://getiuna.org/downloads/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@@ -13,7 +13,7 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta property="og:title" content="Download iuna">
- <meta property="og:description" content="Get the latest iuna node and desktop app releases for Linux, macOS, and Windows.">
+ <meta property="og:description" content="Use the lightweight iuna mobile wallet or get the latest node and desktop app releases.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getiuna.org/downloads/">
<meta property="og:site_name" content="iuna">
@@ -25,10 +25,10 @@
<meta property="og:image:alt" content="iuna — Help test a different kind of network">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Download iuna">
- <meta name="twitter:description" content="Get the latest iuna node and desktop app releases for Linux, macOS, and Windows.">
+ <meta name="twitter:description" content="Use the lightweight iuna mobile wallet or get the latest node and desktop app releases.">
<meta name="twitter:image" content="https://getiuna.org/assets/og.png">
<meta name="twitter:image:alt" content="iuna — Help test a different kind of network">
- <title>Download iuna for Linux, macOS, and Windows</title>
+ <title>iuna light wallet and node downloads</title>
<link rel="stylesheet" href="/assets/static-listing.css">
</head>
<body>
@@ -53,6 +53,34 @@
<p>Release artifacts for iuna <span data-download-version>${IUNA_VERSION}</span>.</p>
</section>
+ <aside class="light-wallet-card" aria-labelledby="light-wallet-title">
+ <div class="light-wallet-icon" aria-hidden="true">
+ <svg viewBox="0 0 24 24" focusable="false">
+ <rect x="7" y="2.5" width="10" height="19" rx="2.5"></rect>
+ <path d="M10 5.5h4M11 18.5h2"></path>
+ </svg>
+ </div>
+ <div class="light-wallet-copy">
+ <div class="light-wallet-tags">
+ <span class="tag">Light wallet</span>
+ <span class="wallet-platform">Mobile ready</span>
+ </div>
+ <h2 id="light-wallet-title">Just need a wallet?</h2>
+ <p>Send and receive IUNA from your phone or browser. No download and no node required—your encrypted seed stays on your device.</p>
+ </div>
+ <a class="button light-wallet-button" href="https://wallet.getiuna.org/">
+ Open light wallet
+ <span aria-hidden="true">↗</span>
+ </a>
+ </aside>
+
+ <div class="download-heading">
+ <div>
+ <h2>Run iuna</h2>
+ <p class="muted">Download the node and desktop software for your platform.</p>
+ </div>
+ </div>
+
<div class="grid download-grid" data-download-cards>
<article class="card">
<span class="tag pending">Checking</span>