Deuxfleurs/aerogramme.deuxfleurs.fr
17
0
Fork 0
Code Pull requests Activity

reworking website homepage wip

Browse source
This commit is contained in:
Quentin 2023-11-27 17:35:08 +01:00
parent c3270f70e1
commit f0a5691784
Signed by: quentin
GPG key ID: E9602264D639FF68
5 changed files with 41 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
config.toml
View file

@ -1,6 +1,6 @@
base_url = "https://aerogramme.deuxfleurs.fr"
title = "Aerogramme"
description = "Resilient & standards-compliant open-source IMAP server with server-side encryption "
description = "Provide services people can trust for their online personal information"
default_language = "en"
output_dir = "public"
compile_sass = true
@ -58,7 +58,7 @@ favicon_svg = "/logo/aerogramme-blue-sq.svg"
[extra.organization]
name = "Aerogramme"
description = "Resilient & standards-compliant open-source IMAP server with built-in encryption "
description = "Provide services people can trust for their online personal information"
logo = "/logo/aerogramme-blue-hz.svg"
logo_simple = "/logo/aeogramme-blue-sq.svg"
logo_horizontal = "/logo/aerogramme-blue-sq.svg"

6
content/documentation/quick-start/_index.md
View file

@ -85,7 +85,7 @@ docker compose up -d garage
Configure Garage:
```bash
alias garage="docker compose exec garage -ti /garage"
alias garage="docker compose exec -ti garage /garage"
garage layout assign -z dc1 -c 1 -t aero -- $(garage node id -q)
garage layout show
garage layout apply --version 1 # version number can change
@ -102,8 +102,8 @@ garage bucket allow --read --write --key aerogramme-global-key aerogramme
Aerogramme also has a configuration file:
```toml
s3_endpoint = "http://garage:3900" # use docker addressing
k2v_endpoint = "http://garage:3904" # same
s3_endpoint = "garage:3900" # use docker addressing
k2v_endpoint = "garage:3904" # same
aws_region = "garage"
[lmtp]

7
src/input.css
View file

@ -131,12 +131,13 @@ p > code, p > strong > code, li > code, li > strong > code {
/** Home mailbox bg */
#mailbox-container {
background-image: url('/images/mailbox.svg');
background-image: url('/images/blue_marble.jpg');
background-repeat: no-repeat;
background-position: left;
background-size: cover;
background-position: center;
background-size: contain;
background-attachment: fixed;
height: 70vh;
background-color: #000000;
}
@media screen and (max-width: 1280px) {

BIN
static/images/blue_marble.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 793 KiB

95
templates/index.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block title %}
Aerogramme - Resilient open-source IMAP server with built-in encryption
Aerogramme - A place for your personal information in the online world
{% endblock title %}
{% block content %}
@ -45,109 +45,78 @@
</div>
<div class="w-full flex flex-col items-center justify-center border-b">
<div id="mailbox-about" class="w-full shadow-lg mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 py-4 text-sm text-gray-700 border-t">
<p class="text-aerogramme-blue text-2xl tracking-wide">A more resilient & private mailbox design</p>
<div id="mailbox-about" class="w-full shadow-lg mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 px-8 py-4 text-sm text-gray-700 border-t">
<p class="text-aerogramme-blue text-2xl tracking-wide">For the last 40 years, emails have been the cornerstone of our digital communications across the globe...</p>
</div>
<div id="mailbox-container" class="relative w-full shadow-inner border-b">
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-16 overflow-hidden inline-block">
<div class="h-8 w-8 bg-white -rotate-45 transform origin-top-left shadow-md"></div>
</div>
</div>
<div id="map-legend-container" class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 py-2 text-sm text-gray-700">
<div id="map-legend-container" class="w-full shadow-lg mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 px-8 py-4 text-sm text-gray-700 border-t">
<div>
<p class="text-base text-gray-600">Each mailbox is represented as an encrypted, sequential log of events</p>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/mailop.svg') }}" width="48">
<span>Add or remove an email</span>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/flagop.svg') }}" width="48">
<span>Add or remove a flag (like seen/unseen)</span>
<p class="text-aerogramme-blue text-2xl tracking-wide">...let's make sure it will remain possible in the coming decades by building appropriate technology.</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-aerogramme-gray font-light bg-gray-100 py-12 px-4 md:px-0 w-full shadow-inner">
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Goals</h2>
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Frugality</h2>
<div class="w-8 h-1 bg-aerogramme-blue"></div>
<p class="text-center leading-5 italic text-lg">Aerogramme design enables the following properties:</p>
<p class="text-center leading-5 italic text-lg">We live in a finite world, with finite ressources and usable energy.</p>
<ul class="list-style-none font-semibold flex flex-col items-center justify-center py-4">
<li class="py-1.5 flex flex-col items-center justify-center">
<span>Privacy friendly</span>
<p class="font-normal text-center">Per-user encryption of mailboxes.<br>Can be run as a local proxy to hide your mailbox content from the server.</p>
<span>Zero obsolescence</span>
<p class="font-normal text-center">People's device are rendered obsolete due to incompatible or slow software.<br>Aerogramme favors interoperability and compatibility with existing software.</p>
</li>
<!--<div class="w-2 h-2 rounded-full bg-aerogramme-blue"></div>
<li class="py-1.5 flex flex-col items-center justify-center">
<span>Don't break users' habits</span>
<p class="font-normal text-center">IMAP, CalDAV and CardDAV are standards natively supported in many applicatios and OS. </p>
</li>-->
<div class="w-2 h-2 rounded-full bg-aerogramme-blue"></div>
<li class="py-1.5 flex flex-col items-center justify-center">
<span>Easy to operate</span>
<p class="font-normal text-center">Transparently replicate mailbox and solve conflicts.<br>
Integrate with your LDAP server.</p>
<span>Lightweight usages</span>
<p class="font-normal text-center">Traditional "cloud services" are centered around files and not emails.<br>They synchronize gigabytes of data that require lot of dedicated storage hardware.<br>Aerogramme targets high value data.</p>
</li>
<div class="w-2 h-2 rounded-full bg-aerogramme-blue"></div>
<li class="py-1.5 flex flex-col items-center justify-center text-center">
Highly resilient<br>
<div class="font-normal">
Multiple instances of Aerogramme can been run in parallel without coordination.<br>
Support datacenter failures.
</div>
<span>Junkyard computing</span>
<p class="font-normal text-center">
xxx
</p>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Roadmap</h2>
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Resilience</h2>
<div class="w-8 h-1 bg-aerogramme-blue"></div>
<p class="text-center leading-5 italic text-lg">
Aerogramme is currently a technical preview. Following released are planned:
Make sure that emails remain decentralized by allowing small actors
</p>
<ul class="text-center list-style-none flex flex-col space-y-2 justify-start py-4">
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<span class="font-normal">⌛0.1.x</span>
</div>
<span class="px-2">Correct parsing of emails. (~june '23).</span>
<ul class="list-style-none font-semibold flex flex-col items-center justify-center py-4">
<li class="py-1.5 flex flex-col items-center justify-center">
<span>Easy to operate</span>
<p class="font-normal text-center">XXXX</p>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<span class="font-normal">⌛0.2.x</span>
</div>
<span class="px-2">Support of IMAP4rev1. (~september '23).</span>
<div class="w-2 h-2 rounded-full bg-aerogramme-blue"></div>
<li class="py-1.5 flex flex-col items-center justify-center">
<span>Integrity backed-in</span>
<p class="font-normal text-center">XXX</p>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<span class="font-normal">⌛0.3.x</span>
</div>
<span class="px-2">Subset of IMAP4rev2. (~december '23).</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<span class="font-normal">⌛0.4.x</span>
</div>
<span class="px-2">CalDAV support. (~february '24).</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<span class="font-normal">⌛0.5.x</span>
</div>
<span class="px-2">CardDAV support.</span>
<div class="w-2 h-2 rounded-full bg-aerogramme-blue"></div>
<li class="py-1.5 flex flex-col items-center justify-center">
<span>Availability backed-in</span>
<p class="font-normal text-center">XXX</p>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">It works with your email client</h2>
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Privacy</h2>
<div class="w-8 h-1 bg-aerogramme-blue"></div>
<p class="text-center leading-5 italic pb-4 text-lg">
Aerogramme integrates into your existing workflow:
</p>
<p class="font-normal">
Aerogramme implements the IMAP protocol<br>and thus is already compatible with many applications.
Aerogramme implements standard protocols<br>and thus is already compatible with many applications.
</p>
<ul class="grid grid-cols-3 gap-6 py-4 px-8">
<li class="flex items-center justify-start">
@ -174,7 +143,7 @@
</div>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Standing on the shoulders of giants</h2>
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Open</h2>
<div class="w-8 h-1 bg-aerogramme-blue"></div>
<p class="text-center leading-5 italic text-lg">
Aerogramme leverages insights from research & other software: