Fix twitter username and ad sponsors

assets/style.scss

@@ -491,39 +491,6 @@ main {
   margin-bottom: 35px;
 }
 
-.panel {
-  display: block;
-  border-radius: 4px;
-  text-decoration: none;
-  background-size: 60%;
-  background-color: #000;
-  background-size: 60%;
-  background-repeat: no-repeat;
-  background-position: top right;
-  text-align: left;
-
-  @media screen and (max-width: $mobile-width) {
-    background-size: contain;
-  }
-
-  .overlay {
-    padding: 20px;
-  }
-
-  h5 {
-    padding-top: 111px;
-    font-size: 26px;
-    font-weight: 600;
-    line-height: 1.58;
-    color: #fff;
-  }
-
-  p {
-    color: #fff;
-    font-size: 16px;
-  }
-}
-
 .cta-banner {
   background: $vibrant;
   border-radius: 4px;
@@ -777,3 +744,68 @@ main {
     }
   }
 }
+
+.sponsorship {
+  background: darken($darkest, 4%);
+  border-radius: 4px;
+  padding: 40px 0;
+
+  h2 {
+    line-height: 21px;
+    font-weight: 500;
+    font-size: 16px;
+    color: lighten($darkest, 40%);
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .logo-grid {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: row;
+    }
+
+    a {
+      display: inline-block;
+      text-decoration: none;
+      padding: 0 10px;
+
+      img {
+        display: block;
+        margin: 0;
+        height: 28px;
+        width: auto;
+        opacity: 0.8;
+        transition: all $transition-in;
+        filter: grayscale(100%);
+      }
+
+      &:hover {
+        img {
+          opacity: 0.9;
+          transition: all $transition-out;
+          filter: grayscale(0%);
+        }
+      }
+    }
+  }
+
+  h2 {
+    color: $lightest;
+  }
+
+  .logo-grid > div {
+    flex-wrap: wrap;
+  }
+
+  .logo-grid a {
+    padding: 20px;
+  }
+}

i18n/en.toml

@@ -60,3 +60,6 @@ other = "Response"
 
 [otherTranslations]
 other = "Also available in:"
+
+[sponsoredBy]
+other = "Sponsored by"

layouts/_default/baseof.html

@@ -16,7 +16,7 @@
   {{ end }}
 
   <meta name="twitter:title" content="{{ .Title }}">
-  <meta name="twitter:site" content="@MastodonProject">
+  <meta name="twitter:site" content="@joinmastodon">
 
   <link rel="canonical" href="{{ .Permalink }}">
 </head>

layouts/partials/footer.html

@@ -1,13 +1,34 @@
 <footer class="footer container">
-  <a href="https://designbyhumans.com/shop/mastodon" class="panel" style="background-image: url(/shirt.png)">
-    <div class="overlay">
-      <h5>{{ i18n "merch" }}</h5>
-      <p>{{ i18n "shirtsAndStickers" }}</p>
+  <div class="sponsorship">
+    <div class="container">
+      <h2>
+        {{ i18n "sponsoredBy" }}
+      </h2>
+
+      <div class="logo-grid">
+        <div>
+          <a href="https://www.dotcom-monitor.com/es/">
+            <img src="/assets/sponsors/dotcom-monitor-logo.png" alt="Dotcom-Monitor" />
+          </a>
+
+          <a href="https://www.loadview-testing.com/api-testing/">
+            <img src="/assets/sponsors/LoadView-logo.png" alt="LoadView" />
+          </a>
+
+          <a href="https://webhostingbuddy.com/wordpress-hosting/">
+            <img src="/assets/sponsors/web-hosting-buddy-logo.png" alt="Web Hosting Buddy" />
+          </a>
+
+          <a href="https://www.drivencoffee.com/">
+            <img src="/assets/sponsors/driven-coffee-logo.png" alt="Driven Coffee" />
+          </a>
+        </div>
+      </div>
     </div>
-  </a>
+  </div>
 
   <p class="legal legal--right">
-    <a href='https://joinmastodon.org'>{{ i18n "joinMastodon" }}</a> · <a href='https://blog.joinmastodon.org'>{{ i18n "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://joinmastodon.org'>{{ i18n "joinMastodon" }}</a> · <a href='https://blog.joinmastodon.org'>{{ i18n "blog" }}</a> · <a href='https://mastodon.social/@Mastodon' target='_blank'><i class='fab fa-mastodon'></i></a> · <a href='https://twitter.com/joinmastodon' rel='nofollow' target='_blank'><i class='fab fa-twitter'></i></a>
   </p>
 
   <p class="legal">{{ with .File }}<a href='https://github.com/tootsuite/documentation/tree/master/content/{{ .Lang }}/{{ .File.Path }}'>{{ i18n "viewSource" }}</a> · {{ end }}<a href='https://creativecommons.org/licenses/by-sa/4.0/'>CC BY-SA 4.0</a> · <a href='https://joinmastodon.org/imprint'>{{ i18n "imprint" }}</a></p>