Add support for multiarch downloads in 8.1 (#3922)

* Add download options for Intel, AMD, and ARM 64-bit

* Refactor dialog styles for better option layout

* Reorder release information in config example

* Refactor dialog option styles for better specificity

* Adjust dialog option margins and styles

Updated margin styles for dialog options and titles.

* Revise download modal content for clarity

Updated the download modal text to clarify the choice of OS variant.

* Increase max-width of dialog paragraph

* Update download modal title for clarity

* Add close button to download modal in index.php

* Remove padding-top from main.css

Removed extra padding-top from the element.

Author: lewisgoddard

_backend/config.example.php

@@ -6,11 +6,16 @@
 return array(
   'release_title'    => 'Circe',
   'release_version'  => '8.1',
-  'release_filename' => 'elementaryos-8.1-stable-amd64.20251211.iso',
   'release_size'     => '3.3 GB',
+  'release_faq'      => 'https://github.com/elementary/os/wiki/OS-8-FAQ',
+
+  'release_filename' => 'elementaryos-8.1-stable-amd64.20251211.iso',
   'release_magnet'   => 'addc43b83201d733d7558e431b692c10e2f53f84',
   'release_sha256'   => 'eee6cad081664717681bec767fbfe1aa1fd920938fedad6c83b41fd341e8f306',
-  'release_faq'      => 'https://github.com/elementary/os/wiki/OS-8-FAQ',
+  
+  'release_arm_filename' => 'elementaryos-8.1-stable-arm64.20251211.iso',
+  'release_arm_magnet'   => '2be4ebcb8a5c60b230f0e9eab9fdaf80694a2395dc2a7b128321f8354253046a',
+  'release_arm_sha256'   => 'b52b2a0195015e351db1ac1183f5d9263db9a254',
 
   'previous_title'    => 'Circe',
   'previous_version'  => '8.0.2',

_styles/main.css

@@ -1046,7 +1046,6 @@ So that for browsers that dont we can have a sensible inline style that can be a
     0 3px 28px 2px rgba(0, 0, 0, 0.12),
     0 5px 10px -3px rgba(0, 0, 0, 0.4);
   padding: 12px;
-  padding-top: 24px;
   text-align: initial;
 }
 
@@ -1084,18 +1083,30 @@ So that for browsers that dont we can have a sensible inline style that can be a
   margin: 0 auto;
   text-align: left;
   line-height: 24px;
-  max-width: 380px;
+  max-width: 420px;
 }
 
 .dialog[open] p {
   margin: 6px 0 0;
 }
 
-.dialog .action-area {
-  margin-top: 12px;
+.dialog .dialog-option {
+  margin: 24px 0 12px;
+}
+
+.dialog .dialog-option-title {
+  opacity: 0.8;
+  font-size: 0.8em;
+  margin: 0;
 }
 
-.dialog[open] .action-area {
+.dialog p.dialog-option-subtitle {
+  opacity: 0.7;
+  font-size: 0.7em;
+  margin: 0;
+}
+
+.dialog[open] .dialog-option {
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
@@ -1112,12 +1123,20 @@ So that for browsers that dont we can have a sensible inline style that can be a
   white-space: nowrap;
 }
 
-.dialog .action-area > .button + .button,
-.dialog .action-area > .button + .linked {
+.dialog .dialog-option > .button + .button,
+.dialog .dialog-option > .button + .linked {
   margin: 0;
   margin-left: 6px;
 }
 
+.dialog .dialog-option > .download-link.http {
+  margin-left: auto;
+}
+
+.dialog .dialog-option > .download-link.magnet {
+  flex: 0 auto;
+}
+
 /* If the dialog is inline hide the close button */
 .dialog .close-modal {
   display: none;

index.php

@@ -468,16 +468,28 @@
     <span id="translate-download" style="display:none;" hidden>Download elementary OS</span>
     <span id="translate-purchase" style="display:none;" hidden>Purchase elementary OS</span>
     <dialog id="download-modal" class="dialog" aria-labelledby="download-modal-title">
+      <a class="js-close-button clickable close-modal"><img src="images/pantheon/actions/window-close.svg"></a>
       <img src="images/icons/apps/48/system-os-installer.svg" alt=""/>
       <div class="content-area">
-        <h2 id="download-modal-title" class="dialog-title">Choose a Download</h2>
-        <p>Download from a localized server or by magnet link. For help and more info, see the <a class="read-more" href="docs/installation" target="_blank" rel="noopener">installation guide</a></p>
-      </div>
-      <div class="action-area">
-        <button class="js-close-button button clickable close-modal">Close</button>
-        <div class="linked">
-          <a class="button suggested-action download-link http" href="<?php echo $download_link.$config['release_filename']; ?>">Download</a>
-          <a class="button suggested-action download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
+        <h2 id="download-modal-title" class="dialog-title">Download elementary OS</h2>
+        <p>Choose the variant of elementary OS for your computer's processor architecture.</p>
+        <p>For help and more info, see the <a class="read-more" href="docs/installation" target="_blank" rel="noopener">installation guide</a></p>
+        <hr>
+        <div class="dialog-option">
+          <div class="dialog-option-description">
+            <h3 class="dialog-option-title">Intel or AMD 64-bit</h3>
+            <p class="dialog-option-subtitle">Most PCs and older Macs</p>
+          </div>
+          <a class="button download-link http" href="<?php echo $download_link.$config['release_filename']; ?>">Download</a>
+          <a class="button download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
+        </div>
+        <div class="dialog-option">
+          <div class="dialog-option-description">
+            <h3 class="dialog-option-title">ARM 64-bit</h3>
+            <p class="dialog-option-subtitle">Apple Silicon, Raspberry Pi, etc</p>
+          </div>
+          <a class="button download-link http" href="<?php echo $download_link.$config['release_arm_filename']; ?>">Download</a>
+          <a class="button download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_arm_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
         </div>
       </div>
     </dialog>