From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sat, 24 Jun 2023 20:54:20 +0000 (+0000)
Subject: downloads: Use notifications for boxes
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=41f2f27c4829a697815377b8a0ff599c623efbad;p=ipfire.org.git

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 da54aabd..8cff9a92 100644
--- 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>