{% end block %}
{% block container %}
- <section class="hero is-primary">
+ <section class="hero is-primary is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<nav class="breadcrumb" aria-label="breadcrumbs">
</h1>
<h6 class="subtitle">
- {{ _("Released %s") % locale.format_date(release.published, relative=True, shorter=True) }}
+ {{ _("Released %s") % locale.format_date(release.published, relative=False, shorter=True) }}
</h6>
- <div class="columns is-multiline">
- {% for arch in release.arches %}
- <div class="column is-half is-one-third-widescreen is-one-quarter-fullhd">
- <div class="block p-5">
- <h5 class="title is-5">{{ arch }}</h5>
+ <div class="level">
+ <div class="level-left">
+ {% if release.blog %}
+ <div class="level-item">
+ <a href="/blog/{{ release.blog.slug }}">
+ {{ _("Read The Release Announcement") }} →
+ </a>
+ </div>
+ {% end %}
+ </div>
+
+ <div class="level-right">
+ <div class="tabs is-toggle">
+ <ul>
+ {% for i, arch in enumerate(release.arches) %}
+ <li {% if i == 0 %}class="is-active"{% end %} data-tab="{{ arch }}">
+ <a>
+ <span>{{ arch }}</span>
+ </a>
+ </li>
+ {% end %}
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ {% for i, arch in enumerate(release.arches) %}
+ <div id="{{ arch }}" class="tab-content {% if i > 0 %}is-hidden{% end %}">
+ <div class="columns">
+ {% for file in release.get_files_by_arch(arch) %}
+ {% if file.is_torrent() %}{% continue %}{% end %}
+
+ {# Fetch the corresponding torrent file #}
+ {% set torrent = release.find_torrent(file) %}
+
+ <div class="column">
+ <div class="card">
+ <div class="card-content">
+ <div class="columns">
+ <div class="column">
+ <p class="title is-6 has-text-dark">
+ {{ _(file.desc) }}
+ </p>
+ </div>
+
+ <div class="column is-narrow">
+ <span class="tag">
+ {{ format_size(file.size) }}
+ </span>
+ </div>
+ </div>
+
+ <div class="block content">
+ {% if file.type == "iso" %}
+ <p>
+ <small>
+ For bare metal installs, virtual machines,
+ and optical media.
+ </small>
+ </p>
+ {% elif file.type == "flash" %}
+ <p>
+ <small>
+ For embedded hardware, USB sticks,
+ and SD card deployments.
+ </small>
+ </p>
+ {% end %}
+ </div>
- <ul>
- {% for file in release.get_files_by_arch(arch) %}
- {% if file.is_torrent() %}{% continue %}{% end %}
+ <div class="buttons">
+ <a class="button is-success is-fullwidth download-splash" href="{{ file.url }}">
+ <span class="icon">
+ <i class="fa-solid fa-download"></i>
+ </span>
- {# Fetch the corresponding torrent file #}
- {% set torrent = release.find_torrent(file) %}
+ <span>
+ {{ _("Direct Download") }}
+ </span>
+ </a>
- <li>
- <div class="dropdown is-right">
- <div class="dropdown-trigger">
- <button class="button is-link" aria-haspopup="true" aria-controls="dropdown-menu">
+ {% if torrent %}
+ <a class="button is-outlined is-fullwidth download-splash" href="{{ torrent.url }}">
<span class="icon">
- <i class="fas fa-download"></i>
+ <i class="fa-regular fa-circle-down"></i>
</span>
<span>
- {{ _(file.desc) }}
- ({{ format_size(file.size) }})
+ {{ _("Torrent Download") }}
</span>
- </button>
- </div>
-
- <div class="dropdown-menu" id="dropdown-menu" role="menu">
- <div class="dropdown-content">
- <a class="dropdown-item download-splash" href="{{ file.url }}">
- <span class="icon">
- <i class="fa-solid fa-download"></i>
- </span>
-
- {{ _("Direct Download") }}
- </a>
-
- {% if torrent %}
- <a class="dropdown-item download-splash" href="{{ torrent.url }}">
- <span class="icon">
- <i class="fa-solid fa-share-nodes"></i>
- </span>
-
- {{ _("Torrent Download") }}
- </a>
- {% end %}
- </div>
- </div>
+ </a>
+ {% end %}
</div>
- </li>
- {% end %}
- </ul>
- </div>
+ </div>
+ </div>
+ </div>
+ {% end %}
</div>
- {% end %}
- </div>
+ </div>
+ {% end %}
</div>
</div>
- </section>
-
- <section class="has-text-white has-background-info">
- <div class="container">
- <p class="has-text-centered px-2 py-1">
- {{ _("Deploying IPFire In The Cloud?") }}
-
- <a class="has-text-white has-text-weight-bold" href="/downloads/cloud">
- {{ _("Read More") }}
- </a>
- </p>
- </div>
- </section>
-
- {% if release.blog %}
- <section class="section">
- <div class="container">
- <h3 class="title is-3">{{ _("Release Notes") }}</h3>
- <div class="content">
- {% raw release.blog.html %}
+ <div class="hero-foot">
+ <div class="container py-6">
+ <div class="columns is-centered is-vcentered">
+ <div class="column is-narrow">
+ <span class="icon is-large m-5">
+ <i class="fa-solid fa-cloud fa-5x"></i>
+ </span>
+ </div>
+
+ <div class="column is-half">
+ <h5 class="title is-5">
+ Deploying IPFire in the Cloud?
+ </h5>
+
+ <p class="subtitle is-6">
+ AMIs and cloud images are available for AWS, Exoscale, and more.
+ </p>
+
+ <a class="button is-white is-small is-outlined" href="/downloads/cloud">
+ {{ _("View Cloud Options") }}
+ </a>
+ </div>
</div>
</div>
- </section>
- {% end %}
+ </div>
+ </section>
{% end block %}
{% block javascript %}