changeset 8:dc880664a8ec

modernisation of the theme using Bulma
author Goffi <goffi@goffi.org>
date Fri, 16 Apr 2021 18:51:12 +0200
parents b5fc67c97c50
children f47d6ba74a26
files README pages/news/page_meta.py pages/presentation/page_meta.py templates/default/_browser/__init__.py templates/default/_browser/browser_meta.json templates/default/_browser/bulma_sat.scss templates/default/association/association.html templates/default/base/base.html templates/default/doc/doc.html templates/default/news/news.html templates/default/presentation/presentation.html templates/default/press/press.html templates/default/social_contract/social_contract.html templates/default/static/libervia_mobile_0.8_chat_upload.jpg templates/default/static/libervia_web_0.8_blog.jpg templates/default/static/libervia_web_0.8_events.jpg templates/default/static/libervia_web_0.8_forums.jpg templates/default/static/libervia_web_0.8_grocery_list.jpg templates/default/static/libervia_web_0.8_list_invitation.jpg templates/default/static/styles_extra.css
diffstat 20 files changed, 560 insertions(+), 304 deletions(-) [+]
line wrap: on
line diff
--- a/README	Tue May 26 12:38:56 2020 +0200
+++ b/README	Fri Apr 16 18:51:12 2021 +0200
@@ -1,5 +1,5 @@
 Salut à Toi's website
-(c) Jérôme Poisson aka Goffi 2012-2019
+(c) Jérôme Poisson aka Goffi 2012-2021
 (c) Adrien Cossa aka Souliane 2015
 
 ** LICENCE **
--- a/pages/news/page_meta.py	Tue May 26 12:38:56 2020 +0200
+++ b/pages/news/page_meta.py	Fri Apr 16 18:51:12 2021 +0200
@@ -1,9 +1,5 @@
-#!/usr/bin/env python2.7
-# -*- coding: utf-8 -*-
-
 from libervia.server.constants import Const as C
 from twisted.words.protocols.jabber import jid
-from twisted.internet import defer
 from sat.core.i18n import _
 from sat.core.log import getLogger
 
@@ -15,8 +11,7 @@
 node = None
 
 
-@defer.inlineCallbacks
-def prepare_render(self, request):
+async def prepare_render(self, request):
     global service, node
     if service is None:
         blog_dict = self.getConfig('news_blog_dict', {})
@@ -43,4 +38,4 @@
     # we now need blog items, using blog common page
     # this will fill the "items" template data
     blog_page = self.getPageByName("blog_view")
-    yield blog_page.prepare_render(self, request)
+    await blog_page.prepare_render(self, request)
--- a/pages/presentation/page_meta.py	Tue May 26 12:38:56 2020 +0200
+++ b/pages/presentation/page_meta.py	Fri Apr 16 18:51:12 2021 +0200
@@ -1,5 +1,4 @@
-#!/usr/bin/env python2.7
-# -*- coding: utf-8 -*-
+#!/usr/bin/env python3
 
 from sat.core.log import getLogger
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/default/_browser/__init__.py	Fri Apr 16 18:51:12 2021 +0200
@@ -0,0 +1,7 @@
+from browser import bind, document
+
+
+@bind("#main_menu_burger", "click")
+def burger_click(ev):
+    document["main_menu"].classList.toggle('is-active')
+    document["main_menu_burger"].classList.toggle('is-active')
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/default/_browser/browser_meta.json	Fri Apr 16 18:51:12 2021 +0200
@@ -0,0 +1,9 @@
+{
+    "js": {
+        "package": {
+            "dependencies": {
+                "bulma": ">= 0.9.0"
+            }
+        }
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/default/_browser/bulma_sat.scss	Fri Apr 16 18:51:12 2021 +0200
@@ -0,0 +1,6 @@
+@charset "utf-8";
+$primary: #82baff;
+$body-background-color: #eaeaea;
+
+@import "node_modules/bulma/bulma.sass";
+
--- a/templates/default/association/association.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/association/association.html	Fri Apr 16 18:51:12 2021 +0200
@@ -1,61 +1,74 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 
 {% block body %}
-<div class="box">
-    <h1 class="page__title">Salut à Toi Association</h1>
-    <p class="heading__subtitle">{% trans %}The legal structure supporting the project.{% endtrans %}</p>
-    <h2>{% trans %}Mission{% endtrans %}</h2>
+<div class="section container">
+    <h1 class="title is-1">Salut à Toi Association</h1>
+    <p class="subtitle">{% trans %}The legal structure supporting the project.{% endtrans %}</p>
+    <h2 class="title is-3">{% trans %}Mission{% endtrans %}</h2>
 
-    <p>{% trans %}The Salut à Toi association has been created in June 2014 and is responsible for developing, promoting and funding the software. More generally, its goal is to create free, independent and controllable communication tools. "Controllable" has to be understood this way: the tool is doing exactly what you want and it will stay under your control. So it applies both to the present and the future.{% endtrans %}</p>
+    <div class="content">
+        <p>{% trans %}The Salut à Toi association has been created in June 2014 and is responsible for developing, promoting and funding the software. More generally, its goal is to create free, independent and controllable communication tools. "Controllable" has to be understood this way: the tool is doing exactly what you want and it will stay under your control. So it applies both to the present and the future.{% endtrans %}</p>
+    </div>
 
-    <h2>{% trans %}Organisation{% endtrans %}</h2>
-
-    <p>{% trans %}The association is non-profit, self-managed and open for everybody to join. There is no designated president, secretary or treasurer, the administrating entity is a college that is today composed by the two main developers: Jérôme who started this as a personal project in 2008 and Adrien who joined him in 2013.{% endtrans %}</p>
+    <h2 class="title is-3">{% trans %}Organisation{% endtrans %}</h2>
 
-    <h2>{% trans %}Funding{% endtrans %}</h2>
+    <div class="content">
+        <p>{% trans %}The association is non-profit, self-managed and open for everybody to join. There is no designated president, secretary or treasurer, the administrating entity is a college that is today composed by the two main developers: Jérôme who started this as a personal project in 2008 and Adrien who joined him in 2013.{% endtrans %}</p>
+    </div>
 
-    <p>{% trans %}We have put a lot of time and energy on “Salut à Toi” and we hope to be able to continue. The software should always be free (libre) and ethical; we are totally against advertisement and we believe in mutual help. We are confident that the people who enjoy what we do will be numerous enough and happy to support us by joining the association and paying a membership fee.{% endtrans %}</p>
+    <h2 class="title is-3">{% trans %}Funding{% endtrans %}</h2>
+
+    <div class="content">
+        <p>{% trans %}We have put a lot of time and energy on “Salut à Toi” and we hope to be able to continue. The software should always be free (libre) and ethical; we are totally against advertisement and we believe in mutual help. We are confident that the people who enjoy what we do will be numerous enough and happy to support us by joining the association and paying a membership fee.{% endtrans %}</p>
 
-    <p>{% trans %}Because the money should not create any separation between us, the people who cannot or who do not want to participate financially can still join the association for free and as moral support. The French law doesn't allow members to decide the amount of payment, so we had to fix several amounts in the Rules of Procedure: 0, 10, 20, 30, 50, 80 or 100. If you want to raise over 100 €, it is possible to do it as a donation (which is not the same as a membership fee). In that case, please contact us. As we want to stay 100% independent and autonomous, we won't allow any company to hi-jack the project and we won't add any commercial logo to the website.{% endtrans %}</p>
+        <p>{% trans %}Because the money should not create any separation between us, the people who cannot or who do not want to participate financially can still join the association for free and as moral support. The French law doesn't allow members to decide the amount of payment, so we had to fix several amounts in the Rules of Procedure: 0, 10, 20, 30, 50, 80 or 100. If you want to raise over 100 €, it is possible to do it as a donation (which is not the same as a membership fee). In that case, please contact us. As we want to stay 100% independent and autonomous, we won't allow any company to hi-jack the project and we won't add any commercial logo to the website.{% endtrans %}</p>
 
-    <p>{% trans %}We also think about other funding sources that are compatible with our social contract and ethical view, in particular technical services (assistance, customisation or features development released under a free - as in “freedom” - license).{% endtrans %}</p>
+        <p>{% trans %}We also think about other funding sources that are compatible with our social contract and ethical view, in particular technical services (assistance, customisation or features development released under a free - as in “freedom” - license).{% endtrans %}</p>
 
-    <h2>{% trans %}Become a member{% endtrans %}</h2>
+    </div>
+    <h2 class="title is-3">{% trans %}Become a member{% endtrans %}</h2>
 
-    <p>{% trans %}The membership lasts exactly one year and isn't automatically renewed: you have to renew it yourself and you can change the amount of your subscription every year.{% endtrans %}</p>
-    <p class="box box--center"><a href="association/membership">{% trans %}Click here to join the association{% endtrans %}</a></p>
-
-    <h2>{% trans %}Donations{% endtrans %}</h2>
+    <div class="content">
+        <p>{% trans %}The membership lasts exactly one year and isn't automatically renewed: you have to renew it yourself and you can change the amount of your subscription every year.{% endtrans %}</p>
+    </div>
+    <p class="box"><a href="association/membership">{% trans %}Click here to join the association{% endtrans %}</a></p>
 
-    <p>{% trans %}You can also make a donation without joining the association. We recommend using the open funding platform Liberapay to set up a weekly, monthly or yearly donation.{% endtrans %}</p>
-    <p>{% trans %}Or you can make a transfer to the following account:{% endtrans %}<p>
+    <h2 class="title is-3">{% trans %}Donations{% endtrans %}</h2>
 
-    <pre class="box">
+    <div class="content">
+        <p>{% trans %}You can also make a donation without joining the association. We recommend using the open funding platform Liberapay to set up a weekly, monthly or yearly donation.{% endtrans %}</p>
+        <p>{% trans %}Or you can make a transfer to the following account:{% endtrans %}<p>
+
+        <pre class="box">
 Payee: Salut à Toi
 IBAN: FR76 1027 8060 4300 0207 3220 109
 BIC: CMCIFR2A
 Bank: Crédit Mutuel (France)</pre>
 
-    <p>Please contact us if you do a bank transfer.</p>
+
+        <p>Please contact us if you do a bank transfer.</p>
 
-    <address>
-    You can contact us at <a href="mailto:contact@salut-a-toi.invalid">contact@salut-a-toi.invalid</a> (replace invalid with org)
-    </address>
+        <address>
+        You can contact us at <a href="mailto:contact@salut-a-toi.invalid">contact@salut-a-toi.invalid</a> (replace invalid with org)
+        </address>
+    </div>
 
-    <h2>{% trans %}Official documents{% endtrans %}</h2>
+    <h2 class="title is-3">{% trans %}Official documents{% endtrans %}</h2>
 
-    <ul>
-        <li>
-            <a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/statuts.pdf">{% trans %}Statutes of the association{% endtrans %}</a> (fr)
-        </li>
+    <div class="content">
+        <ul>
+            <li>
+                <a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/statuts.pdf">{% trans %}Statutes of the association{% endtrans %}</a> (fr)
+            </li>
 
-        <li>
-            <a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/r%C3%A8glement%20int%C3%A9rieur.pdf">{% trans %}Rules of the association{% endtrans %}</a> (fr)
-        </li>
+            <li>
+                <a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/r%C3%A8glement%20int%C3%A9rieur.pdf">{% trans %}Rules of the association{% endtrans %}</a> (fr)
+            </li>
 
-        <li>
-            <a href="http://repos.goffi.org/sat_docs/file/tip/association">{% trans %}Minutes{% endtrans %}</a> (fr)
-        </li>
-    </ul>
+            <li>
+                <a href="http://repos.goffi.org/sat_docs/file/tip/association">{% trans %}Minutes{% endtrans %}</a> (fr)
+            </li>
+        </ul>
+    </div>
 </div>
 {% endblock body %}
--- a/templates/default/base/base.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/base/base.html	Fri Apr 16 18:51:12 2021 +0200
@@ -1,10 +1,17 @@
-{% extends '(default)base/base.html' %}
+{% set menu_fixed_top=true %}
+{% extends '(bulma)base/base.html' %}
+{% block main_menu %}
+    {{ component.menu(main_menu, class="is-primary") }}
+{% endblock main_menu %}
+
 {% block footer %}
-    <span>
-        {% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}
-        —
-        <address class="inline">
-            <a href="mailto:contact@salut-a-toi.invalid">{% trans %}contact{% endtrans %}</a> ({% trans %}replace invalid with org{% endtrans %})
-        </address>
-    </span>
+    <footer class="footer">
+        <div class="content has-text-centered">
+            {% trans app_name="Libervia" %}Powered by {{app_name}}{% endtrans %}
+            —
+            <address class="is-inline">
+                <a href="mailto:contact@salut-a-toi.invalid">{% trans %}contact{% endtrans %}</a> ({% trans %}replace invalid by org{% endtrans %})
+            </address>
+        </div>
+    </footer>
 {% endblock %}
--- a/templates/default/doc/doc.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/doc/doc.html	Fri Apr 16 18:51:12 2021 +0200
@@ -1,18 +1,23 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 
-{% block body %}
-<div class="box box--medium box--center">
-    <p>
-        {% trans %}
-        Please select the documentation you want to see.
-        {% endtrans %}
-    </p>
-    <ul class="list list--inline">
-    {% for name in all_docs %}
-        {% set selected = "list__item--selected" if name == doc_name else "" %}
-        <li class="list__item {{selected}}"><a href="{{page_url}}/{{name}}">{{name}}</a></li>
-    {% endfor %}
-    </ul>
+{% block body_wrapper %}
+<div class="section has-background-white">
+    <div class="container">
+        <div class="message is-info">
+            <div class="message-body">
+                {% trans %}
+                Please select the documentation that you want to see.
+                {% endtrans %}
+            </div>
+        </div>
+        <div class="tabs">
+            <ul>
+                {% for name in all_docs %}
+                    <li class="{{"is-active" if name == doc_name}}"><a href="{{page_url}}/{{name}}">{{name}}</a></li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 </div>
-<iframe src="{{build_path}}doc/{{doc_name}}" onload="fitHeightToContent(this)"></iframe>
-{% endblock body %}
+<iframe class="is-full-width" src="{{build_path}}doc/{{doc_name}}" onload="fitHeightToContent(this)"></iframe>
+{% endblock body_wrapper %}
--- a/templates/default/news/news.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/news/news.html	Fri Apr 16 18:51:12 2021 +0200
@@ -2,8 +2,8 @@
 {% import 'blog/macros.html' as blog with context %}
 
 {% block body %}
-<h1 class="page__title">{% trans %}Salut à Toi News{% endtrans %}</h1>
+<h1 class="title has-text-centered">{% trans %}Libervia News{% endtrans %}</h1>
 <div id="blog_items">
-    {{ blog.show_items(items) }}
+    {{ blog.show_items(blog_items['items']) }}
 </div>
 {% endblock body %}
--- a/templates/default/presentation/presentation.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/presentation/presentation.html	Fri Apr 16 18:51:12 2021 +0200
@@ -1,200 +1,385 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 
-{% block body %}
-{{ icon_defs('chat', 'lock-filled', 'blog', 'exchange', 'picture', 'calendar', 'clipboard', 'desktop', 'mobile', 'globe', 'terminal', 'shield', 'ok', 'brush', 'unlink', 'heart-filled', 'group', 'box') }}
-<div class="box box--zero box--center">
-    <h1>
-        <img class="img--inline-bottom img--very-small" src="{{media_path}}icons_svg/sat.svg">
-        Salut à Toi
-    </h1>
-    <p class="heading__subtitle">{% trans %}The Universal Communication Ecosystem{% endtrans %}</p>
-</div>
+{% macro download_box(url, name, alias, description) %}
+    <div class="column content has-text-centered">
+        <a href="{{url}}" target="_blank" class="has-text-black">
+            <figure class="icon is-large">
+                {{ icon("box") }}
+            </figure>
+            <figcaption>
+                {% trans %}Click here to install {% endtrans %}<br>
+                <span class="has-text-weight-bold">{{name}}</span><br>
+                (alias <span class="is-italic">{{alias}}</span>, {{description}})
+            </figcaption>
+        </a>
+    </div>
+{% endmacro %}
 
-
-<div class="box box--quarter-screen box--large box--center box--hollow box--extra-margin">
-    <p class="description">{% trans %}Salut à Toi is a all-in-one tool to manage all your communications needs: instant messaging, (micro)blogging, file sharing, events, forums, tasks management, etc.{% endtrans %}</p>
-</div>
+{% block body_wrapper %}
+{{ icon_defs('chat', 'lock-filled', 'blog', 'exchange', 'picture', 'calendar', 'clipboard', 'desktop', 'mobile', 'globe', 'terminal', 'shield', 'ok', 'brush', 'unlink', 'heart-filled', 'group', 'box', 'plus-circled') }}
 
 
-<div class="paired-slides box--large box--middle box-zero box--half-screen box--center">
-    <div><img class="img--center" src="cagou_chat_desktop.jpg"></div>
-    <ul class="list list--features">
-        <li class="list__item">
-            {{ icon('chat', cls='icon--small') }}
-            {% trans %}chat with your friends, family or coworkers{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('lock-filled', cls='icon--small') }}
-            {% trans %}encrypt conversations to protect your privacy{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('blog', cls='icon--small') }}
-            {% trans %}blog publicly or only with a group of contacts{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('exchange', cls='icon--small') }}
-            {% trans %}share files directly (peer to peer) or store them on your server and access them from anywhere{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('picture', cls='icon--small') }}
-            {% trans %}share private photos albums with your family{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('calendar', cls='icon--small') }}
-            {% trans %}create and manage events{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('clipboard', cls='icon--small') }}
-            {% trans %}organise your work using tickets handler{% endtrans %}
-        </li>
-    </ul>
-</div>
-
+<section class="hero is-halfheight is-primary">
+    <div id="toto" class="hero-body">
+        <div class="container">
+            <nav class="level is-mobile">
+                <div class="level-left is-flex-shrink-1">
+                    <div class="level-item">
+                        <figure class="image is-128x128">
+                            <img src="{{media_path}}icons_svg/sat.svg" alt="Libervia logo">
+                        </figure>
+                    </div>
+                    <div class="level-item is-flex-direction-column is-align-items-flex-start is-flex-shrink-1">
+                        <p class="is-size-1 has-text-weight-bold">Libervia</p>
+                        <p class="is-size-5">{% trans %}The Universal Communication Ecosystem{% endtrans %}</p>
+                    </div>
+                </div>
+            </nav>
+            <div class="message is-info">
+                <div class="message-body">
+                    <p class="is-size-5">
+                    {% trans %}Libervia is a all-in-one tool to manage all your communications needs: instant messaging, (micro)blogging, file sharing, photo albums, events, forums, tasks, etc.{% endtrans %}
+                    </p>
+                </div>
+            </div>
+            <nav class="level is-mobile">
+                <div class="level-left">
+                    <div class="level-item">
+                        <a class="button is-large is-info is-rounded" href="#demo">{% trans %}Try it!{% endtrans %}</a>
+                    </div>
+                    <div class="level-item">
+                        <a class="button is-large is-info is-rounded" href="#installation">{% trans %}Install it!{% endtrans %}</a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+</section>
 
-<div class="paired-slides box--large box--middle box-zero box--half-screen box--center">
-    <div><img class="img--center" src="libervia_event.png"></div>
-    <ul class="list list--features">
-        <li class="list__item">
-            {{ icon('desktop', cls='icon--small') }}
-            {% trans %}works natively on desktop (not a disguised web browser){% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('mobile', cls='icon--small') }}
-            {% trans %}works natively on mobile devices (Android){% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('globe', cls='icon--small') }}
-            {% trans %}works on the web{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('shield', cls='icon--small') }}
-            {% trans %}most of web pages can be viewed without javascript enabled, improving security (javascript is used when available){% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('terminal', cls='icon--small') }}
-            {% trans %}powerful command-line interface{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('ok', cls='icon--small') }}
-            {% trans %}cross-platform{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('brush', cls='icon--small') }}
-            {% trans %}highly modular and customisable{% endtrans %}
-        </li>
-    </ul>
-</div>
+<section class="hero is-halfheight">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('chat', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Chat with your friends, family or coworkers{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('lock-filled', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Encrypt conversations to protect your privacy{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('blog', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Blog publicly or only with a group of contacts{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('exchange', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Share files directly (peer to peer) or store them on your server and access them from anywhere{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('picture', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Share private photos albums with your family{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('calendar', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Create and manage events{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('clipboard', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Organise your day to day life or work with lists{% endtrans %}
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="content">
+                        <img src="libervia_web_0.8_blog.jpg" alt="Screenshot of Libervia web 0.8 blog" class="screenshot_web">
+                    </div>
+                </div>
+            </div>
+        </div>
+</section>
 
+<section class="hero is-halfheight has-background-primary-dark has-text-white">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                        <img src="libervia_web_0.8_list_invitation.jpg" alt="">
+                </div>
+                <div class="column">
+                    <div class="content is-size-4">
+                        {% trans %}With its easy invitation system, you can smoothly meet your family or friends. It's a perfect fit to share with your loved ones.{% endtrans %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 
-<div class="box box--quarter-screen box--zero box--large box--center">
-    <p class="description description--emphasis">
-        {% trans url_open='<a href="/social_contract">'|safe,url_close='</a>'|safe %}
-            Salut à Toi is a Libre software, based on well established standards (XMPP), decentralised and federating. It is developed around strong ethical values. Check our {{url_open}}social contract{{url_close}}.
-        {% endtrans %}
-    </p>
-</div>
+<section class="hero is-halfheight has-background-white-ter">
+    <div class="hero-body">
+        <div class="columns">
+            <div class="column content">
+                <figure>
+                    <img src="libervia_web_0.8_photo_album.jpg" alt="Libervia-web 0.8 photo album" class="screenshot_web">
+                    <figcaption>{% trans %}Share your photo albums{% endtrans %}</figcaption>
+                </figure>
+            </div>
+            <div class="column content">
+                <figure>
+                <img src="libervia_web_0.8_forums.jpg" alt="Libervia-web 0.8 forums" class="screenshot_web">
+                    <figcaption>{% trans %}Arange topics in forums{% endtrans %}</figcaption>
+                </figure>
+            </div>
+            <div class="column content">
+                <figure>
+                <img src="libervia_web_0.8_events.jpg" alt="Libervia-web 0.8 events" class="screenshot_web">
+                    <figcaption>{% trans %}Organise events with your friends{% endtrans %}</figcaption>
+                </figure>
+            </div>
+        </div>
+
+    </div>
+</section>
 
 
-<div class="box box--zero box--large box--center">
-    <ul class="list list--features">
-        <li class="list__item list__item--show-links">
-            {{ icon('unlink', cls='icon--small') }}
-            {% trans %}Salut à Toi is a Libre software{% endtrans %}
+<section class="hero is-halfheight">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('desktop', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Works natively on desktop{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('globe', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Works on the web{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('mobile', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Works natively on mobile devices (Android){% endtrans %}
+                            <span class="is-italic">
+                                [{% trans %}work in progress{% endtrans %}]
+                            </span>
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('ok', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Cross-platform{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('terminal', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Powerful command-line interface{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('brush', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Highly modular and customisable{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('plus-circled', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Lot of powerful tools and features accompany the project, please check documentation{% endtrans %}
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="content">
+                        <img src="libervia_mobile_0.8_chat_upload.jpg" alt="Screenshot of Libervia mobile 0.8 chat with upload panel" class="screenshot_mobile">
+                    </div>
+                </div>
+            </div>
+        </div>
+</section>
 
-            {% trans url_open='<a href="https://repos.goffi.org/sat/file/tip">'|safe,url_close='</a>'|safe %}
-                ({{url_open}}source code{{url_close}}).
+<section class="hero is-halfheight is-primary">
+    <div class="hero-body">
+        <div class="container content">
+            <p class="is-size-4">
+            {% trans url_open='<a href="/social_contract" class="is-underline">'|safe,url_close='</a>'|safe %}
+            Libervia is a Libre software, based on well established standards (XMPP), decentralised and federating. It is developed around strong ethical values. Check our {{url_open}}social contract{{url_close}}.
             {% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('heart-filled', cls='icon--small') }}
-            {% trans %}we follow a social contract, a moral engagement with the community{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('group', cls='icon--small') }}
-            {% trans %}"Salut a Toi" is also the name of the association which manage the project.<br>Major decisions are debated there.{% endtrans %}
-        </li>
-    </ul>
+            </p>
+        </div>
+    </div>
+</section>
+
+<section class="hero is-halfheight has-background-white-ter">
+    <div class="hero-body is-justify-content-center">
+        <div class="is-flex is-flex-direction-column">
+            <div class="columns is-gapless is-mobile">
+                <div class="column list_icon">
+                    {{ icon('unlink', cls='icon') }}
+                </div>
+                <div class="column">
+                    {% trans %}Libervia is a Libre software{% endtrans %}
+
+                    {% trans url_open='<a href="https://repos.goffi.org/sat/file/tip">'|safe,url_close='</a>'|safe %}
+                    ({{url_open}}source code{{url_close}}).
+                    {% endtrans %}
+                </div>
+            </div>
+            <div class="columns is-gapless is-mobile">
+                <div class="column list_icon">
+                    {{ icon('heart-filled', cls='icon') }}
+                </div>
+                <div class="column">
+                    {% trans %}We follow a social contract, a moral engagement with the community{% endtrans %}
+                </div>
+            </div>
+            <div class="columns is-gapless is-mobile">
+                <div class="column list_icon">
+                    {{ icon('group', cls='icon') }}
+                </div>
+                <div class="column">
+                    {% trans %}"Salut a Toi" is the name of the association which manages the project.<br>Major decisions are debated there.{% endtrans %}
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<div id="demo" class="section container">
+    <h1 class="title is-2">{% trans %}Demo{% endtrans %}</h1>
+    <div class="box content">
+        <p>
+        {% trans
+            demo_url_open='<a href="https://www.libervia.org" target="_blank">'|safe,
+            demo_url_close='</a>'|safe
+        -%}
+        A demo server is available for you to try Libervia at {{demo_url_open}}https://www.libervia.org{{demo_url_close}}.
+        {%- endtrans %}
+        </p>
+        <div class="message is-warning">
+            <div class="message-body">
+                {% trans -%}
+                Please note that this is only for demo purpose, and all data (including accounts) may be wiped out at any time, don't use it for any serious purpose.
+                {%- endtrans %}
+            </div>
+        </div>
+    </div>
 </div>
 
-
-<div class="box box--zero box--large box--center">
-    <h2 class="heading__subtitle heading--paper">
-        {% trans %}installation{% endtrans %}
-    </h2>
-    <h3 class="heading--paper">GNU/Linux</h3>
-    <p>{% trans %}If you are on GNU/Linux the recommended way to install SàT is to use your distribution official packages. Please check your distribution to see if Salut à Toi is available (and request it if it's not). SàT is available at least on Arch Linux and Debian and its derivated.{% endtrans %}</p>
-    <p>{% trans flatpak='<a href="https://flatpak.org/" target="_blank" rel="noreferrer noopener">Flatpak</a>'|safe %}If SàT is not available or the version is too old, you can use {{flatpak}} (which may be installed by default on some recent distributions) to install it, see below.{% endtrans %}</p>
-    <h3 class="heading--paper">Flatpak</h3>
-    <p class="text--warning">
-        {% trans %}
+<div id="installation" class="section container">
+    <h1 class="title is-2">
+        {% trans %}Installation{% endtrans %}
+    </h1>
+    <h3 class="subtitle is-3">GNU/Linux</h3>
+    <div class="content box">
+        <p>{% trans %}If you are on GNU/Linux the recommended way to install Libervia is to use your distribution official packages. Please check your distribution to see if Libervia is available (and request it if it's not). Libervia is available at least on Arch Linux and Debian and its derivated.{% endtrans %}</p>
+        <p>{% trans flatpak='<a href="https://flatpak.org/" target="_blank" rel="noreferrer noopener">Flatpak</a>'|safe %}If Libervia is not available or the version is too old, you can use {{flatpak}} (which may be installed by default on some recent distributions) to install it, see below.{% endtrans %}</p>
+    </div>
+    <h3 class="subtitle is-3">Flatpak</h3>
+    <div class="message is-warning">
+        <div class="message-body">
+            {% trans %}
             Those packages are development preview, they are not stable and bugs and crashes may happen
-        {% endtrans %}
-    </p>
-    <ul class="grid">
-        {% for url, name, description in (
-            ("https://salut-a-toi.org/flatpak/org.salutatoi.Cagou_dev.flatpakref",
-             "Cagou", _("Desktop")),
+            {% endtrans %}
+        </div>
+    </div>
+    <div class="columns">
+        {% for url, name, alias, description in (
+            ("/flatpak/org.libervia.LiberviaDesktop_dev.flatpakref",
+             "Libervia Desktop", "Cagou", _("Desktop")),
 
-            ("https://salut-a-toi.org/flatpak/org.salutatoi.Primitivus_dev.flatpakref",
-             "Primitivus", _("Text User Interface")),
+            ("/flatpak/org.libervia.LiberviaTUI_dev.flatpakref",
+             "Libervia TUI", "Primitivus", _("Text User Interface")),
 
-            ("https://salut-a-toi.org/flatpak/org.salutatoi.Jp_dev.flatpakref",
-             "jp", _("Command Line Interface")),
+            ("/flatpak/org.libervia.LiberviaCLI_dev.flatpakref",
+             "Libervia CLI", "jp", _("Command-Line Interface")),
              ) %}
-            <li class='grid__item grid__item--medium grid__item--selectable'>
-                <a href="{{url}}" target="_blank">
-                    {{ icon('box', cls='icon--block icon--medium') }}
-                    <span>
-                        {% trans %}Click here to install {% endtrans %}
-                        <span class="text--emphasis">{{name}}</span> ({{description}})
-                    </span>
-                </a>
-            </li>
+             {{ download_box(url, name, alias, description) }}
         {% endfor %}
+    </div>
     </ul>
-    <div class="box">
+    <div class="box content">
         <p>{% trans %}If the links above are not working, you can use the following commands (supposing that Flatpak is already installed):{% endtrans %}</p>
-        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.salutatoi.Cagou_dev.flatpakref</pre>
-        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.salutatoi.Primitivus_dev.flatpakref</pre>
-        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.salutatoi.Jp_dev.flatpakref</pre>
+        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaDesktop_dev.flatpakref</pre>
+        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaTUI_dev.flatpakref</pre>
+        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaCLI_dev.flatpakref</pre>
     </div>
-    <h3 class="heading--paper">Android</h3>
-    <p class="text--warning">
-        {% trans %}
+    <h3 class="subtitle is-3">Android</h3>
+    <div class="message is-warning">
+        <div class="message-body">
+            {% trans %}
             This package is a development preview, it is not stable and bugs and crashes may happen
-        {% endtrans %}
-    </p>
-    <ul class="grid">
-        <li class='grid__item grid__item--medium grid__item--selectable'>
-            <a href="https://ftp.goffi.org/cagou/cagou.apk" target="_blank">
-                {{ icon('box', cls='icon--block icon--medium') }}
-                <span>
-                    {% trans %}Click here to install {% endtrans %}
-                    <span class="text--emphasis">
-                        {% trans %}Cagou for Android{% endtrans%}</span>
-                    </span>
-                </span>
-            </a>
-        </li>
-    </ul>
-    <h3 class="heading--paper">
-        {% trans %}
-            Source Code
-        {% endtrans %}
+            {% endtrans %}
+        </div>
+    </div>
+    <div class="columns">
+        {{ download_box("https://ftp.goffi.org/cagou/cagou.apk", "Libervia Mobile", "Cagou", "Android") }}
+    </div>
+    <h3 class="subtitle is-3">
+        {% trans %}Source Code{% endtrans %}
     </h3>
-    <p>{% trans doc_url_open='<a href="/documentation">'|safe,
-                doc_url_close='</a>'|safe %}If you have some technical ability, you can also install directly from source code, please check {{doc_url_open}}documentation{{doc_url_close}} for details {% endtrans %}</p>
-    <h3 class="heading--paper">
-        {% trans %}
-            Other
-        {% endtrans %}
+    <div class="box content">
+        <p>{% trans doc_url_open='<a href="/documentation">'|safe,
+                    doc_url_close='</a>'|safe %}If you have some technical ability, you can also install directly from source code, please check {{doc_url_open}}documentation{{doc_url_close}} for details {% endtrans %}</p>
+    </div>
+    <h3 class="subtitle is-3">
+        {% trans %}Other{% endtrans %}
     </h3>
-    <p>{% trans %}Please note that:{% endtrans %}</p>
-    <ul>
-        <li>{% trans %}Libervia, the web frontend, must be installed from source code, please check documentation for more details{% endtrans %}</li>
-        <li>{% trans %}There are Docker images, but outdated, so we don't list them here. We'll update them as soon as possible.{% endtrans %}</li>
-        <li>{% trans %}Salut à Toi may be installable on many platforms, contact us if you want to see it on a specific one{% endtrans %}</li>
-    </ul>
+    <div class="box content">
+        <p>{% trans %}Please note that:{% endtrans %}</p>
+        <ul>
+            <li>{% trans %}Libervia Web must be installed from source code, please check documentation for more details{% endtrans %}</li>
+            <li>{% trans %}There are Docker images, but outdated, so we don't list them here. We'll update them as soon as possible.{% endtrans %}</li>
+            <li>{% trans %}Libervia may be installable on many platforms, contact us if you want to see it on a specific one{% endtrans %}</li>
+        </ul>
+    </div>
 </div>
 
-{% endblock body %}
+{% endblock body_wrapper %}
--- a/templates/default/press/press.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/press/press.html	Fri Apr 16 18:51:12 2021 +0200
@@ -2,65 +2,82 @@
 
 {% block body %}
 
-<div class="row">
+<div class="section content">
+    <div class="message is-info">
+        <div class="message-body">note: the name "Salut à Toi" is the former name of "Libervia", you can see both names below</div>
+    </div>
 
-    <h2 class="heading__subtitle heading--plain">
+    <h2 class="title">
         {% trans %}Releases and campaigns{% endtrans %}
     </h2>
 
-    <div class="box box--zero">
-       <div class="box box--paper">{% trans %}October, 26th - December, 05th 2015{% endtrans %}, <span class="presstitle"><a target="#" href="http://web.archive.org/web/20170610201021/http://www.arizuka.com/{% trans %}en{% endtrans %}/projects/libervia">{% trans %}Crowdfunding campaign on Arizuka{% endtrans %}</a></span></div>
+    <div>
+       <div class="box">{% trans %}October, 26th - December, 05th 2015{% endtrans %}, <span class="has-text-weight-bold"><a target="#" href="http://web.archive.org/web/20170610201021/http://www.arizuka.com/{% trans %}en{% endtrans %}/projects/libervia">{% trans %}Crowdfunding campaign on Arizuka{% endtrans %}</a></span></div>
 
-       <div class="box box--paper">{% trans %}June, 15th 2015{% endtrans %}, <span class="presstitle">{% trans %}Membership campaign for Libervia, a free and decentralised social network{% endtrans %}</span> - <a target="#" href="press_releases/20150615/{% trans %}Libervia - Press release.pdf{% endtrans %}">{% trans %}text{% endtrans %}</a> + <a href="press_releases/20150615/libervia_overview.png" target="#">{% trans %}picture{% endtrans %}</a></div>
+       <div class="box">{% trans %}June, 15th 2015{% endtrans %}, <span class="has-text-weight-bold">{% trans %}Membership campaign for Libervia, a free and decentralised social network{% endtrans %}</span> - <a target="#" href="press_releases/20150615/{% trans %}Libervia - Press release.pdf{% endtrans %}">{% trans %}text{% endtrans %}</a> + <a href="press_releases/20150615/libervia_overview.png" target="#">{% trans %}picture{% endtrans %}</a></div>
 
      </div>
 
-    <h2 class="heading__subtitle heading--plain">
+    <h2 class="title">
         {% trans %}Articles{% endtrans %}
     </h2>
 
-    <div class="box box--zero">
-
-       <div class="box box--paper">Futter, 2015, <a href="http://fttr.at/2015/12/04/alternative-zu-facebook-entsteht-in-wien/" target="#" class="presstitle">Alternative zu Facebook entsteht in Wien</a> ({% trans %}German{% endtrans %})</div>
+    <div class="my-5">
+        <div class="message is-info">
+            <div class="message-body">
+                {% trans %}If you want to write an article about Libervia, we would be pleased to answer your questions. Please contact us.{% endtrans %}
+            </div>
+        </div>
+    </div>
 
-       <div class="box box--paper">meinbezirk.at, 2015, <a href="http://www.meinbezirk.at/mariahilf/chronik/neues-facebook-entsteht-mitten-im-sechsten-d1560433.html" target="#" class="presstitle">Neues Facebook entsteht mitten im Sechsten</a> ({% trans %}German{% endtrans %})</div>
+    <div>
 
-       <div class="box box--paper">Framasoft, 2015, <a href="http://framablog.org/2015/11/02/salut-a-toi-couteau-suisse-des-reseaux-sociaux-libres/" target="#" class="presstitle">Salut à toi, couteau suisse des réseaux sociaux libres</a> ({% trans %}French{% endtrans %})</div>
+       <div class="box">Futter, 2015, <a href="http://fttr.at/2015/12/04/alternative-zu-facebook-entsteht-in-wien/" target="#" class="has-text-weight-bold">Alternative zu Facebook entsteht in Wien</a> ({% trans %}German{% endtrans %})</div>
 
-       <div class="box box--paper">{% trans author="Drapher", magazine="Reflets.info" %}{{ author }} for {{ magazine }}{% endtrans %}, 2014, <a href="https://reflets.info/sat-le-couteau-suisse-libre-et-open-source-de-la-communication/" target="#" class="presstitle">SàT : le couteau suisse Libre et open source de la communication</a> ({% trans %}French{% endtrans %})</div>
+       <div class="box">meinbezirk.at, 2015, <a href="http://www.meinbezirk.at/mariahilf/chronik/neues-facebook-entsteht-mitten-im-sechsten-d1560433.html" target="#" class="has-text-weight-bold">Neues Facebook entsteht mitten im Sechsten</a> ({% trans %}German{% endtrans %})</div>
 
-       <div class="box box--paper">{% trans author="Mathias Huber", magazine="Linux-Magazin Online" %}{{ author }} for {{ magazine }}{% endtrans %}, 2014, <a href="http://www.linux-magazin.de/NEWS/Salut-a-Toi-Verbesserter-XMPP-Client" target="#" class="presstitle">Salut à Toi; Verbesserter XMPP-Client</a> ({% trans %}German{% endtrans %})</div>
+       <div class="box">Framasoft, 2015, <a href="http://framablog.org/2015/11/02/salut-a-toi-couteau-suisse-des-reseaux-sociaux-libres/" target="#" class="has-text-weight-bold">Salut à toi, couteau suisse des réseaux sociaux libres</a> ({% trans %}French{% endtrans %})</div>
+
+       <div class="box">{% trans author="Drapher", magazine="Reflets.info" %}{{ author }} for {{ magazine }}{% endtrans %}, 2014, <a href="https://reflets.info/sat-le-couteau-suisse-libre-et-open-source-de-la-communication/" target="#" class="has-text-weight-bold">SàT : le couteau suisse Libre et open source de la communication</a> ({% trans %}French{% endtrans %})</div>
 
-       <div class="box box--paper">Ani Andre, 2014, <a href="http://andre-ani.fr/news/profil-libriste-goffi/" target="#" class="presstitle">Profil de libriste : Goffi</a> ({% trans %}French{% endtrans %})</div>
+       <div class="box">{% trans author="Mathias Huber", magazine="Linux-Magazin Online" %}{{ author }} for {{ magazine }}{% endtrans %}, 2014, <a href="http://www.linux-magazin.de/NEWS/Salut-a-Toi-Verbesserter-XMPP-Client" target="#" class="has-text-weight-bold">Salut à Toi; Verbesserter XMPP-Client</a> ({% trans %}German{% endtrans %})</div>
 
-       <div class="box box--paper">LinuxFr.org, <a href="https://linuxfr.org/tags/s%C3%A0t/public" target="#">{% trans %}articles about Salut à Toi{% endtrans %}</a> ({% trans %}French{% endtrans %})</div>
+       <div class="box">Ani Andre, 2014, <a href="http://andre-ani.fr/news/profil-libriste-goffi/" target="#" class="has-text-weight-bold">Profil de libriste : Goffi</a> ({% trans %}French{% endtrans %})</div>
 
-       <div class="box box--paper">{% trans %}If you want to write an article about Salut à Toi, we would be pleased to answer your questions. Please contact us.{% endtrans %}</div>
+       <div class="box">LinuxFr.org, <a href="https://linuxfr.org/tags/s%C3%A0t/public" target="#">{% trans %}articles about Salut à Toi{% endtrans %}</a> ({% trans %}French{% endtrans %})</div>
 
     </div>
 
-    <h2 class="heading__subtitle heading--plain">
+    <h2 class="title">
         {% trans %}Radio{% endtrans %}
     </h2>
 
-    <div class="box box--zero">
+    <div>
 
-      <div class="box box--paper">Ici et maintenant, 2014, <span class="presstitle">Hotline</span> ({% trans %}French{% endtrans %}) - <a target="#" href="ftp://ftp.goffi.org/media/radio/270914-hotline.ogg">audio</a>
+      <div class="box">Ici et maintenant, 2014, <span class="has-text-weight-bold">Hotline</span> ({% trans %}French{% endtrans %}) - <a target="#" href="ftp://ftp.goffi.org/media/radio/270914-hotline.ogg">audio</a>
       </div>
 
-      <div class="box box--paper">Symbiose, 2014, <span class="presstitle">« Salut à toi » L’outil de communication / réseau social libre développé par Goffi</span> ({% trans %}French{% endtrans %}) - <a target="#" href="http://symbiose.bonnes-ondes.fr/ep/salut-a-toi-version-longue">audio</a>
+      <div class="box">Symbiose, 2014, <span class="has-text-weight-bold">« Salut à toi » L’outil de communication / réseau social libre développé par Goffi</span> ({% trans %}French{% endtrans %}) - <a target="#" href="http://symbiose.bonnes-ondes.fr/ep/salut-a-toi-version-longue">audio</a>
       </div>
 
     </div>
 
-    <h2 class="heading__subtitle heading--plain">
+    <h2 class="title">
         {% trans %}Conferences{% endtrans %}
     </h2>
 
-    <div class="box box--zero">
+    <div class="my-5">
+        <div class="message is-info">
+            <div class="message-body">
+                {% trans %}If you think that we could bring something interesting to an event (conference, booth, workshop…), feel free to contact us.{% endtrans %}
+            </div>
+        </div>
+    </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">XMPP Beyond Instant Messaging</span>
+    <div>
+
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">XMPP Beyond Instant Messaging</span>
             <ul>
               <li>FOSDEM, {% trans %}Brussels{% endtrans %}, 2019 ({% trans %}English{% endtrans %}) - <a
               href="https://video.fosdem.org/2019/H.1309/xmpp_beyond_im.webm"
@@ -70,8 +87,8 @@
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi: A Python Based Social Network And More</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi: A Python Based Social Network And More</span>
             <ul>
               <li>FOSDEM, {% trans %}Brussels{% endtrans %}, 2019 ({% trans %}English{%
               endtrans %}) - <a
@@ -82,8 +99,8 @@
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi: un écosystème de communication libre, standard et décentralisé</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi: un écosystème de communication libre, standard et décentralisé</span>
             <ul>
               <li>PyConFr, {% trans %}Lille{% endtrans %}, 2018 ({% trans %}French{%
               endtrans %}) - <a
@@ -92,59 +109,59 @@
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Technology is not neutral: meet Libervia and Cagou (Salut à Toi) - free and ethical communication tools</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Technology is not neutral: meet Libervia and Cagou (Salut à Toi) - free and ethical communication tools</span>
             <ul>
               <li>LinuxDays, Prague, 2016 ({% trans %}English{% endtrans %})</li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, Souliane, <span class="presstitle">Salut à Toi and Libervia</span>
+        <div class="box">
+            Goffi, Souliane, <span class="has-text-weight-bold">Salut à Toi and Libervia</span>
             <ul>
               <li>Linuxwochen, Vienna, 2016 ({% trans %}English{% endtrans %}) - <a href="http://meetings-archive.debian.net/pub/debian-meetings/2016/mini-debconf-vienna/webm/Salut_%c3%a0_Toi_and_Libervia.webm" target="#" >{% trans %}video{% endtrans %}</a></li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi, XMPP et réseau social</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi, XMPP et réseau social</span>
             <ul>
               <li>Fêtons Linux, Lausanne, 2015 ({% trans %}French{% endtrans %}) - <a href="https://www.youtube.com/watch?v=tXnwQ5me7zo" target="#" >{% trans %}video{% endtrans %}</a></li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, Arnaud Martin, Luc Fievet, Pouhiou, Edhelas and Olicat, <span class="presstitle">{% trans %}Round table on new media{% endtrans %}</span>
+        <div class="box">
+            Goffi, Arnaud Martin, Luc Fievet, Pouhiou, Edhelas and Olicat, <span class="has-text-weight-bold">{% trans %}Round table on new media{% endtrans %}</span>
             <ul>
               <li>{% trans %}Libre Software Meeting{% endtrans %}, Beauvais, 2015 ({% trans %}French{% endtrans %}) - <a href="http://video.rmll.info/videos/table-ronde-sur-les-nouveaux-medias/" target="#" >{% trans %}video{% endtrans %}</a></li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">PubSub, microblogage et XMPP</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">PubSub, microblogage et XMPP</span>
             <ul>
               <li>{% trans %}Libre Software Meeting{% endtrans %}, Beauvais, 2015 ({% trans %}French{% endtrans %}) - <a href="http://video.rmll.info/videos/pubsub-microblogage-et-xmpp/" target="#">{% trans %}video{% endtrans %}</a></li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Libervia : repenser nos communications</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Libervia : repenser nos communications</span>
             <ul>
               <li>Pas Sage En Seine, Paris, 2015 ({% trans %}French{% endtrans %}) - <a href="http://data.passageenseine.org/2015/webm/PSES2015_libervia-repenser-communication.webm" target="#">{% trans %}video{% endtrans %}</a></li>
               <li>{% trans %}Libre Software Meeting{% endtrans %}, Beauvais, 2015 ({% trans %}French{% endtrans %}) - <a href="http://video.rmll.info/videos/libervia-repenser-nos-communications/" target="#" >{% trans %}video{% endtrans %}</a></li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi : et si on repolitisait tout ça ?</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi : et si on repolitisait tout ça ?</span>
             <ul>
               <li>{% trans %}Libre Software Meeting{% endtrans %}, Montpellier, 2014 ({% trans %}French{% endtrans %}) - <a href="http://video.rmll.info/videos/salut-a-toi-et-si-on-repolitisait-tout-ca/" target="#" >{% trans %}video{% endtrans %}</a></li>
               <li>Pas Sage En Seine, Paris, 2014 ({% trans %}French{% endtrans %}) - <a href="http://numaparis.ubicast.tv/videos/salut-a-toi-1-partie-1/" target="#">{% trans %}video{% endtrans %} {% trans %}part{% endtrans %} 1</a> + <a href="http://numaparis.ubicast.tv/videos/salut-a-toi-1-partie-2/" target="#">{% trans %}part{% endtrans %} 2</a></li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi : outil libre de communication</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi : outil libre de communication</span>
             <ul>
               <li>Journées De Logiciel Libre, Lyon, 2014 ({% trans %}French{% endtrans %})</li>
               <li>Parinux, Paris, 2014 ({% trans %}French{% endtrans %})</li>
@@ -152,38 +169,35 @@
             </ul>
         </div>
 
-       <div class="box box--paper">
-           Goffi, <span class="presstitle">Nouveaux usage numériques, nouvelles problématiques</span>
+       <div class="box">
+           Goffi, <span class="has-text-weight-bold">Nouveaux usage numériques, nouvelles problématiques</span>
            <ul>
              <li>Festival Déclics, Nanterre, 2013 ({% trans %}French{% endtrans %})</li>
            </ul>
        </div>
 
-       <div class="box box--paper">
-           Goffi, <span class="presstitle">Salut à Toi : repensez vos communications</span>
+       <div class="box">
+           Goffi, <span class="has-text-weight-bold">Salut à Toi : repensez vos communications</span>
            <ul>
              <li>Journées De Logiciel Libre, Lyon, 2012 ({% trans %}French{% endtrans %}) - <a href="http://www.goffi.org/videos/conf%c3%a9rence%20S%c3%a0T%20JDLL%202012.webm" target="#">{% trans %}video{% endtrans %}</a></li>
            </ul>
        </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi : communication Libre, Fédérée, Décentralisée et Standard</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi : communication Libre, Fédérée, Décentralisée et Standard</span>
             <ul>
               <li>{% trans %}Libre Software Meeting{% endtrans %}, Geneva, 2012 ({% trans %}French{% endtrans %}) - <a href="http://video.rmll.info/videos/salut-a-toi-communication-libre-federee-decentralisee-et-standard/" target="#">{% trans %}video{% endtrans %}</a></li>
               <li>JDLL, Lyon, 2011 ({% trans %}French{% endtrans %})</li>
             </ul>
         </div>
 
-        <div class="box box--paper">
-            Goffi, <span class="presstitle">Salut à Toi : multi interface and multipurpose XMPP client</span>
+        <div class="box">
+            Goffi, <span class="has-text-weight-bold">Salut à Toi : multi interface and multipurpose XMPP client</span>
             <ul>
               <li>FOSDEM, {% trans %}Brussels{% endtrans %}, 2012 ({% trans %}English{% endtrans %})</li>
             </ul>
         </div>
 
     </div>
-    <div class="box box--zero">
-        <div class="box box--paper">{% trans %}If you think that we could bring something interesting to an event (conference, stand...), feel free to contact us.{% endtrans %}</div>
-    </div>
 </div>
 {% endblock body %}
--- a/templates/default/social_contract/social_contract.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/social_contract/social_contract.html	Fri Apr 16 18:51:12 2021 +0200
@@ -1,8 +1,10 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 
 {% block body %}
-<h1 class="page__title">{% trans %}Salut à Toi Social Contract{% endtrans %}</h1>
-<div class="box box--zero box--medium box__content">
-    {{social_contract}}
+<div class="section container has-background-white">
+    <h1 class="title">{% trans %}Salut à Toi Social Contract{% endtrans %}</h1>
+    <div class="content has-text-justified">
+        {{social_contract}}
+    </div>
 </div>
 {% endblock body %}
Binary file templates/default/static/libervia_mobile_0.8_chat_upload.jpg has changed
Binary file templates/default/static/libervia_web_0.8_blog.jpg has changed
Binary file templates/default/static/libervia_web_0.8_events.jpg has changed
Binary file templates/default/static/libervia_web_0.8_forums.jpg has changed
Binary file templates/default/static/libervia_web_0.8_grocery_list.jpg has changed
Binary file templates/default/static/libervia_web_0.8_list_invitation.jpg has changed
--- a/templates/default/static/styles_extra.css	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/static/styles_extra.css	Fri Apr 16 18:51:12 2021 +0200
@@ -1,3 +1,17 @@
-html {
-    font-family: "sat-base-font";
+.screenshot_web, .screenshot_mobile {
+    border: 2px solid #ddd;
+    border-radius: 0.25em;
+}
+
+.list_icon {
+    flex: none;
+    width: 2.5rem;
 }
+
+.is-underline {
+    text-decoration: underline;
+}
+
+.is-full-width {
+    width: 100%;
+}