Add page about federation

content/en/usage/decentralization.md

@@ -0,0 +1,63 @@
+---
+title: Decentralization
+menu:
+  docs:
+    parent: usage
+    weight: 2
+---
+
+Mastodon is a **federated** social network.
+
+## What is federation?
+
+**Federation** is a form of decentralization. Instead of a single central node that all people use, there are multiple nodes, that any number of people can use.
+
+|Grade of centralization|Examples|
+|:---------------------:|--------|
+|Centralized|Twitter, Facebook, Instagram|
+|Federated|E-mail, XMPP|
+|Distributed|BitTorrent, IPFS, Scuttlebutt|
+
+A Mastodon server can operate alone. Just like a traditional website, people sign up on it, post messages, upload pictures and talk to each other. *Unlike* a traditional website, Mastodon servers can interoperate, letting their users communicate with each other, just like you can send an e-mail from your GMail address to someone from Outlook.
+
+In practical terms: Imagine if you could follow an Instagram user from your Twitter account and comment on their photos without leaving your account. If Twitter and Instagram were federated services, that would be possible.
+
+## The fediverse
+
+Mastodon uses a standartized, open protocol to implement federation. It is called ActivityPub. Any software that likewise implements federation via ActivityPub can seamlessly communicate with Mastodon, just like Mastodon servers communicate with one another.
+
+The **fediverse** ("federated universe") is the name for all servers that can communicate with each other. That includes all Mastodon servers, but also other implementations:
+
+- Misskey
+- Pleroma
+- PeerTube
+- Plume
+- and many more
+
+The fediverse does not have its own brand, so you will more often hear "follow me on Mastodon" than "follow me on the fediverse", but technically the latter is more correct.
+
+## Practical implications
+### Addressing people
+
+Mastodon usernames actually consist of two parts:
+
+- The local username, e.g. `alice`
+- And the domain of the server, e.g. `example.com`
+
+Just like an e-mail address. For convenience sake, Mastodon allows you to skip the second part when addressing people on the same server as you, but you have to keep in mind when sharing your username with other people, you need to include the domain or they won't be able to find you as easily.
+
+|{{< no >}}|{{< yes >}}|
+|:--------:|:---------:|
+|I'm @alice on Mastodon!|I'm @alice@example.com on Mastodon!|
+
+The search form in Mastodon will find people either with the above address form, or the link to the person's profile, so you can share that instead if you prefer.
+
+### Following people
+
+As long as you encounter a person within your app's user interface, e.g. the web interface on your home server, or your mobile app, you can just click "follow" and you won't notice a difference if that person is on your server or not.
+
+However if you come across someone's public profile hosted on a different server, there's an obstacle: That server sees you as just another anonymous visitor.
+
+So when you click "follow", a dialog will pop up asking you to enter your own full username (with the domain part, most importantly). This way, the dialog actually sends you back to your home server, where you are logged in and can really do stuff.
+
+You will also notice that dialog when clicking on "reply", "boost" or "favourite" on public pages of other servers.

content/en/usage/privacy.md

@@ -3,7 +3,7 @@ title: Privacy
 menu:
   docs:
     parent: usage
-    weight: 1
+    weight: 3
 ---
 
 ## Publishing levels

layouts/partials/footer.html

@@ -7,7 +7,7 @@
   </a>
 
   <p class="legal" style="float: right; text-align: right">
-    <a href='https://joinmastodon.org'>Join Mastodon</a> · <a href='https://bridge.joinmastodon.org'>Find Twitter friends</a> · <a href='https://mastodon.social/@Mastodon' target='_blank'><i class='fab fa-mastodon'></i></a> · <a href='https://twitter.com/MastodonProject' rel='nofollow' target='_blank'><i class='fab fa-twitter'></i></a> · <a href='https://facebook.com/joinmastodon' rel='nofollow' target='_blank'><i class='fab fa-facebook'></i></a>
+    <a href='https://joinmastodon.org'>Join Mastodon</a> · <a href='https://bridge.joinmastodon.org'>Find Twitter friends</a> · <a href='https://blog.joinmastodon.org'>Blog</a> · <a href='https://mastodon.social/@Mastodon' target='_blank'><i class='fab fa-mastodon'></i></a> · <a href='https://twitter.com/MastodonProject' rel='nofollow' target='_blank'><i class='fab fa-twitter'></i></a> · <a href='https://facebook.com/joinmastodon' rel='nofollow' target='_blank'><i class='fab fa-facebook'></i></a>
   </p>
 
   <p class="legal"><a href='https://source.joinmastodon.org/mastodon/docs/tree/master/content/{{.Lang}}/{{.File.Path}}'>View source</a> · <a href='https://creativecommons.org/licenses/by-sa/4.0/'>CC BY-SA 4.0</a> · <a href='https://joinmastodon.org/imprint'>Imprint</a></p>

static/style.css

@@ -340,4 +340,46 @@ main .mastodon-embed {
     color: #fff;
     font-size: 16px; }
 
+.cta-banner {
+  background: #2b90d9;
+  border-radius: 4px;
+  text-align: center;
+  padding: 40px; }
+  .cta-banner h4 {
+    font-size: 24px;
+    line-height: 1.08;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #fff; }
+  .cta-banner p {
+    color: #fff;
+    font-size: 18px;
+    line-height: 1.22;
+    margin-bottom: 20px; }
+  .cta-banner > a {
+    font-weight: 500;
+    color: #2b90d9;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-family: inherit;
+    display: inline-block;
+    text-align: center;
+    font-size: 16px;
+    text-decoration: none;
+    line-height: 36px;
+    padding: 4px 16px;
+    margin: 0 auto;
+    border: 0;
+    cursor: pointer; }
+    .cta-banner > a.secondary {
+      padding: 2px 14px;
+      border: 2px solid #fff;
+      background: transparent;
+      margin-left: 4px;
+      color: #fff; }
+    @media screen and (max-width: 375px) {
+      .cta-banner > a {
+        margin-bottom: 10px; } }
+
 /*# sourceMappingURL=style.css.map */

static/style.scss

@@ -478,3 +478,55 @@ main {
     font-size: 16px;
   }
 }
+
+.cta-banner {
+  background: $vibrant;
+  border-radius: 4px;
+  text-align: center;
+  padding: 40px;
+
+  h4 {
+    font-size: 24px;
+    line-height: 1.08;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #fff;
+  }
+
+  p {
+    color: #fff;
+    font-size: 18px;
+    line-height: 1.22;
+    margin-bottom: 20px;
+  }
+
+  & > a {
+    font-weight: 500;
+    color: $vibrant;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-family: inherit;
+    display: inline-block;
+    text-align: center;
+    font-size: 16px;
+    text-decoration: none;
+    line-height: 36px;
+    padding: 4px 16px;
+    margin: 0 auto;
+    border: 0;
+    cursor: pointer;
+
+    &.secondary {
+      padding: 2px 14px;
+      border: 2px solid #fff;
+      background: transparent;
+      margin-left: 4px;
+      color: #fff;
+    }
+
+    @media screen and (max-width: 375px) {
+      margin-bottom: 10px;
+    }
+  }
+}