feat!: Add list of monthly/annual members to website (#2927)

Signed-off-by: blacklight447 <niek@privacyguides.org>
Signed-off-by: Daniel Gray <dngray@privacyguides.org>
Signed-off-by: Freddy <freddy@privacyguides.org>

theme/assets/stylesheets/extra.css

@@ -527,3 +527,75 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
     list-style-type: disc;
     padding-inline-start: 1em;
 }
+
+/* Donations */
+.md-typeset .mdx-specialthanks p {
+  margin:2em 0;
+  text-align:center
+}
+.md-typeset .mdx-specialthanks img {
+  height:3.25rem
+}
+.md-typeset .mdx-specialthanks p:last-child {
+  display:flex;
+  flex-wrap:wrap;
+  justify-content:center
+}
+.md-typeset .mdx-specialthanks p:last-child>a {
+  display:block;
+  flex-shrink:0
+}
+.md-typeset .mdx-donors__list {
+  margin:2em 0
+}
+.md-typeset .mdx-donors__list:after {
+  clear:both;
+  content:"";
+  display:block
+}
+[dir=ltr] .md-typeset .mdx-donors__item {
+  float:left
+}
+[dir=rtl] .md-typeset .mdx-donors__item {
+  float:right
+}
+.md-typeset .mdx-donors__item {
+  border-radius:100%;
+  display:block;
+  height:3rem;
+  margin:.2rem;
+  overflow:hidden;
+  transform:scale(1);
+  transition:color 125ms,transform 125ms;
+  width:3rem
+}
+.md-typeset .mdx-donors__item:focus,
+.md-typeset .mdx-donors__item:hover {
+  transform:scale(1.1)
+}
+.md-typeset .mdx-donors__item:focus img,
+.md-typeset .mdx-donors__item:hover img {
+  filter:grayscale(0)
+}
+.md-typeset .mdx-donors__item--private {
+  background:var(--md-default-fg-color--lightest);
+  color:var(--md-default-fg-color--lighter);
+  font-size:.8rem;
+  font-weight:700;
+  line-height:2.9rem;
+  text-align:center
+}
+.md-typeset .mdx-donors__item img {
+  display:block;
+  filter:grayscale(100%) opacity(75%);
+  height:auto;
+  transition:filter 125ms;
+  width:100%
+}
+.md-typeset .mdx-donors-button {
+  font-weight:400
+}
+.md-typeset .mdx-donors-count,
+.md-typeset .mdx-donors-total {
+  font-weight:700
+}

theme/main.html

@@ -92,23 +92,3 @@
   </script>
   {% endif %}
 {% endblock %}
-
-{% if config.theme.language == "en" and config.extra.context == "production" %}
-  {% block announce %}
-    <span>
-      <strong>We don't run ads, we don't use affiliate links, and we don't have paywalls.</strong> We rely on our readers to build this community and spread the word.<br>
-      If you've received $3 worth of knowledge here, please donate today if you're able to. It really helps.
-      <a href="https://donate.magicgrants.org/privacyguides" target="_blank">
-        <span class="twemoji pg-red">
-          {% include ".icons/material/heart.svg" %}
-        </span>
-        <span class="pg-red">
-          Donate now
-        </span>
-        <span class="twemoji pg-red">
-          {% include ".icons/material/arrow-right.svg" %}
-        </span>
-      </a>
-    </span>
-  {% endblock %}
-{% endif %}

theme/partials/donate.html

@@ -0,0 +1,8 @@
+<div class="md-header__option">
+  <div class="">
+    {% set icon = "material/heart" %}
+    <a href="/en/about/donate/" class="md-header__button md-icon pg-red" title="Donate">
+      {% include ".icons/" ~ icon ~ ".svg" %}
+    </a>
+  </div>
+</div>

theme/partials/header.html

@@ -136,6 +136,8 @@
     {% if not config.theme.palette is mapping %}
       {% include "partials/javascripts/palette.html" %}
     {% endif %}
+
+    {% include "partials/donate.html" %}
   </nav>
 
   <!-- Navigation tabs (sticky) -->