// Global Settings
$family-sans-serif: Prompt, sans-serif
+$size-1: 3rem
+$size-2: 2.5rem
+$size-3: 2rem
+$size-4: 1.5rem
+$size-5: 1.25rem
+$size-6: 1rem
+$size-7: 0.75rem
+
+// Make titles slightly larger
+$title-size: $size-2
+
// Colour Palette
$primary: #ff2e52
$primary-invert: #ffffff
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">{{ _("Log In") }}</h4>
+ <h4 class="subtitle">{{ _("Log In") }}</h4>
<div class="block">
<form action="" method="POST">
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">{{ _("Reset Your Password") }}</h4>
+ <h4 class="subtitle">{{ _("Reset Your Password") }}</h4>
<div class="block">
<form action="" method="POST">
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">{{ _("Reset Your Password") }}</h4>
+ <h4 class="subtitle">{{ _("Reset Your Password") }}</h4>
<p class="is-size-5">{{ _("You will shortly receive an email with instructions on how to reset your password.") }}</p>
</div>
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">{{ _("Reset Your Password") }}</h4>
+ <h4 class="subtitle">{{ _("Reset Your Password") }}</h4>
<div class="block">
<form action="" method="POST">
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">
+ <h4 class="subtitle">
{{ _("Your account has been created.") }}
{{ _("Please check your email for next steps.") }}
</h4>
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">{{ _("Register A New Account") }}</h4>
+ <h4 class="subtitle">{{ _("Register A New Account") }}</h4>
<div class="block">
<p class="is-size-5">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">{{ _("Home") }}</a>
</ul>
</nav>
- <h1 class="title is-1">{{ _("My Drafts") }}</h1>
+ <h1 class="title">{{ _("My Drafts") }}</h1>
</div>
</div>
</section>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">{{ _("Home") }}</a>
</ul>
</nav>
- <h1 class="title is-1">{{ _("IPFire Blog") }}</h1>
+ <h1 class="title">{{ _("IPFire Blog") }}</h1>
{% if q %}
- <h6 class="subtitle is-5">
+ <h6 class="subtitle">
{{ _("Search Results for '%s'") % q }}
</h6>
{% end %}
</a>
</h5>
- <h6 class="subtitle is-6">
+ <h6 class="subtitle">
{% if post.published_at %}
{{ locale.format_date(post.published_at, shorter=True, relative=relative) }}
{% elif post.created_at %}
<section class="hero {% if "lightningwirelabs.com" in post.tags %}is-lwl{% elif post.is_published() %}is-primary{% else %}is-light{% end %}">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">{{ _("Home") }}</a>
</ul>
</nav>
- <h1 class="title is-1">{{ post.title }}</h1>
+ <h1 class="title">{{ post.title }}</h1>
- <h6 class="subtitle is-6">
+ <h6 class="subtitle">
{{ _("by") }}
{% if isinstance(post.author, accounts.Account) %}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">{{ _("Home") }}</a>
</ul>
</nav>
- <h1 class="title is-1">{{ _("Write a New Post") }}</h1>
+ <h1 class="title">{{ _("Write a New Post") }}</h1>
</div>
</div>
</section>
<section class="hero has-background-primary-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("Posts in %s") % year }}
</h1>
</div>
<section class="hero is-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ page_title or _("IPFire Documentation") }}</h1>
+ <h1 class="title">{{ page_title or _("IPFire Documentation") }}</h1>
</div>
</div>
</section>
{% block content %}
<div class="container">
<section class="section">
- <h1 class="title is-1">{{ _("Recent Changes") }}</h1>
+ <h1 class="title">{{ _("Recent Changes") }}</h1>
{% module DocsList(recent_changes, show_changes=True) %}
<section class="hero is-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">{{ _("Home") }}</a>
</ul>
</nav>
- <h1 class="title is-1">{{ _("IPFire Docs") }}</h1>
+ <h1 class="title">{{ _("IPFire Docs") }}</h1>
{% if q %}
- <h6 class="subtitle is-5s">
+ <h6 class="subtitle">
{{ _("Search Results for '%s'") % q }}
</h6>
{% end %}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
Donate
</h1>
<p class="subtitle">{{ _("Please support our project with your donation today") }}</p>
<section class="hero is-primary is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("Thank You") }}
</h1>
<p class="subtitle">
<section class="hero is-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("Mirrors") }}
</h1>
<p class="subtitle">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("Download %s") % release }}
</h1>
- <h6 class="subtitle is-6">
+ <h6 class="subtitle">
{{ _("Released %s") % locale.format_date(release.published, relative=True, shorter=True) }}
{% if release.blog %}
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
- <h1 class="title is-1">
+ <h1 class="title">
Thank You For Downloading IPFire<span class="has-text-primary">_</span>
</h1>
- <h4 class="subtitle is-4">{{ _("Your download will begin in a few seconds. If not, click the link below.") }}</h4>
+ <h4 class="subtitle">{{ _("Your download will begin in a few seconds. If not, click the link below.") }}</h4>
<div class="block">
<p class="download-path"></p>
<div class="columns">
<div class="column">
<div class="has-text-centered">
- <h1 class="title is-1">{{ "{:,d}".format(total) }}</h1>
+ <h1 class="title">{{ "{:,d}".format(total) }}</h1>
<h4 class="title is-4">{{ _("Total amount of profiles") }}</h4>
</div>
</div>
<div class="column">
<div class="has-text-centered">
- <h1 class="title is-1">{{ "%.2f%%" % (with_data * 100 / total) }}</h1>
+ <h1 class="title">{{ "%.2f%%" % (with_data * 100 / total) }}</h1>
<h4 class="title is-4">{{ _("Reporting back to us") }}</h4>
</div>
</div>
{% block container %}
<section class="section">
<div class="container">
- <h1 class="title is-1">{{ driver }}</h1>
+ <h1 class="title">{{ driver }}</h1>
<p>
{{ _("All known devices run by %s") % driver }}
<section class="hero is-medium is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="https://ipfire.org/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Fireinfo") }}</h1>
+ <h1 class="title">{{ _("Fireinfo") }}</h1>
<a class="button is-dark is-medium" href="/profile/random">
{{ _("Show a Random Profile") }}
{% if latest_release %}
<div class="column is-half is-centered">
<div>
- <h1 class="title is-1 has-text-primary">
+ <h1 class="title has-text-primary">
{{ "%.2f%%" % (latest_release.penetration * 100) }}
</h1>
</div>
</div>
<div class="column is-half has-text-centered">
- <h1 class="title is-1">{{ format_size(memory_avg * 1024, "MB") }}</h1>
+ <h1 class="title">{{ format_size(memory_avg * 1024, "MB") }}</h1>
<span class="tag">
{{ _("Average Amount of Memory") }}
<div class="container">
<div class="columns is-vcentered">
<div class="column is-half has-text-centered">
- <h1 class="title is-1 has-text-primary">
+ <h1 class="title has-text-primary">
{{ "%.2f%%" % (virtual_ratio * 100) }}
</h1>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="https://ipfire.org/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Processors") }}</h1>
+ <h1 class="title">{{ _("Processors") }}</h1>
</div>
</div>
</section>
<div class="container">
<div class="columns">
<div class="column is-8">
- <h1 class="title is-1">{{ _("Profile") }}</h1>
+ <h1 class="title">{{ _("Profile") }}</h1>
<h5 class="title is-5">{{ profile.public_id }}</h5>
</div>
</div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="https://ipfire.org/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Releases") }}</h1>
+ <h1 class="title">{{ _("Releases") }}</h1>
</div>
</div>
</section>
<div class="hero-body">
<div class="container">
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("More Than A Firewall") }}
</h1>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Download IPFire Location") }}</h1>
- <h6 class="subtitle is-6">
+ <h1 class="title">{{ _("Download IPFire Location") }}</h1>
+ <h6 class="subtitle">
Learn how to download and install <code>libloc</code>
</h6>
</div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("IPFire Location") }}</h1>
- <h6 class="subtitle is-6">
+ <h1 class="title">{{ _("IPFire Location") }}</h1>
+ <h6 class="subtitle">
<code>libloc</code> is versatile, fast and easy to use
in any application.
</h6>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("IPFire Location") }}</h1>
- <h6 class="subtitle is-6">
+ <h1 class="title">{{ _("IPFire Location") }}</h1>
+ <h6 class="subtitle">
{{ _("A powerful, free IP address location database") }}
</h6>
</div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Lookup %s") % address }}</h1>
+ <h1 class="title">{{ _("Lookup %s") % address }}</h1>
</div>
</div>
</section>
<section class="hero has-background-primary-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
{% if mode == "paste" %}
{{ _("New Paste") }}
{% elif mode == "upload" %}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
About IPFire<span class="has-text-primary">_</span>
</h1>
- <p class="subtitle">The Open Source Firewall</p>
+ <h6 class="subtitle">The Open Source Firewall</h6>
</div>
</div>
</section>
<section class="hero has-background-primary-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</ul>
</nav>
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("Need Help?") }}
</h1>
<section class="hero has-background-primary-light">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">Home</a>
</li>
</ul>
</nav>
- <h1 class="title is-1">{{ _("Legal") }}</h1>
+ <h1 class="title">{{ _("Legal") }}</h1>
</div>
</div>
</section>
<div class="container">
<div class="columns is-centered">
<div class="column is-one-third">
- <h1 class="title is-1">
+ <h1 class="title">
{{ _("Delete User") }}
</h1>
- <h4 class="subtitle is-4">{{ account }}</h4>
+ <h4 class="subtitle">{{ account }}</h4>
<div class="block has-text-danger">
<form action="" method="POST">
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Edit Profile") }}</h1>
- <h6 class="subtitle is-6">{{ account }} | {{ account.uid }}</h6>
+ <h1 class="title">{{ _("Edit Profile") }}</h1>
+ <h6 class="subtitle">{{ account }} | {{ account.uid }}</h6>
</div>
</div>
</section>
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Groups") }}</h1>
+ <h1 class="title">{{ _("Groups") }}</h1>
</div>
</div>
</section>
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ group }}</h1>
- <h6 class="subtitle is-6">{{ group.gid }}</h6>
+ <h1 class="title">{{ group }}</h1>
+ <h6 class="subtitle">{{ group.gid }}</h6>
</div>
</div>
</section>
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("Users") }}</h1>
+ <h1 class="title">{{ _("Users") }}</h1>
</div>
</div>
</section>
<div class="container">
<div class="columns is-vcentered">
<div class="column">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ account }}</h1>
- <h6 class="subtitle is-6">{{ account.uid }}</h6>
+ <h1 class="title">{{ account }}</h1>
+ <h6 class="subtitle">{{ account.uid }}</h6>
{# Description #}
{% if account.description %}
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
- <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">
</ul>
</nav>
- <h1 class="title is-1">{{ _("VoIP") }}</h1>
+ <h1 class="title">{{ _("VoIP") }}</h1>
</div>
</div>
</section>