From ee816f3c4d10a642fadecbea0fe46c3594c06f2e Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Thu, 22 Oct 2020 21:43:07 -0500
Subject: [PATCH] Lots of additions.

- Adding a footer. Fixes #4
- Using cards for instance page. Fixes #3
- Adding security@lemmy.ml contact page and PGP. Fixes #2
---
 content/contact/index.md |  55 ++++++++++
 content/join/index.md    |  14 +--
 templates/base.html      |  57 +++++++----
 templates/index.html     | 210 +++++++++++++++++++++------------------
 templates/join.html      |  46 +++++++++
 templates/page.html      |   4 +-
 6 files changed, 255 insertions(+), 131 deletions(-)
 create mode 100644 content/contact/index.md
 create mode 100644 templates/join.html

diff --git a/content/contact/index.md b/content/contact/index.md
new file mode 100644
index 0000000..f0fbca2
--- /dev/null
+++ b/content/contact/index.md
@@ -0,0 +1,55 @@
++++
+template = "page.html"
++++
+
+# Contact
+
+- [Mastodon](https://mastodon.social/@LemmyDev)
+- [Matrix](https://riot.im/app/#/room/#rust-reddit-fediverse:matrix.org)
+- [GitHub](https://github.com/LemmyNet/lemmy)
+- [security@lemmy.ml](mailto:security@lemmy.ml)   *PGP key below*
+
+```
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+RnELNHhlJZ4s
+=VWLX
+-----END PGP PUBLIC KEY BLOCK-----
+
+```
diff --git a/content/join/index.md b/content/join/index.md
index f476b55..5149b9a 100644
--- a/content/join/index.md
+++ b/content/join/index.md
@@ -1,16 +1,4 @@
 +++
-template = "page.html"
-title = "Join"
+template = "join.html"
 +++
 
-# Lemmy servers
-
-Choose and join a server from the approved servers below.
-
-## [dev.lemmy.ml](https://dev.lemmy.ml)
-
-The main instance of lemmy.
-
-## [lemmygrad.ml](https://lemmygrad.ml)
-
-A collection of leftist communities, for memes, learning, news, discussion, media, or anything you like.
diff --git a/templates/base.html b/templates/base.html
index f8bafb1..3ec6955 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,6 +9,7 @@
     <style>
       :root {
         --grid-maxWidth: 108rem;
+        --color-success: #fafafa;
       }
       @font-face {
         font-family: 'CaviarDreams';
@@ -20,6 +21,7 @@
         --font-color: #f5f5f5;
         --color-grey: #ccc;
         --color-darkGrey: #777;
+        --color-success: #020f09;
       }
       .stylized {
         font-family: 'CaviarDreams', Fallback, sans-serif;
@@ -38,31 +40,46 @@
       p {
         font: 1.2em/1.62 sans-serif;
       }
+      .join-banner {
+        width: 100%;
+        height: 100px;
+        object-fit: scale-down;
+      }
     </style>
   </head>
 
   <body>
-    <div class="container">
+    <nav class="nav">
+      <div class="nav-left">
+        <a class="brand" href="/"><img src="/images/lemmy.svg"></a>
+        <a href="/apps">Apps</a>
+        <a href="/sponsors">Sponsors</a>
+        <a href="https://dev.lemmy.ml/docs/index.html">Docs</a>
+      </div>
+      <div class="nav-right">
+        <a href="https://github.com/LemmyNet"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
+        <a href="https://mastodon.social/@LemmyDev"><svg class="icon icon-mastodon"><use xlink:href="#icon-mastodon"></use></svg></a>
+        <a href="https://riot.im/app/#/room/#rust-reddit-fediverse:matrix.org"><svg class="icon icon-matrix"><use xlink:href="#icon-matrix"></use></svg></a>
+      </div>
+    </nav>
+    {% block content %} {% endblock %}
+
+    <br />
+    <br />
+    <br />
+
+    <footer>
       <nav class="nav">
         <div class="nav-left">
-          <a class="brand" href="/"><img src="/images/lemmy.svg"></a>
-          <a href="/apps">Apps</a>
-          <a href="/sponsors">Sponsors</a>
-          <a href="https://dev.lemmy.ml/docs/index.html">Docs</a>
+          <p style="padding-left:2rem">Made using <a style="display: inline-block" class="is-paddingless" href="https://www.getzola.org">Zola</a> and <a style="display: inline-block" class="is-paddingless" href="https://jenil.github.io/chota">Chota</a></p>
         </div>
         <div class="nav-right">
-          <a href="https://github.com/LemmyNet"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
-          <a href="https://mastodon.social/@LemmyDev"><svg class="icon icon-mastodon"><use xlink:href="#icon-mastodon"></use></svg></a>
-          <a href="https://riot.im/app/#/room/#rust-reddit-fediverse:matrix.org"><svg class="icon icon-matrix"><use xlink:href="#icon-matrix"></use></svg></a>
+          <a href="/join">Get Started</a>
+          <a href="/contact">Contact</a>
+          <a href="https://github.com/LemmyNet">Code</a>
         </div>
       </nav>
-      {% block content %} {% endblock %}
-
-      <br />
-      <footer class="text-right">
-        <p>Made using <a href="https://www.getzola.org">Zola</a> and <a href="https://jenil.github.io/chota">chota</a></p>
-      </footer>
-    </div>
+    </footer>
   </body>
   <script>
     if (window.matchMedia &&
@@ -77,17 +94,17 @@
     <defs>
     <symbol id="icon-github" viewBox="0 0 32 32">
     <path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64
-                     1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
+                       1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
     </symbol>
     <symbol id="icon-mastodon" viewBox="0 0 32 32">
     <path d="M30.924 10.505c0-6.941-4.548-8.976-4.548-8.976-2.293-1.053-6.232-1.496-10.321-1.529h-0.101c-4.091 0.033-8.027 0.476-10.32 1.529 0 0-4.548 2.035-4.548 8.976 0 1.589-0.031 3.491 0.020 5.505 0.165 6.789 1.245 13.479 7.521 15.14 2.893 0.765 5.379 0.927 7.38 0.816 3.629-0.2 5.667-1.296 5.667-1.296l-0.12-2.633c0 0-2.593 0.817-5.505 0.719-2.887-0.099-5.932-0.311-6.399-3.855-0.041-0.29-0.064-0.626-0.064-0.967 0-0.009 0-0.018 0-0.028v0.001c0 0 2.833 0.693 6.423 0.857 2.195 0.1
-              4.253-0.129 6.344-0.377 4.009-0.479 7.5-2.949 7.939-5.207 0.689-3.553 0.633-8.676 0.633-8.676zM25.559 19.451h-3.329v-8.159c0-1.72-0.724-2.592-2.171-2.592-1.6 0-2.403 1.035-2.403 3.083v4.465h-3.311v-4.467c0-2.048-0.803-3.083-2.403-3.083-1.447 0-2.171 0.873-2.171 2.592v8.159h-3.329v-8.404c0-1.719 0.437-3.084 1.316-4.093 0.907-1.011 2.092-1.528 3.565-1.528 1.704 0 2.995 0.655 3.848 1.965l0.828 1.391 0.829-1.391c0.853-1.311 2.144-1.965 3.848-1.965 1.472 0 2.659 0.517 3.565 1.528 0.877
-              1.009 1.315 2.375 1.315 4.093z"></path>
+                4.253-0.129 6.344-0.377 4.009-0.479 7.5-2.949 7.939-5.207 0.689-3.553 0.633-8.676 0.633-8.676zM25.559 19.451h-3.329v-8.159c0-1.72-0.724-2.592-2.171-2.592-1.6 0-2.403 1.035-2.403 3.083v4.465h-3.311v-4.467c0-2.048-0.803-3.083-2.403-3.083-1.447 0-2.171 0.873-2.171 2.592v8.159h-3.329v-8.404c0-1.719 0.437-3.084 1.316-4.093 0.907-1.011 2.092-1.528 3.565-1.528 1.704 0 2.995 0.655 3.848 1.965l0.828 1.391 0.829-1.391c0.853-1.311 2.144-1.965 3.848-1.965 1.472 0 2.659 0.517 3.565 1.528 0.877
+                1.009 1.315 2.375 1.315 4.093z"></path>
     </symbol>
     <symbol id="icon-matrix" viewBox="0 0 32 32">
     <path d="M0.843 0.733v30.533h2.197v0.733h-3.040v-32h3.040v0.733zM10.233 10.413v1.543h0.044c0.412-0.591 0.911-1.045 1.489-1.365 0.577-0.327 1.248-0.487 2-0.487 0.72 0 1.377 0.143 1.975 0.419 0.597 0.277 1.047 0.776 1.36 1.477 0.339-0.499 0.8-0.941 1.379-1.323 0.579-0.383 1.267-0.573 2.061-0.573 0.604 0 1.163 0.075 1.68 0.223 0.517 0.147 0.955 0.381 1.324 0.707 0.368 0.327 0.652 0.745 0.861 1.268 0.203 0.523 0.307 1.151 0.307
-             1.889v7.637h-3.132v-6.468c0-0.381-0.013-0.745-0.043-1.083-0.023-0.325-0.109-0.624-0.246-0.893l0.006 0.013c-0.136-0.253-0.335-0.456-0.577-0.594l-0.007-0.004c-0.259-0.147-0.609-0.221-1.047-0.221-0.443 0-0.8 0.085-1.071 0.252-0.267 0.166-0.483 0.39-0.635 0.656l-0.005 0.009c-0.153 0.268-0.261 0.581-0.306 0.915l-0.002 0.013c-0.049 0.313-0.078 0.676-0.080 1.044v6.36h-3.133v-6.4c0-0.339-0.005-0.671-0.024-1.003-0.012-0.333-0.081-0.647-0.197-0.936l0.007
-             0.019c-0.113-0.281-0.304-0.511-0.548-0.667l-0.006-0.003c-0.259-0.167-0.635-0.253-1.139-0.253-0.148 0-0.345 0.032-0.585 0.099-0.24 0.068-0.48 0.191-0.707 0.376-0.228 0.184-0.425 0.449-0.585 0.793-0.16 0.345-0.24 0.8-0.24 1.36v6.621h-3.132v-11.42zM31.157 31.267v-30.533h-2.197v-0.733h3.040v32h-3.040v-0.733z"></path>
+               1.889v7.637h-3.132v-6.468c0-0.381-0.013-0.745-0.043-1.083-0.023-0.325-0.109-0.624-0.246-0.893l0.006 0.013c-0.136-0.253-0.335-0.456-0.577-0.594l-0.007-0.004c-0.259-0.147-0.609-0.221-1.047-0.221-0.443 0-0.8 0.085-1.071 0.252-0.267 0.166-0.483 0.39-0.635 0.656l-0.005 0.009c-0.153 0.268-0.261 0.581-0.306 0.915l-0.002 0.013c-0.049 0.313-0.078 0.676-0.080 1.044v6.36h-3.133v-6.4c0-0.339-0.005-0.671-0.024-1.003-0.012-0.333-0.081-0.647-0.197-0.936l0.007
+               0.019c-0.113-0.281-0.304-0.511-0.548-0.667l-0.006-0.003c-0.259-0.167-0.635-0.253-1.139-0.253-0.148 0-0.345 0.032-0.585 0.099-0.24 0.068-0.48 0.191-0.707 0.376-0.228 0.184-0.425 0.449-0.585 0.793-0.16 0.345-0.24 0.8-0.24 1.36v6.621h-3.132v-11.42zM31.157 31.267v-30.533h-2.197v-0.733h3.040v32h-3.040v-0.733z"></path>
     </symbol>
     </defs>
   </svg>
diff --git a/templates/index.html b/templates/index.html
index 43fbf81..41abc59 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,54 +1,92 @@
 {% extends "base.html" %}
 {% block content %} 
 
-<div class="text-center">
-  <h1 class="stylized">Lemmy</h1>
-  <p>A link aggregator for the fediverse.</p>
-  <p>
+<div class="container">
+  <div class="text-center">
+    <h1 class="stylized">Lemmy</h1>
+    <p>A link aggregator for the fediverse.</p>
+    <p>
     <a class="button primary" href="/join">Join a Community</a>
     <a class="button primary" href="https://dev.lemmy.ml/docs/administration.html">Run a Server</a>
-  </p>
-  <img src="images/main_img.webp">
+    </p>
+    <img src="images/main_img.webp">
+  </div>
 </div>
 
 <br />
-<br />
+<div class="bg-success">
+  <br />
+  <div class="container">
+    <div class="text-center">
+      <h2>Follow communities anywhere in the world</h2>
+      <p><a href="https://github.com/LemmyNet">Lemmy</a> is similar to sites like <a href="https://reddit.com">Reddit</a>, <a href="https://lobste.rs">Lobste.rs</a>, or <a href="https://news.ycombinator.com/">Hacker News</a>: you subscribe to communities you're interested in, post links and discussions, then vote and comment on them. Lemmy isn't just a reddit alternative; its a network of interconnected communities ran by different people and organizations, all combining to create <b>a single, personalized front page</b> of your favorite news, articles, and memes. </p>
+      <p><a class="button primary" href="/join">Join a Community</a></p>
+    </div>
+  </div>
+  <br />
 
-<div class="text-center">
-  <h2>Follow communities anywhere in the world</h2>
-  <p><a href="https://github.com/LemmyNet">Lemmy</a> is similar to sites like <a href="https://reddit.com">Reddit</a>, <a href="https://lobste.rs">Lobste.rs</a>, or <a href="https://news.ycombinator.com/">Hacker News</a>: you subscribe to communities you're interested in, post links and discussions, then vote and comment on them. Lemmy isn't just a reddit alternative; its a network of interconnected communities ran by different people and organizations, all combining to create <b>a single, personalized front page</b> of your favorite news, articles, and memes. </p>
-  <p><a class="button primary" href="/join">Join a Community</a></p>
+  <br />
+
+  <div class="container">
+    <div class="row">
+      <div class="col-4">
+        <div>
+          <header class="is-center">
+            <img height=180 src="images/review_pic.webp">
+          </header>
+          <h4 class="text-center">Open Source</h4>
+          <p>Lemmy is and will always remain free, <a href="https://github.com/LemmyNet">open source</a> software, using the strong <a href="https://en.wikipedia.org/wiki/Copyleft">copyleft</a> <a href="/LICENSE">AGPL License</a>.</p>
+        </div>
+      </div>
+      <div class="col-4">
+        <div>
+          <header class="is-center">
+            <img height=180 src="/images/code_pic.webp">
+          </header>
+          <h4 class="text-center">Blazing Fast</h4>
+          <p>Made using some of the fastest frameworks and tools, including <a href="https://www.rust-lang.org">Rust</a>, <a href="https://actix.rs/">Actix</a>, <a href="http://diesel.rs/">Diesel</a>, <a href="https://infernojs.org">Inferno</a>,  and <a href="https://www.typescriptlang.org/">Typescript</a>.</p>
+        </div>
+      </div>
+      <div class="col-4">
+        <div>
+          <header class="is-center">
+            <img height=180 src="/images/mod_pic.webp">
+          </header>
+          <h4 class="text-center">Powerful Mod Tools</h4>
+          <p>Each server can set its own moderation policy, to help foster a healthy environment where all can feel comfortable contributing.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+  <br />
+
+  <div class="container">
+    <div class="text-center">
+      <h2>Create your own discussion platform</h2>
+      <p>With Lemmy, you can <a href="https://dev.lemmy.ml/docs/administration.html">easily host your own server</a>, and all these servers are <i>federated</i> (think email), and connected to the same universe, called the <a href="https://en.wikipedia.org/wiki/Fediverse">Fediverse</a>. For a link aggregator, this means that someone registered on one server can subscribe to communities elsewhere, and can have discussions with people on a completely different server.</p>
+      <p>
+      <a class="button primary" href="/join">Join a Community</a>
+      <a class="button primary" href="https://dev.lemmy.ml/docs/administration.html">Run a Server</a>
+      </p>
+    </div>
+  </div>
+  <br />
 </div>
 
-<br />
 <br />
 
-<div class="row">
-  <div class="col-4">
-    <div>
-      <header class="is-center">
-        <img height=180 src="images/review_pic.webp">
-      </header>
-      <h4 class="text-center">Open Source</h4>
-      <p>Lemmy is and will always remain free, <a href="https://github.com/LemmyNet">open source</a> software, using the strong <a href="https://en.wikipedia.org/wiki/Copyleft">copyleft</a> <a href="/LICENSE">AGPL License</a>.</p>
+<div class="container">
+  <div class="row">
+    <div class="col-6">
+      <h4>Live Updates</h4>
+      <p>New comments and posts stream in to your front page and inbox; No more page refreshes required.</p>
     </div>
-  </div>
-  <div class="col-4">
-    <div>
-      <header class="is-center">
-        <img height=180 src="/images/code_pic.webp">
-      </header>
-      <h4 class="text-center">Blazing Fast</h4>
-      <p>Made using some of the fastest frameworks and tools, including <a href="https://www.rust-lang.org">Rust</a>, <a href="https://actix.rs/">Actix</a>, <a href="http://diesel.rs/">Diesel</a>, <a href="https://infernojs.org">Inferno</a>,  and <a href="https://www.typescriptlang.org/">Typescript</a>.</p>
-    </div>
-  </div>
-  <div class="col-4">
-    <div>
-      <header class="is-center">
-        <img height=180 src="/images/mod_pic.webp">
-      </header>
-      <h4 class="text-center">Powerful Mod Tools</h4>
-      <p>Each server can set its own moderation policy, to help foster a healthy environment where all can feel comfortable contributing.</p>
+    <div class="col-6 is-center">
+      <video height=325 autoplay loop>
+        <source src="images/reply_vid.webm">
+      </video>
     </div>
   </div>
 </div>
@@ -56,71 +94,49 @@
 <br />
 <br />
 
-<div class="text-center">
-  <h2>Create your own discussion platform</h2>
-  <p>With Lemmy, you can <a href="https://dev.lemmy.ml/docs/administration.html">easily host your own server</a>, and all these servers are <i>federated</i> (think email), and connected to the same universe, called the <a href="https://en.wikipedia.org/wiki/Fediverse">Fediverse</a>. For a link aggregator, this means that someone registered on one server can subscribe to communities elsewhere, and can have discussions with people on a completely different server.</p>
-  <p>
-  <a class="button primary" href="/join">Join a Community</a>
-  <a class="button primary" href="https://dev.lemmy.ml/docs/administration.html">Run a Server</a>
-  </p>
-</div>
-
-<br />
-<br />
-
-<div class="row">
-  <div class="col-6">
-    <h4>Live Updates</h4>
-    <p>New comments and posts stream in to your front page and inbox; No more page refreshes required.</p>
-  </div>
-  <div class="col-6 is-center">
-    <video height=325 autoplay loop>
-      <source src="images/reply_vid.webm">
-    </video>
+<div class="container">
+  <div class="row">
+    <div class="col-6 is-center">
+      <img height=325 src="/images/mobile_pic.webp">
+    </div>
+    <div class="col-6">
+      <h4 class="is-marginless">More Features</h4>
+      <ul class="is-marginless">
+        <li>Self hostable, easy to deploy, via <a href="https://dev.lemmy.ml/docs/administration_install_docker.html">Docker</a>, or <a href="https://dev.lemmy.ml/docs/administration_install_ansible.html">Ansible</a>.
+        </li>
+        <li>Clean, mobile-friendly interface.</li>
+        <li>User avatar support.</li>
+        <li>Full vote scores <code>(+/-)</code> like old Reddit.</li>
+        <li>Themes, including light, dark, and solarized.</li>
+        <li>Emojis with autocomplete support. Start typing <code>:</code></li>
+        <li>User tagging using <code>@</code>, Community tagging using <code>!</code>.</li>
+        <li>Integrated image uploading in both posts and comments.</li>
+        <li>Notifications, including via email.</li>
+        <li><a href="https://weblate.yerbamate.dev/projects/lemmy/lemmy/">i18n / internationalization support for > 30 languages.</a></li>
+        <li>RSS / Atom feeds for <code>All</code>, <code>Subscribed</code>, <code>Inbox</code>, <code>User</code>, and <code>Community</code>.</li>
+        <li>Can fully erase your data, replacing all posts and comments.</li>
+        <li>NSFW post / community support.</li>
+      </ul>
+      </p>
+    </div>
   </div>
 </div>
 
 <br />
-<br />
-
-<div class="row">
-  <div class="col-6 is-center">
-    <img height=325 src="/images/mobile_pic.webp">
+<div class="bg-success">
+  <br />
+  <div class="container">
+    <div class="text-center">
+      <h2><a href="/sponsors">Support / Donate</a></h2>
+      <p>Lemmy is free, open-source software, meaning no advertising, monetizing, or venture capital, ever. <a href="/sponsors">Your donations</a> directly support full-time development of the project.
+      <p>
+      <a class="button primary" href="https://liberapay.com/Lemmy">Support on Liberapay</a>
+      <a class="button primary" href="https://www.patreon.com/dessalines">Support on Patreon</a>
+      <a class="button primary" href="https://opencollective.com/lemmy">Support on OpenCollective</a>
+      </p>
+    </div>
   </div>
-  <div class="col-6">
-    <h4 class="is-marginless">More Features</h4>
-    <ul class="is-marginless">
-      <li>Self hostable, easy to deploy, via <a href="https://dev.lemmy.ml/docs/administration_install_docker.html">Docker</a>, or <a href="https://dev.lemmy.ml/docs/administration_install_ansible.html">Ansible</a>.
-      </li>
-      <li>Clean, mobile-friendly interface.</li>
-      <li>Only a minimum of a username and password is required to sign up!</li>
-      <li>User avatar support.</li>
-      <li>Full vote scores <code>(+/-)</code> like old Reddit.</li>
-      <li>Themes, including light, dark, and solarized.</li>
-      <li>Emojis with autocomplete support. Start typing <code>:</code></li>
-      <li>User tagging using <code>@</code>, Community tagging using <code>!</code>.</li>
-      <li>Integrated image uploading in both posts and comments.</li>
-      <li>Notifications, including via email.</li>
-      <li><a href="https://weblate.yerbamate.dev/projects/lemmy/lemmy/">i18n / internationalization support for > 30 languages.</a></li>
-      <li>RSS / Atom feeds for <code>All</code>, <code>Subscribed</code>, <code>Inbox</code>, <code>User</code>, and <code>Community</code>.</li>
-      <li>Can fully erase your data, replacing all posts and comments.</li>
-      <li>NSFW post / community support.</li>
-    </ul>
-  </p>
-  </div>
-</div>
-
-<br />
-<br />
-
-<div class="text-center">
-  <h2><a href="/sponsors">Support / Donate</a></h2>
-  <p>Lemmy is free, open-source software, meaning no advertising, monetizing, or venture capital, ever. <a href="/sponsors">Your donations</a> directly support full-time development of the project.
-  <p>
-    <a class="button primary" href="https://liberapay.com/Lemmy">Support on Liberapay</a>
-    <a class="button primary" href="https://www.patreon.com/dessalines">Support on Patreon</a>
-    <a class="button primary" href="https://opencollective.com/lemmy">Support on OpenCollective</a>
-  </p>
+  <br />
 </div>
 
 {% endblock content %}
diff --git a/templates/join.html b/templates/join.html
new file mode 100644
index 0000000..1724660
--- /dev/null
+++ b/templates/join.html
@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% block content %} 
+<div class="container">
+  <h1>Lemmy servers</h1>
+  <p>Choose and join a server from the approved servers below.</p>
+
+  <div class="row">
+
+    <div class="card col-6">
+      <header>
+        <div class="row">
+          <h4 class="col">dev.lemmy.ml</h4>
+          <h4 class="col text-right"><i>5.9k users</i></h4>
+        </div>
+      </header>
+      <div class="is-center">
+        <img class="join-banner" src="/images/lemmy.svg" />
+      </div>
+      <br />
+      <p>The main instance of lemmy.</p>
+      <footer>
+        <a class="button primary" href="https://dev.lemmy.ml">Join</a>
+      </footer>
+    </div>
+
+    <div class="card col-6">
+      <header>
+        <div class="row">
+          <h4 class="col">lemmygrad.ml</h4>
+          <h4 class="col text-right"><i>2.3k users</i></h4>
+        </div>
+      </header>
+      <div class="is-center">
+        <img class="join-banner" src="https://lemmygrad.ml/pictrs/image/YI2XNWaVUv.png?format=webp" />
+      </div>
+      <br />
+      <p>A collection of leftist communities, for memes, learning, news, discussion, media, or anything you like.</p>
+      <footer>
+        <a class="button primary" href="https://lemmygrad.ml">Join</a>
+      </footer>
+    </div>
+
+  </div>
+
+</div>
+{% endblock content %}
diff --git a/templates/page.html b/templates/page.html
index c8e9343..5727e31 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,4 +1,6 @@
 {% extends "base.html" %}
 {% block content %} 
-<p>{{ page.content | safe  }}</p>
+<div class="container">
+  <p>{{ page.content | safe  }}</p>
+</div>
 {% endblock content %}