website-remake (#488)

Reviewed-on: #488
Co-authored-by: antilopa <antilopa@disroot.org>
Co-committed-by: antilopa <antilopa@disroot.org>

pages/01.home/_about/fullbar.en.md

@@ -3,9 +3,12 @@ title: Disroot is
 bgcolor: '#1F5C60'
 fontcolor: '#FFFFFF'
 text_align: center
+padding: 20px 0px 140px
 body_classes: modular
 ---
 
-<br>
+<br><br>
 ## Disroot is a platform providing online services based on principles of freedom, privacy, federation and decentralization.
 **No tracking, no ads, no profiling, no data mining!**
+
+<br><br>

pages/01.home/_donatebutton/fullbar.en.md

@@ -3,9 +3,9 @@ title: Donate button
 fontcolor: '#FFF'
 bgcolor: '#fff'
 text_align: center
-padding: 20px
+padding: 40px 0px 0px
 body_classes: modular
 ---
 
-<br>
+<br><br>
-<a class="button button2" href="https://disroot.org/en/donate">SUPPORT US</a>
+<a class="button button1" href="https://disroot.org/en/donate">SUPPORT US</a>

pages/01.home/_donation/2col.en.md

@@ -3,14 +3,17 @@ title: Online-donation
 bgcolor: '#fff'
 wider_column: left
 fontcolor: '#1e5a5e'
+padding: 10px
 ---
 
+
 ![](premium.png?class=reward) **Disroot** relies on donations and support from its community and users of services. If you would like to keep the project going and help create space for potential new disrooters, please use any of the methods available to make a financial contribution. [Domain linking](/services/email#alias) is available for regular supporters.
 
 You can also collaborate by buying [extra email storage](/services/email#storage) space and/or [extra cloud storage](/services/nextcloud#storage) space.
 
 ---
 
+
 <div class="donate">
 
 <a href="https://liberapay.com/Disroot/donate" target=_blank><img alt="Donate using Liberapay" src="donate/_donate/lp_button.png" /></a>

pages/01.home/_signup/fullbar.en.md

@@ -1,11 +1,11 @@
 ---
 title: Sign up
-bgcolor: '#8EB726'
+bgcolor: '#c2cfb7'
-fontcolor: '#FFF'
+fontcolor: '#1f5c60'
 text_align: center
-padding: 20px
+padding: 20px 0px 0px
 body_classes: modular
 ---
 
-<br>
+<br><br>
-<a class="button button1" href="https://user.disroot.org/pwm/public/newuser/">SIGN UP</a>
+<a class="button button2" href="https://user.disroot.org/pwm/public/newuser/">SIGN UP</a>

pages/02.about/_about-who-and-why/2col.en.md

@@ -3,20 +3,23 @@ title: Email
 bgcolor: '#1F5C60'
 fontcolor: '#FFFFFF'
 body_classes: modular
-wider_column: right
+wider_column: none
----
-
-<a class="button button1" href="/mission-statement">Read our mission statement</a>
-
 ---
 
 **Disroot** is a project that was born from the personal need to communicate, share and organize ourselves within our circles through tools that met a series of fundamental criteria for us: they had to be **open**, **decentralized**, **federated** and above all **respectful** towards **freedom** and **privacy**. None of the most popular solutions complied with them, but in our search we found some very interesting projects that did. And since we thought that they should be available to all those with similar ethical principles, we decided not only to group these applications and share them with others, but also to manage them according to those values. That's how **Disroot** started.
 
-
 The project is based in Amsterdam, was founded by **Muppeth** and **Antilopa** in 2015, it is maintained by volunteers and relies on the support of its community. Between 2017 and 2018, a group of members started to get very actively involved and to collaborate very closely. In 2019, two of them, **Fede** and **Meaz**, officially became part of the Core Team that manages the platform. Two years later, in 2021, **Avg_Joe** joined the tasks and responsibilities.
 
+<br>
+
+---
 
 **Disroot** aims to change the way people are used to interact on the web. We want to encourage and show them not only that there are open and ethical alternatives but also that it is the only possible way to break free from the *walled gardens* proposed and promoted by proprietary software and corporations, either through our platform, others that have similar values and goals or even their own projects.
 
 
 We are convinced that we can build together a truly independent network, focused on the benefit of the people and not on their exploitation.
+
+<br><br>
+
+<a class="button button1" href="/mission-statement">Read our mission statement</a>
+

pages/02.about/_core-team/fullbar.en.md

@@ -1,10 +1,12 @@
 ---
 title: 'Green bar'
-bgcolor: '#8EB726'
+bgcolor: '#c2cfb7'
 fontcolor: '#1F5C60'
 text_align: center
+padding: 50px 0px 0px
 ---
 
+<br>
 
 ## Disroot Team
 

pages/02.about/_greenenergy/2col.en.md

@@ -1,12 +1,11 @@
 ---
-title: Online-donation
+title: Green-energy
 bgcolor: '#1F5C60'
 wider_column: left
 fontcolor: '#ffffff'
 ---
 
+<br>
+
+<a href="https://api.thegreenwebfoundation.org/greencheckimage/disroot.org?nocache=true" target=_blank><img src="https://api.thegreenwebfoundation.org/greencheckimage/disroot.org?nocache=true" alt="This website is hosted Green - checked by thegreenwebfoundation.org" style="height:120px"></a>
 Disroot servers are hosted in a data-center using renewable energy.
-
----
-
-<a href="https://api.thegreenwebfoundation.org/greencheckimage/disroot.org?nocache=true" target=_blank><img src="https://api.thegreenwebfoundation.org/greencheckimage/disroot.org?nocache=true" alt="This website is hosted Green - checked by thegreenwebfoundation.org" style="height:100px"></a>

pages/02.about/_privacy/2col.en.md

@@ -1,11 +1,29 @@
 ---
 title: privacy
 fontcolor: '#555'
-wider_column: left
+wider_column: none
 bgcolor: '#fff'
 
 ---
 
+<br>
+
+# Federation and Decentralization
+
+Most internet services are run from centralized point owned and run by corporations. These store private data of their users and analyze it using advanced algorithms in order to create accurate profiles of their 'users'. This information is often used to exploit the people for the sake of advertisers. Information can also be obtained by governmental institutions or by malicious hackers. Data can be removed without warning due to dubious reasons or regional censorship policies.
+
+A decentralized service can reside on multiple machines, owned by different individuals, companies or organization. With federation protocols those instances can interact and form one network of many nodes (servers hosting similar services). One might be able to shut down one node but never the entire network. In such a setup censorship is practically impossible.
+
+Think of how we use E-mail; you can choose any service provider or set up your own, and still exchange emails with people using another email provider. E-mail is built upon a decentralized and federated protocol.
+
+These two principals, together, sets up the backdrop for a huge network that depends on a rather simple infrastructure and relatively low costs. Any machine can become a server and be an equal participant in the network. From a small desktop computer at your home to a dedicated server or racks with multiple servers. This approach provides the possibility to create the biggest user owned global network - just as the Internet was intended to be.
+
+We do not wish for **Disroot** to become one centralized entity but rather a part of a larger community - one node out of many. We hope others will be inspired to create more projects with similar intentions.
+
+---
+
+<br>
+
 # Privacy
 
 Software can be created and shaped into anything. Every button, every color and every link that we see and use on the web was put there by someone. When we use the applications provided for us, we mostly don't see - and sometimes don't care about - much of what happens behind the interface we use. We connect with other people, we store our files, organize meetings and festivals, send emails or chat for hours and it all happens magically.
@@ -17,6 +35,8 @@ Your files on the cloud are encrypted with your user password, every bin-paste a
 
 ---
 
-<br>
+# Transparency and openness
-![](priv1.jpg?lightbox=1024)
+
-![](priv2.jpg?lightbox=1024)
+At **Disroot** we use 100% free and open source software. This means that the source code (the way the software operates) is publicly accessible. Anyone is able to contribute improvements or adjustments to the software and it can be audited and controlled at any moment - no hidden back-doors or other malicious malware.
+
+We want to be fully transparent and open towards people using our services and therefore we publish information about the current state of the project, the financial status, our plans and ideas. We would also like to hear your suggestions and feedback so we can deliver the best experience possible to all **Disrooters**.

pages/02.about/modular.en.md

@@ -9,9 +9,7 @@ content:
         custom:
             - _about-who-and-why
             - _core-team
-            - _federation
             - _privacy
-            - _transparency
             - _greenenergy
 body_classes: modular
 header_image: about-banner.jpeg

pages/03.services/02.email/_email-encryption/2col.en.md

@@ -1,19 +1,22 @@
 ---
 title: 'Email Encryption'
-bgcolor: '#8EB726'
+bgcolor: 'var(--highlight)'
 fontcolor: '#1F5C60'
 text_align: left
 wider_column: right
+auto_url_links: true
 ---
 
 ## What is encryption
 
+Encryption is when you change data with a special encoding process so that the data becomes unrecognizable (it's encrypted).  You can then apply a special decoding process and you will get the original data back. By keeping the decoding process a secret, nobody else can recover the original data from the encrypted data.
+
+![mailvelope](en/mailvelope.svg?resize=150)
+You can use Mailvelope, a browser add-on in Chrome, Edge and Firefox, that securely encrypts your emails with PGP using Disroot webmail. Check this [howto](https://mailvelope.com/en/help).
+
 ---
 
-Encryption is when you change data with a special encoding process so that the data becomes unrecognizable; it's encrypted.  You can then apply a special decoding process and you will get the original data back. By keeping the decoding process a secret, nobody else can recover the original data from the encrypted data.
-
-[Video - How asymmetric encryption works](https://invidious.snopyta.org/E5FEqGYLL0o)
-
 <br>
-![mailvelope](en/mailvelope.svg?resize=150)
+[Video - How asymmetric encryption works](https://invidious.materialio.us/enbed/E5FEqGYLL0o?)
-Mailvelope is a browser add-on for Chrome, Edge and Firefox that securely encrypts your emails with PGP using Disroot webmail. Check this [guide](https://mailvelope.com/en/help) for more details.
+<iframe style="position:center;bottom:0px;left:0px;height:200px;width:350px" src="https://invidious.materialio.us/embed/E5FEqGYLL0o?" frameborder="0" allowfullscreen></iframe>
+

pages/03.services/02.email/_email-settings/fullbar.en.md

@@ -1,15 +1,16 @@
 ---
 title: 'Email Settings'
-bgcolor: '#1F5C60'
+bgcolor: 'var(--secondary)'
 fontcolor: '#FFF'
 text_align: center
+padding: 40px
 ---
 
 <br><br>
-##### IMAP: <span style="color:#8EB726">disroot.org</span> | <span style="color:#8EB726">SSL</span> Port <span style="color:#8EB726">993</span> | Authentication: <span style="color:#8EB726">Normal Password</span>
+##### IMAP: <span class="highlight">disroot.org</span> | <span class="highlight">SSL</span> Port <span class="highlight">993</span> | Authentication: <span class="highlight">Normal Password</span>
-##### SMTP: <span style="color:#8EB726">disroot.org</span> | <span style="color:#8EB726">STARTTLS</span> Port <span style="color:#8EB726">587</span> | Authentication: <span style="color:#8EB726">Normal Password</span>
+##### SMTP: <span class="highlight">disroot.org</span> | <span class="highlight">STARTTLS</span> Port <span class="highlight">587</span> | Authentication: <span class="highlight">Normal Password</span>
-##### SMTPS: <span style="color:#8EB726">disroot.org</span> | <span style="color:#8EB726">TLS</span> Port <span style="color:#8EB726">465</span> | Authentication: <span style="color:#8EB726">Normal Password</span>
+##### SMTPS: <span class="highlight">disroot.org</span> | <span class="highlight">TLS</span> Port <span class="highlight">465</span> | Authentication: <span class="highlight">Normal Password</span>
-##### POP: <span style="color:#8EB726">disroot.org</span> | <span style="color:#8EB726">SSL</span> Port <span style="color:#8EB726">995</span> | Authentication: <span style="color:#8EB726">Normal Password</span>
+##### POP: <span class="highlight">disroot.org</span> | <span class="highlight">SSL</span> Port <span class="highlight">995</span> | Authentication: <span class="highlight">Normal Password</span>
 
 ---
 

pages/03.services/02.email/_email-webmail/2col.en.md

@@ -7,25 +7,27 @@ wider_column: right
 
 ## Webmail
 
+<br>
+You can access your mail from any devices by using our webmail at [https://webmail.disroot.org](https://webmail.disroot.org)
+
+Our webmail is powered by **[Roundcube](https://roundcube.net)**. Roundcube is a modern approach to webmail. It's simple, fast and provides most of the features one could expect from webmail:
+
 ![webmail](en/webmail.png)
 
 ---
 
-<br>
+<br><br><br><br>
-You can access your email from any device by using our hosted webmail at [https://webmail.disroot.org](https://webmail.disroot.org)
-
-Our webmail is powered by **Roundcube**. Roundcube is a modern approach to webmail. It's simple, fast and provides most of the features one could expect from webmail:
-
 <ul class=disc>
 <li>A nice responsive skin: a beautiful Disroot flavor skin with multi-device support.</li>
-<li>Translations: user interface is available in more than 80 languages.</li>
+<li>Translations: the interface is translated in more than 80 languages.</li>
-<li>Drag-and-drop message management: easily move your messages with your mouse.</li>
+<li>Drag-&-drop message management: move your messages with your mouse.</li>
 <li>Full support for MIME and HTML messages.</li>
-<li>Attachment previews: see images directly within messages.</li>
+<li>Attachment previews: see the images directly within your messages.</li>
-<li>Threaded message listing: display conversations in a threaded fashion.</li>
+<li>Threaded message listing: Display conversations in a threaded mode.</li>
-<li>Filters: set up rules to automatically move or copy email to specific folders, as well as forwarding or rejecting emails (according to the subject, sender, etc.)</li>
+<li>Filters: Set up rules to automatically move or copy email to specific folders, forward or reject emails, according to subject, sender, etc.</li>
-<li>Folder management: add, remove, or hide your folders.</li>
+<li>Folders: Manage your folders (add, remove, or hide).</li>
 </ul>
 
 
-Project homepage: [https://roundcube.net](https://roundcube.net)
+
+[Project Homepage: [https://roundcube.net](https://roundcube.net)]: #

pages/03.services/02.email/_email-x-storage/2col.en.md

@@ -2,6 +2,7 @@
 title: 'Extra mailbox storage'
 bgcolor: '#FFF'
 fontcolor: '#555'
+padding: 0px
 wider_column: left
 section_id: storage
 ---
@@ -24,8 +25,13 @@ Here are the prices **per year** (payment fees included):
 <br>
 Transactions made within the EU are subjected to extra VAT of 21%.
 
+<a class="button button1" href="/forms/extra-storage-space">Request Extra Mailbox Storage</a>
+
 ---
 
-<br><br>
+## Custom domain linking
+
+This feature is a perk for your financial contribution to the project. It allows you to use your own domain to be able to send and receive emails. It is a lifetime reward.
+
+<a class="button button2" href="https://disroot.org/perks">Request Custom Domain</a>
 
-<a class="button button1" href="/forms/extra-storage-space">Request Extra Mailbox Storage</a>

pages/03.services/02.email/_email/2col.en.md

@@ -1,19 +1,22 @@
 ---
 title: Email
-bgcolor: '#FFF'
+bgcolor: 'var(--secondary)'
-fontcolor: '#1F5C60'
+fontcolor: '#FFF'
 body_classes: modular
 wider_column: right
 ---
 
-<a class="button button2" href="https://user.disroot.org/pwm/public/newuser">Sign up for Disroot</a>
+## E-mail
-<a class="button button1" href="https://webmail.disroot.org/">Log in</a>
+
-<a class="button button1" href="http://mdlwkwn2nhzzuymmyr5mjyoqppoyp46k4remaliu2zrmkayl5yfeh7ad.onion">Tor</a>
+**Disroot** provides secure email accounts for your desktop client or via a web interface. The communication between you and the mail server is encrypted with SSL, providing as much privacy as possible. Furthermore, all the emails being sent out from our server are encrypted as well (TLS) if the recipients email server supports it. This means that emails are no longer sent as traditional "postcard", but are actually put in an "envelope".
+
+<br><br>
 
 ---
 
-## E-mail
+<br> <br>
 
-**Disroot** provides secure email accounts for your desktop or mobile email client, or via our webmail. The communication between your device and the mail server is encrypted with SSL, providing as much privacy as possible. Furthermore, all emails sent out from our server are TLS encrypted if the recipient's email server supports it. This means that emails are no longer sent as a "postcard", but are actually put in an "envelope".
+**Nevertheless, we encourage you to always be cautious when using email communication, and to make use of GPG end-to-end encryption to ensure your correspondence is as private as can be.**
+
+<span><a class="button button1" href="https://webmail.disroot.org/">Log in</a> &nbsp; &nbsp; &nbsp; <a class="button button1" href="https://user.disroot.org/pwm/public/newuser">Sign up for Disroot</a> &nbsp; &nbsp; &nbsp; <a class="button button1" href="http://mdlwkwn2nhzzuymmyr5mjyoqppoyp46k4remaliu2zrmkayl5yfeh7ad.onion">Tor</a></span>
 
-**Nevertheless, we encourage you to be cautious when communicating using email, and to make use of GPG end-to-end encryption to ensure your communication is as secure and private as possible.**

pages/03.services/02.email/_green-bar/fullbar.en.md

@@ -1,6 +1,6 @@
 ---
 title: 'Green bar'
-bgcolor: '#8EB726'
+bgcolor: '#c2cfb7'
 fontcolor: '#FFF'
 text_align: center
 ---

pages/03.services/02.email/modular.en.md

@@ -8,15 +8,14 @@ content:
         dir: asc
         custom:
             - _email
-            - _green-bar
             - _email-clients_header
             - _email-clients
+            - _green-bar
             - _email-settings
             - _email-webmail
             - _email-encryption
-            - _email-alias
             - _email-x-storage
 
 body_classes: modular
-header_image: 'riot-dog.jpg'
+header_image: 'mail-header.png'
 ---

pages/04.contact/_links/2col.en.md

@@ -1,7 +1,7 @@
 ---
 title: Contact
-bgcolor: '#1F5C60'
+bgcolor: '#fff'
-fontcolor: '#FFF'
+fontcolor: 'var(--secondary)'
 process:
     markdown: true
     twig: true

pages/04.contact/modular.en.md

@@ -1,6 +1,6 @@
 ---
 title: Contact
-bgcolor: '#1F5C60'
+bgcolor: '#fff'
 content:
     items: '@self.modular'
     order:
@@ -10,5 +10,5 @@ content:
             - _contact
             - _links
 body_classes: modular
-header_image: contact-banner.jpg
+header_image: contact-banner.png
 ---