downloads: Use notifications for boxes

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/download/release.html b/src/templates/download/release.html
index da54aabd63d42027ab9bb090185c5a313c3ec3e9..8cff9a920fdf5f126dcd96f96e0d13cb28c956e2 100644 (file)
--- a/src/templates/download/release.html
+++ b/src/templates/download/release.html
@@ -3,7 +3,7 @@
 {% block title %}{{ release }}{% end block %}
 
 {% block container %}
-       <section class="hero has-background-primary-light">
+       <section class="hero is-light">
                <div class="hero-body">
                        <div class="container">
                                <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
@@ -35,29 +35,30 @@
 
        <section class="section">
                <div class="container">
-                       <div class="columns is-multiline">
+                       <div class="columns">
                                {% for arch in release.arches %}
-                                       <div class="column is-one-third has-background-primary-light">
-                                               <h4 class="title is-4">{{ arch }}</h4>
+                                       <div class="column">
+                                               <div class="notification is-light">
+                                                       <h4 class="title is-4">{{ arch }}</h4>
 
-                                               <ul>
-                                                       {% for file in release.get_files_by_arch(arch) %}
-                                                               <li>
-                                                                       <a href="{{ file.url }}">
-                                                                               <span class="icon-text">
-                                                                                       <span class="icon">
-                                                                                               <i class="fas fa-download"></i>
+                                                       <ul>
+                                                               {% for file in release.get_files_by_arch(arch) %}
+                                                                       <li>
+                                                                               <a href="{{ file.url }}">
+                                                                                       <span class="icon-text">
+                                                                                               <span class="icon">
+                                                                                                       <i class="fas fa-download"></i>
+                                                                                               </span>
+                                                                                               <span>
+                                                                                                       {{ _(file.desc) }}
+                                                                                                       ({{ format_size(file.size) }})
+                                                                                               </span>
                                                                                        </span>
-                                                                                       <span>{{ _(file.desc) }}</span>
-                                                                               </span>
-
-                                                                               <small class="has-text-grey">
-                                                                                       {{ format_size(file.size) }}
-                                                                               </small>
-                                                                       </a>
-                                                               </li>
-                                                       {% end %}
-                                               </ul>
+                                                                               </a>
+                                                                       </li>
+                                                               {% end %}
+                                                       </ul>
+                                               </div>
                                        </div>
                                {% end %}
                        </div>