shurg host banner

Author: Alexia Michelle

src/css/custom.css

@@ -116,15 +116,16 @@ h6 {
   background: var(--ifm-background-color) !important;
 }
 
-.footer {
-  background: #080a10 !important;
-  border-top: none;
-  color: #d6dae2;
-  padding: 5rem 0 4rem;
+.sponsor-banner-wrapper {
+  background: #080a10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.75rem 1rem 1.25rem;
   position: relative;
 }
 
-.footer::before {
+.sponsor-banner-wrapper::before {
   content: '';
   position: absolute;
   top: 0;
@@ -135,6 +136,33 @@ h6 {
   opacity: 0.85;
 }
 
+html[data-theme='light'] .sponsor-banner-wrapper {
+  background: #f7f8fb;
+}
+
+.sponsor-banner-link {
+  display: inline-flex;
+  transition: opacity 180ms ease;
+}
+
+.sponsor-banner-link:hover {
+  opacity: 0.75;
+  text-decoration: none;
+}
+
+.sponsor-banner-img {
+  height: 48px;
+  width: auto;
+}
+
+.footer {
+  background: #080a10 !important;
+  border-top: none;
+  color: #d6dae2;
+  padding: 3rem 0 4rem;
+  position: relative;
+}
+
 .footer .footer__title {
   color: #f5f7fb;
 }

src/theme/Footer/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+
+export default function FooterWrapper(props) {
+  return (
+    <>
+      <div className="sponsor-banner-wrapper">
+        <Link
+          href="https://shurg.host"
+          className="sponsor-banner-link"
+          aria-label="Powered by Shrug.host"
+        >
+          <ThemedImage
+            alt="Powered by Shrug.host"
+            className="sponsor-banner-img"
+            sources={{
+              light: useBaseUrl('/img/shrug-host-dark.svg'),
+              dark: useBaseUrl('/img/shrug-host-light.svg'),
+            }}
+          />
+        </Link>
+      </div>
+      <Footer {...props} />
+    </>
+  );
+}