Added sponsorship banner and page

docs/sponsorship.md

@@ -0,0 +1,14 @@
+---
+template: overrides/main.html
+---
+
+<style>
+  :root > * {
+    --md-primary-fg-color: #e91e63;
+  }
+</style>
+
+# Sponsorship
+
+## Becoming a sponsor
+

material/assets/manifest.json

@@ -7,8 +7,8 @@
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.a68abb33.min.js.map",
   "assets/stylesheets/main.css": "assets/stylesheets/main.364d010a.min.css",
   "assets/stylesheets/main.css.map": "assets/stylesheets/main.364d010a.min.css.map",
-  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.0ad0ad40.min.css",
+  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.823d2928.min.css",
-  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.0ad0ad40.min.css.map",
+  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.823d2928.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.a53427c9.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a53427c9.min.css.map"
 }

material/assets/stylesheets/overrides.823d2928.min.css

@@ -1,3 +1,3 @@
-:root{--md-admonition-icon--sponsor: url( 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"/></svg>' )}.md-typeset .admonition.sponsor{border-color:#ea4aaa}.md-typeset .sponsor>.admonition-title{background-color:rgba(234,74,170,.1)}.md-typeset .sponsor>.admonition-title::before{background-color:#ea4aaa;-webkit-mask-image:var(--md-admonition-icon--sponsor);mask-image:var(--md-admonition-icon--sponsor)}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}
+:root{--md-admonition-icon--sponsor: url( 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"/></svg>' )}.md-typeset .admonition.sponsor{border-color:#ea4aaa}.md-typeset .sponsor>.admonition-title{background-color:rgba(234,74,170,.1)}.md-typeset .sponsor>.admonition-title::before{background-color:#ea4aaa;-webkit-mask-image:var(--md-admonition-icon--sponsor);mask-image:var(--md-admonition-icon--sponsor)}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}@-webkit-keyframes tx-sponsor{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.1)}}@keyframes tx-sponsor{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.1)}}.tx-sponsor{margin-top:1rem;text-align:center}.tx-sponsor a{color:#e91e63;font-variant:all-petite-caps}.tx-sponsor hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-sponsor__heart{-webkit-animation:tx-sponsor 1000ms infinite;animation:tx-sponsor 1000ms infinite}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}
 
-/*# sourceMappingURL=overrides.0ad0ad40.min.css.map*/
+/*# sourceMappingURL=overrides.823d2928.min.css.map*/

material/overrides/main.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.0ad0ad40.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.823d2928.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">
@@ -35,3 +35,30 @@
     <strong>Twitter</strong>
   </a>
 {% endblock %}
+{% block content %}
+  {{ super() }}
+  <aside class="tx-sponsor md-typeset">
+    <a href="{{ 'sponsorship' | url }}" title="Becoming a sponsor">
+      <hr>
+      <span class="twemoji">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
+          <path d="M3.136 17.387v42.932l42.932 21.467L3.136 17.387z"></path>
+          <path fill-opacity=".5" d="M21.91 8l42.933 64.398-18.775 9.388L3.136 17.387 21.91 8z"></path>
+          <path d="M67.535 17.387L40.273 35.543l21.878 32.818 5.384 2.691V17.387z"></path>
+          <path fill-opacity=".25" d="M67.535 17.387v53.666l18.774-9.388V8l-18.774 9.387z"></path>
+        </svg>
+      </span>
+      <span class="twemoji">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+        </svg>
+      </span>
+      <span class="twemoji tx-sponsor__heart">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"></path>
+        </svg>
+      </span>
+      <hr>
+    </a>
+  </aside>
+{% endblock %}

mkdocs.yml

@@ -143,6 +143,7 @@ nav:
     - Creating your site: creating-your-site.md
     - Publishing your site: publishing-your-site.md
     - Customization: customization.md
+    - Sponsorship: sponsorship.md
     #- Troubleshooting: troubleshooting.md
     - Data privacy: data-privacy.md
     - License: license.md

src/assets/stylesheets/overrides.scss

@@ -38,4 +38,5 @@
 
 @import "overrides/admonition";
 @import "overrides/announce";
+@import "overrides/sponsor";
 @import "overrides/typeset";

src/assets/stylesheets/overrides/_sponsor.scss

@@ -0,0 +1,66 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Keyframes
+// ----------------------------------------------------------------------------
+
+// Heart animation
+@keyframes tx-sponsor {
+  0%, 40%, 80%, 100% {
+    transform: scale(1);
+  }
+  20%, 60% {
+    transform: scale(1.1);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Sponsor banner
+.tx-sponsor {
+  margin-top: px2rem(20px);
+  text-align: center;
+
+  // Sponsor link
+  a {
+    color: $clr-pink-500;
+    font-variant: all-petite-caps;
+  }
+
+  // Horizontal separators
+  hr {
+    display: inline-block;
+    width: px2rem(40px);
+    margin: px2em(16px);
+    vertical-align: middle;
+    background-color: currentColor;
+    border: none;
+  }
+
+  // Pumping heart
+  &__heart {
+    animation: tx-sponsor 1000ms infinite;
+  }
+}

src/overrides/main.html

@@ -71,3 +71,34 @@
     <strong>Twitter</strong>
   </a>
 {% endblock %}
+
+<!-- Content -->
+{% block content %}
+  {{ super() }}
+
+  <!-- Sponsor banner -->
+  <aside class="tx-sponsor md-typeset">
+    <a href="{{ 'sponsorship' | url }}" title="Becoming a sponsor">
+      <hr />
+      <span class="twemoji">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
+          <path d="M3.136 17.387v42.932l42.932 21.467L3.136 17.387z"></path>
+          <path fill-opacity=".5" d="M21.91 8l42.933 64.398-18.775 9.388L3.136 17.387 21.91 8z"></path>
+          <path d="M67.535 17.387L40.273 35.543l21.878 32.818 5.384 2.691V17.387z"></path>
+          <path fill-opacity=".25" d="M67.535 17.387v53.666l18.774-9.388V8l-18.774 9.387z"></path>
+        </svg>
+      </span>
+      <span class="twemoji">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+        </svg>
+      </span>
+      <span class="twemoji tx-sponsor__heart">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"></path>
+        </svg>
+      </span>
+      <hr />
+    </a>
+  </aside>
+{% endblock %}