adopt Netlify OSS policy plan

Author: thescientist13

src/components/footer/footer.js

@@ -6,11 +6,21 @@ export default class Footer extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
       <footer class="${styles.footer}">
-        <div class="${styles.logo}">
-          ${greenwoodLogo}
-        </div>
+        <div class="${styles.flexContainer}">
+          <div class="${styles.logo}">
+            ${greenwoodLogo}
+          </div>
+
+          <div class="${styles.netlifyBanner}">
+            <a href="https://www.netlify.com/">This site is powered by Netlify</a>
+          </div>
 
-        <app-social-tray></app-social-tray>
+          <app-social-tray></app-social-tray>
+
+          <div class="${styles.netlifyBannerMobile}">
+            <a href="https://www.netlify.com/">This site is powered by Netlify</a>
+          </div>
+        </div>
       </footer>
     `;
   }

src/components/footer/footer.module.css

@@ -1,16 +1,20 @@
 .footer {
   background-color: var(--color-tertiary);
   padding: var(--size-fluid-1);
+}
+
+.flexContainer {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
 .logo {
   padding-left: var(--size-fluid-1);
   display: flex;
   flex-direction: column;
-  flex: 1;
+  flex: 1 1 30%;
   justify-content: center;
   color: var(--color-gray);
 }
@@ -20,16 +24,53 @@
   fill: var(--color-gray);
 }
 
+.netlifyBanner {
+  display: none;
+  flex-direction: column;
+  flex: 1 1 30%;
+  justify-content: center;
+  text-align: center;
+
+  & a {
+    color: var(--color-white);
+    font-size: var(--font-size-1);
+  }
+}
+
+.netlifyBannerMobile {
+  display: flex;
+  margin: var(--size-1);
+
+  & a {
+    color: var(--color-white);
+    font-size: var(--font-size-1);
+  }
+}
+
 .footer app-social-tray {
-  border: var(--border-size-1) solid var(--color-black);
-  border-radius: var(--radius-6);
-  padding: var(--size-2);
+  flex: 1 1 30%;
+  display: flex;
+  align-items: right;
+  justify-content: right;
+  padding: 1px;
 
   & ul {
     background-color: var(--color-secondary);
+    border: var(--border-size-1) solid var(--color-black);
+    border-radius: var(--radius-6);
   }
 
   & svg {
     fill: var(--color-white);
   }
 }
+
+@media (min-width: 720px) {
+  .netlifyBanner {
+    display: flex;
+  }
+
+  .netlifyBannerMobile {
+    display: none;
+  }
+}

src/components/footer/footer.spec.js

@@ -18,7 +18,7 @@ describe("Components/Footer", () => {
     });
 
     it("should have the Greenwood logo", () => {
-      const logo = footer.querySelectorAll("div svg");
+      const logo = footer.querySelectorAll("div > svg");
 
       expect(logo.length).equal(1);
       expect(logo[0]).not.equal(undefined);