Improve downloads page by using icons per platform (#271)

Closes #227

Signed-off-by: Manuel Rego Casasnovas <[email protected]>

Author: mrego

_data/downloads.json

@@ -1,42 +1,49 @@
 [
   {
     "key": "windows-exe",
+    "icon": "windows",
     "name": "Windows EXE",
     "href": "nightly/windows-msvc/servo-latest.exe",
     "sha256": "nightly/windows-msvc/servo-latest.exe.sha256"
   },
   {
     "key": "windows-zip",
+    "icon": "windows",
     "name": "Windows ZIP",
     "href": "nightly/windows-msvc/servo-latest.zip",
     "sha256": "nightly/windows-msvc/servo-latest.zip.sha256"
   },
   {
     "key": "mac",
+    "icon": "apple",
     "name": "macOS (x64)",
     "href": "nightly/mac/servo-latest.dmg",
     "sha256": "nightly/mac/servo-latest.dmg.sha256"
   },
   {
     "key": "mac-arm64",
+    "icon": "apple",
     "name": "macOS (aarch64)",
     "href": "nightly/mac-arm64/servo-aarch64-apple-darwin.dmg",
     "sha256": "nightly/mac-arm64/servo-aarch64-apple-darwin.dmg.sha256"
   },
   {
     "key": "linux",
+    "icon": "linux",
     "name": "Linux (x64)",
     "href": "nightly/linux/servo-x86_64-linux-gnu.tar.gz",
     "sha256": "nightly/linux/servo-x86_64-linux-gnu.tar.gz.sha256"
   },
   {
     "key": "android-aarch64-apk",
+    "icon": "android",
     "name": "Android (aarch64)",
     "href": "nightly/android/servo-latest.apk",
     "sha256": "nightly/android/servo-latest.apk.sha256"
   },
   {
     "key": "ohos-aarch64-hap",
+    "icon": "/img/open-harmony-icon.svg",
     "name": "OpenHarmony (aarch64)",
     "href": "nightly/ohos/servo-latest.hap",
     "sha256": "nightly/ohos/servo-latest.hap.sha256"

_includes/downloads-list.html

@@ -1,9 +1,69 @@
 <div class="downloads">
+  <ul>
   {% for download in downloads %}
-    <div class="buttons">
-      <a rel="nofollow" role="button" class="button" href="https://download.servo.org/{{download.href}}" style="width: 22ch;">{{download.name}}</a>
-      <span class="button is-static" disabled id="date-{{download.key}}" style="width: 10ch;">?</span>
-      <a rel="nofollow" role="button" class="button" style="width: 7ch;" href="https://download.servo.org/{{download.sha256}}">sha256</a>
-    </div>
+    <li class="download-item">
+      <a class="main-link" rel="nofollow" href="https://download.servo.org/{{download.href}}">
+        {% if download.icon contains "/" %}
+          <img src="{{ download.icon }}" alt="{{ download.name }} icon" />
+        {% else %}
+          <i class="fa-brands fa-{{ download.icon }}"></i>
+        {% endif %}
+        <h2>{{ download.name }}</h2>
+      </a>
+      <span id="date-{{download.key}}">?</span>
+      <a rel="nofollow" role="button" class="button" href="https://download.servo.org/{{download.sha256}}">sha256</a>
+    </li>
   {% endfor %}
+  </ul>
 </div>
+
+<style>
+  .downloads > ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .download-item {
+    width: 170px;
+    height: 200px;
+    flex: 0 0 170px;
+    padding: 10px;
+    text-align: center;
+    margin: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .download-item > a.main-link {
+    height: 100px;
+  }
+
+  .download-item > a > img {
+    width: 50px;
+    height: 50px;
+    margin: auto;
+  }
+
+  .download-item > a > i {
+    font-size: 2.5em;
+    color: black;
+  }
+
+  .download-item > a > h2 {
+    font-size: 1.2em;
+    padding: 0;
+  }
+
+  .download-item > span {
+    font-size: 80%;
+  }
+
+  .download-item > a.button {
+    width: fit-content;
+  }
+</style>