17
0
Fork 0

WIP aerogramme website

This commit is contained in:
Quentin 2023-06-05 15:41:45 +02:00
parent 7480308889
commit 0dd53ec11e
Signed by: quentin
GPG Key ID: E9602264D639FF68
22 changed files with 268 additions and 5239 deletions

View File

@ -58,7 +58,7 @@ favicon_svg = "/logo/aerogramme-blue-sq.svg"
[extra.organization]
name = "Aerogramme"
description = "Resilient & standards-compliant open-source IMAP server with server-side encryption "
description = "Resilient & standards-compliant open-source IMAP server with built-in encryption "
logo = "/logo/aerogramme-blue-hz.svg"
logo_simple = "/logo/aeogramme-blue-sq.svg"
logo_horizontal = "/logo/aerogramme-blue-sq.svg"

View File

@ -1,6 +0,0 @@
+++
title = "Clients"
weight = 20
sort_by = "weight"
template = "documentation.html"
+++

View File

@ -1,4 +0,0 @@
+++
title = "Terminal"
weight = 20
+++

View File

@ -1,4 +0,0 @@
+++
title = "Graphical"
weight = 10
+++

View File

@ -1,4 +0,0 @@
+++
title = "Web"
weight = 30
+++

View File

@ -0,0 +1,17 @@
+++
title = "Connect"
weight = 20
sort_by = "weight"
template = "documentation.html"
+++
## Standard protocols
- [IMAP](@/documentation/connect/imap.md) - Access to your mailbox
- [CalDAV](@/documentation/connect/caldav.md) - Access to your calendars
- [CardDAV](@/documentation/connect/carddav.md) - Access to your contacts
## Client-side encryption
- [Proxy](@/documentation/connect/proxy.md) - Proxy approach to access to your profile
- [WASM](@/documentation/connect/wasm.md) - Library approach to access to your profile

View File

@ -0,0 +1,6 @@
+++
title = "CalDAV"
weight = 10
+++
*not yet implemented*

View File

@ -0,0 +1,6 @@
+++
title = "CardDAV"
weight = 20
+++
*not yet implemented*

View File

@ -0,0 +1,13 @@
+++
title = "IMAP"
weight = 5
+++
Standard IMAP configuration.
Examples with some well known email clients.
## Thunderbird
## K9Mail
## Mutt

View File

@ -2,3 +2,5 @@
title = "Proxy"
weight = 40
+++
*Not yet written*

View File

@ -2,3 +2,5 @@
title = "WASM"
weight = 50
+++
*Not yet implemented*

View File

@ -0,0 +1 @@
how to configure tls on aerogramme?!

View File

@ -124,10 +124,10 @@ p > code, p > strong > code, li > code, li > strong > code {
display: block;
}
/** Home map */
/** Home mailbox bg */
#map-container {
background-image: url('/images/map.svg');
#mailbox-container {
background-image: url('/images/mailbox.svg');
background-repeat: no-repeat;
background-position: left;
background-size: cover;
@ -136,7 +136,7 @@ p > code, p > strong > code, li > code, li > strong > code {
}
@media screen and (max-width: 1280px) {
#map-container {
#mailbox-container {
background-position: center;
background-attachment: scroll;
height: 50vh;
@ -144,7 +144,7 @@ p > code, p > strong > code, li > code, li > strong > code {
}
@media screen and (max-width: 768px) {
#map-container {
#mailbox-container {
background-position: 25% 50%;
background-size: auto;
background-attachment: scroll;

61
static/icons/calendar.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.3 KiB

57
static/icons/contacts.svg Normal file
View File

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="498.50003pt"
height="572.35236pt"
version="1.1"
viewBox="0 0 498.50003 572.35229"
id="svg9186"
sodipodi:docname="noun-phone-book-4217788.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview9188"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="pt"
showgrid="false" />
<defs
id="defs9152">
<linearGradient
inkscape:collect="always"
id="linearGradient9674">
<stop
style="stop-color:#3b82f6;stop-opacity:1;"
offset="0"
id="stop9670" />
<stop
style="stop-color:#343786;stop-opacity:1;"
offset="1"
id="stop9672" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9674"
id="linearGradient9676"
x1="126.7506"
y1="23.672178"
x2="599.25018"
y2="566.17218"
gradientUnits="userSpaceOnUse" />
</defs>
<g
id="g9184"
transform="translate(-113.7504,-8.746)">
<path
d="m 555.5002,23.676178 h -341.25 c -11.598,0.01172 -22.719,4.6289 -30.922,12.828 -8.1992,8.2031 -12.816,19.324 -12.828,30.922 v 26.25 h -13.125 c -10.941,0 -21.051,5.8359 -26.523,15.312002 -5.4688,9.4766 -5.4688,21.148 0,30.625 5.4727,9.4766 15.582,15.312 26.523,15.312 h 13.125 v 52.5 h -13.125 c -10.941,0 -21.051,5.8359 -26.523,15.312 -5.4688,9.4766 -5.4688,21.148 0,30.625 5.4727,9.4766 15.582,15.312 26.523,15.312 h 13.125 v 52.5 h -13.125 c -10.941,0 -21.051,5.8359 -26.523,15.312 -5.4688,9.4766 -5.4688,21.148 0,30.625 5.4727,9.4766 15.582,15.312 26.523,15.312 h 13.125 v 43.75 h -13.125 c -10.941,0 -21.051,5.8359 -26.523,15.312 -5.4688,9.4766 -5.4688,21.148 0,30.625 5.4727,9.4766 15.582,15.312 26.523,15.312 h 13.125 v 35 c 0.0117,11.598 4.6289,22.719 12.828,30.922 8.2031,8.1992 19.324,12.816 30.922,12.828 h 341.25 c 11.598,-0.0117 22.719,-4.6289 30.922,-12.828 8.1992,-8.2031 12.816,-19.324 12.828,-30.922 V 67.422178 c -0.0117,-11.598 -4.6289,-22.719 -12.828,-30.922 -8.2031,-8.1992 -19.324,-12.816 -30.922,-12.828 z m -398.12,113.750002 c -7.25,0 -13.125,-5.875 -13.125,-13.125 0,-7.25 5.875,-13.125 13.125,-13.125 h 43.75 c 7.25,0 13.125,5.875 13.125,13.125 0,7.25 -5.875,13.125 -13.125,13.125 z m 0,113.75 c -7.25,0 -13.125,-5.875 -13.125,-13.125 0,-7.25 5.875,-13.125 13.125,-13.125 h 43.75 c 7.25,0 13.125,5.875 13.125,13.125 0,7.25 -5.875,13.125 -13.125,13.125 z m 0,113.75 c -7.25,0 -13.125,-5.875 -13.125,-13.125 0,-7.25 5.875,-13.125 13.125,-13.125 h 43.75 c 7.25,0 13.125,5.875 13.125,13.125 0,7.25 -5.875,13.125 -13.125,13.125 z m 0,105 c -7.25,0 -13.125,-5.875 -13.125,-13.125 0,-7.25 5.875,-13.125 13.125,-13.125 h 43.75 c 7.25,0 13.125,5.875 13.125,13.125 0,7.25 -5.875,13.125 -13.125,13.125 z m 424.38,52.5 c -0.008,6.9609 -2.7773,13.633 -7.6953,18.555 -4.9219,4.918 -11.594,7.6875 -18.555,7.6953 h -341.25 c -6.9609,-0.008 -13.633,-2.7773 -18.555,-7.6953 -4.918,-4.9219 -7.6875,-11.594 -7.6953,-18.555 v -35 h 13.125 c 10.941,0 21.051,-5.8359 26.523,-15.312 5.4688,-9.4766 5.4688,-21.148 0,-30.625 -5.4727,-9.4766 -15.582,-15.312 -26.523,-15.312 h -13.125 v -43.75 h 13.125 c 10.941,0 21.051,-5.8359 26.523,-15.312 5.4688,-9.4766 5.4688,-21.148 0,-30.625 -5.4727,-9.4766 -15.582,-15.312 -26.523,-15.312 h -13.125 v -52.5 h 13.125 c 10.941,0 21.051,-5.8359 26.523,-15.312 5.4688,-9.4766 5.4688,-21.148 0,-30.625 -5.4727,-9.4766 -15.582,-15.312 -26.523,-15.312 h -13.125 v -52.5 h 13.125 c 10.941,0 21.051,-5.8359 26.523,-15.312 5.4688,-9.4766 5.4688,-21.148 0,-30.625 -5.4727,-9.476602 -15.582,-15.312002 -26.523,-15.312002 h -13.125 v -26.25 c 0.008,-6.9609 2.7773,-13.633 7.6953,-18.555 4.9219,-4.918 11.594,-7.6875 18.555,-7.6953 h 341.25 c 6.9609,0.0078 13.633,2.7773 18.555,7.6953 4.918,4.9219 7.6875,11.594 7.6953,18.555 z m -84.477,-217.54 -53.609,-8.4922 v -0.004 c -2.3203,-0.37109 -4.6914,0.20703 -6.582,1.6094 -7.043,5.1914 -12.48,12.273 -15.68,20.422 -29.32,-11.832 -52.566,-35.078 -64.398,-64.402 8.1484,-3.1992 15.227,-8.6328 20.422,-15.68 1.3945,-1.8906 1.9727,-4.2578 1.6055,-6.5781 l -8.4922,-53.609 v -0.004 c -0.36328,-2.3164 -1.6445,-4.3867 -3.5547,-5.75 -9.375,-6.7031 -20.895,-9.707 -32.348,-8.4414 -11.453,1.2656 -22.039,6.7148 -29.723,15.305 -7.6836,8.5898 -11.926,19.711 -11.914,31.238 0.0508,45.578 18.184,89.277 50.414,121.51 32.23,32.23 75.93,50.363 121.51,50.414 11.527,0.0117 22.648,-4.2305 31.238,-11.914 8.5898,-7.6836 14.039,-18.266 15.305,-29.719 1.2695,-11.457 -1.7383,-22.973 -8.4414,-32.348 -1.3594,-1.9102 -3.4336,-3.1914 -5.75,-3.5547 z m -32.352,60.035 c -40.941,-0.0469 -80.191,-16.332 -109.14,-45.281 -28.949,-28.949 -45.234,-68.199 -45.281,-109.14 0.0117,-7.7773 3.1016,-15.23 8.6016,-20.727 5.4961,-5.5 12.949,-8.5898 20.727,-8.6016 4.9102,-0.008 9.7461,1.2344 14.047,3.6055 l 7.2539,45.809 c -4.4688,4.7578 -10.406,7.8711 -16.859,8.8438 -2.5273,0.38281 -4.7578,1.8516 -6.1094,4.0195 -1.3516,2.1641 -1.6914,4.8164 -0.92188,7.2539 13.133,41.691 45.789,74.348 87.48,87.48 2.4375,0.76953 5.0898,0.42969 7.2539,-0.92188 2.168,-1.3516 3.6367,-3.582 4.0195,-6.1094 0.97266,-6.4531 4.0859,-12.391 8.8438,-16.859 l 45.809,7.2539 c 2.3711,4.3008 3.6133,9.1367 3.6055,14.047 -0.0117,7.7773 -3.1016,15.23 -8.6016,20.727 -5.4961,5.5 -12.949,8.5898 -20.727,8.6016 z"
id="path9154"
style="fill:url(#linearGradient9676);fill-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

3
static/icons/flagop.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="47px" height="52px" viewBox="-0.5 -0.5 47 52"><defs><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);&#xa;</style></defs><g><path d="M 6 13.27 C 12.47 11 19.53 11 26 13.27 C 32.47 15.54 39.53 15.54 46 13.27 L 46 31.14 C 39.53 33.41 32.47 33.41 26 31.14 C 19.53 28.87 12.47 28.87 6 31.14 L 6 51 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 1 3.27 C 7.47 1 14.53 1 21 3.27 C 27.47 5.54 34.53 5.54 41 3.27 L 41 21.14 C 34.53 23.41 27.47 23.41 21 21.14 C 14.53 18.87 7.47 18.87 1 21.14 L 1 41 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/></g></svg>

After

Width:  |  Height:  |  Size: 994 B

57
static/icons/mailbox.svg Normal file
View File

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="472.5pt"
height="542.49945pt"
version="1.1"
viewBox="0 0 472.5 542.49945"
id="svg172"
sodipodi:docname="noun-mailbox-4217786.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview174"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="pt"
showgrid="false" />
<defs
id="defs138">
<linearGradient
inkscape:collect="always"
id="linearGradient521">
<stop
style="stop-color:#3b82f6;stop-opacity:1;"
offset="0"
id="stop517" />
<stop
style="stop-color:#343786;stop-opacity:1;"
offset="1"
id="stop519" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient521"
id="linearGradient523"
x1="113.7519"
y1="8.7502489"
x2="586.25189"
y2="551.24969"
gradientUnits="userSpaceOnUse" />
</defs>
<g
id="g170"
transform="translate(-113.7519,-8.7502486)">
<path
d="M 490,157.5 H 437.5 V 128.566 L 571.83,78.195 c 3.4102,-1.2852 5.6719,-4.5469 5.6719,-8.1953 0,-3.6484 -2.2617,-6.9102 -5.6719,-8.1953 l -140,-52.5 c -2.6875,-1.0039 -5.6992,-0.62891 -8.0586,1.0039 -2.3594,1.6328 -3.7695,4.3203 -3.7695,7.1914 v 140 h -210 c -25.52,0.0273 -49.984,10.18 -68.027,28.223 -18.043,18.043 -28.195,42.508 -28.223,68.027 v 210 c 0,2.3203 0.92188,4.5469 2.5625,6.1875 1.64062,1.6406 3.8672,2.5625 6.1875,2.5625 h 192.5 v 70 c 0,2.3203 0.92188,4.5469 2.5625,6.1875 1.64062,1.6406 3.8672,2.5625 6.1875,2.5625 h 52.5 c 2.3203,0 4.5469,-0.92188 6.1875,-2.5625 1.6406,-1.64062 2.5625,-3.8672 2.5625,-6.1875 v -70 h 192.5 c 2.3203,0 4.5469,-0.92188 6.1875,-2.5625 1.6406,-1.64062 2.5625,-3.8672 2.5625,-6.1875 v -210 c -0.0273,-25.52 -10.18,-49.984 -28.223,-68.027 -18.043,-18.043 -42.508,-28.195 -68.027,-28.223 z M 437.5,30.12 543.83,69.995 437.5,109.87 Z M 210,455 H 131.25 V 253.75 c 0,-28.133 15.008,-54.133 39.375,-68.199 24.367,-14.066 54.383,-14.066 78.75,0 24.367,14.066 39.375,40.066 39.375,68.199 V 455 Z m 157.5,78.75 h -35 V 472.5 h 35 z M 568.75,455 H 306.25 V 253.75 C 306.22656,222.367 290.891,192.973 265.168,175 h 154.83 v 106.24 c -11.094,2.8633 -20.082,10.977 -24.066,21.719 -3.9844,10.742 -2.457,22.754 4.0859,32.156 6.543,9.4062 17.273,15.016 28.73,15.016 11.457,0 22.188,-5.6094 28.73,-15.016 6.543,-9.4023 8.0703,-21.414 4.0859,-32.156 -3.9844,-10.742 -12.973,-18.855 -24.066,-21.719 V 175 h 52.5 c 20.879,0.0234 40.895,8.3281 55.66,23.09 14.762,14.766 23.066,34.781 23.09,55.66 z m -140,-157.5 c 4.6406,0 9.0938,1.8438 12.375,5.125 3.2812,3.2812 5.125,7.7344 5.125,12.375 0,4.6406 -1.8438,9.0938 -5.125,12.375 -3.2812,3.2812 -7.7344,5.125 -12.375,5.125 -4.6406,0 -9.0938,-1.8438 -12.375,-5.125 -3.2812,-3.2812 -5.125,-7.7344 -5.125,-12.375 0.004,-4.6406 1.8516,-9.0859 5.1328,-12.367 3.2812,-3.2811 7.7266,-5.1289 12.367,-5.1328 z m -175,0 H 157.5 c -4.832,0 -8.75,3.918 -8.75,8.75 v 35 c 0,2.3203 0.92188,4.5469 2.5625,6.1875 1.64062,1.6406 3.8672,2.5625 6.1875,2.5625 h 96.25 c 2.3203,0 4.5469,-0.92188 6.1875,-2.5625 1.6406,-1.64062 2.5625,-3.8672 2.5625,-6.1875 v -35 c 0,-2.3203 -0.92188,-4.5469 -2.5625,-6.1875 -1.64062,-1.6406 -3.8672,-2.5625 -6.1875,-2.5625 z m -8.75,35 H 166.25 V 315 H 245 Z"
id="path140"
style="fill:url(#linearGradient523);fill-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

3
static/icons/mailop.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="62px" height="42px" viewBox="-0.5 -0.5 62 42"><defs/><g><path d="M 10 11 L 60 11 L 60 41 L 10 41 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 10 11 L 35 26 L 60 11" fill="none" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 1 1 L 51 1 L 51 31 L 1 31 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 1 1 L 26 16 L 51 1" fill="none" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/></g></svg>

After

Width:  |  Height:  |  Size: 873 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 714 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 252 KiB

View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block title %}
Aerogramme - Resilient open-source IMAP server with server-side encryption
Aerogramme - Resilient open-source IMAP server with built-in encryption
{% endblock title %}
{% block content %}
@ -29,74 +29,71 @@
</a>
</div>
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-x-32 py-12">
<a href="{{config.base_url}}/documentation/connect/websites/" class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/host.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Host a Website</span>
<a href="{{config.base_url}}/documentation/connect/imap/" class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='icons/mailbox.svg') }}" class="h-[256px] transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Mailbox</span>
</a>
<a href="{{config.base_url}}/documentation/connect/apps/" class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Store Media</span>
<a href="{{config.base_url}}/documentation/connect/caldav/" class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='icons/calendar.svg') }}" class="h-[256px] transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Calendar (coming soon)</span>
</a>
<a href="{{config.base_url}}/documentation/connect/backup/" class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Backup Target</span>
<a href="{{config.base_url}}/documentation/connect/carddav/" class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='icons/contacts.svg') }}" class="h-[256px] transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Contacts (coming later)</span>
</a>
</div>
</div>
<div class="w-full flex flex-col items-center justify-center border-b">
<div id="map-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">Re-inventing the mailbox</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 py-4 text-sm text-gray-700 border-t">
<p class="text-aerogramme-blue text-2xl tracking-wide">Storing your data as an encrypted log</p>
</div>
<div id="map-container" class="relative w-full shadow-inner border-b">
<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>
<p class="text-base text-gray-600">Each mailbox is a log of operations</p>
<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/servers.svg') }}" width="48">
<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/datachunks.svg') }}" width="48">
<span>Add or remove a flag</span>
<img class="select-none" src="{{ get_url(path='icons/flagop.svg') }}" width="48">
<span>Add or remove a flag (like seen/unseen)</span>
</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">Our Goals</h2>
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-aerogramme-blue leading-5">Goals</h2>
<div class="w-8 h-1 bg-aerogramme-blue"></div>
<p class="text-center leading-5 italic text-lg">We made it lightweight and kept the efficiency in mind:</p>
<p class="text-center leading-5 italic text-lg">Aerogramme log design enables the following properties:</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>Self-contained</span>
<p class="font-normal text-center">We ship a single dependency-free binary that runs on all Linux distributions</p>
<span>Privacy friendly</span>
<p class="font-normal text-center">Encrypted at the user level</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>Fast to deploy, safe to operate</span>
<p class="font-normal text-center">We are sysadmins, we know the value of operator-friendly software</p>
<span>Compatible</span>
<p class="font-normal text-center">Compatibility with existing protocols is kept. </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>Deploy everywhere on every machine</span>
<p class="font-normal text-center">We do not have a dedicated backbone, and neither do you,<br>
so we made software that run over the Internet across multiple datacenters</p>
<span>Easy to operate</span>
<p class="font-normal text-center">Running mutliple instance is easy, no possible mailbox conflicts</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">
<span>to network failures</span>,
<span>network latency</span>,
<span>disk failures</span>,
<span>sysadmin failures</span>
<span>datacenter failures</span>,
<span>sysadmin failures</span>,
</div>
</li>
</ul>