Documentation: tweak demo hosting attribution

docs/assets/extra.css

@@ -101,3 +101,32 @@ h4 code {
         border-top: .05rem solid var(--md-default-fg-color--lightest);
     }
 }
+
+.md-typeset .demo-sponsor {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .35rem;
+    margin-top: -1rem;
+    margin-bottom: 2rem;
+    color: var(--md-default-fg-color--light);
+    font-size: .65rem;
+}
+
+.md-typeset .demo-sponsor a {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    color: inherit;
+    font-weight: 600;
+}
+
+.md-typeset .demo-sponsor a:hover {
+    color: var(--md-accent-fg-color);
+}
+
+.md-typeset .demo-sponsor img {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+}

docs/index.md

@@ -12,9 +12,10 @@ physical documents into a searchable online archive so you can keep, well, _less
 [Get started](setup.md){ .md-button .md-button--primary .index-callout }
 [Demo](https://demo.paperless-ngx.com){ .md-button .md-button--secondary target=\_blank }
 
-<div style="display: flex; justify-content: end; margin-top: -1.5rem;">
-  <a href="https://fyrastack.com" target="_blank" aria-label="Demo hosting provided by Fyra Stack">
-    <img src="assets/sponsors/fyra-stack.svg" alt="" class="no-lightbox" width="28px" style="vertical-align: middle;"> Fyra Stack
+<div class="demo-sponsor">
+  <span>Demo hosting by</span>
+  <a href="https://fyrastack.com" target="_blank" rel="noopener">
+    <img src="assets/sponsors/fyra-stack.svg" alt="" class="no-lightbox" width="20" height="20"> Fyra Stack
   </a>
 </div>