adopt Netlify OSS policy plan

Author: thescientist13

src/components/footer/footer.js

@@ -8,28 +8,38 @@ export default class Footer extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
       <footer class="${styles.footer}">
-        <div class="${styles.logo}">
-          ${greenwoodLogo}
-        </div>
-        <ul class="${styles.socialTray}">
-          <li class="${styles.socialIcon}">
-            <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
-              ${githubIcon}
-            </a>
-          </li>
+        <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>
+          <div class="${styles.socialTray}">
+            <ul>
+              <li class="${styles.socialIcon}">
+                <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
+                  ${githubIcon}
+                </a>
+              </li>
 
-          <li class="${styles.socialIcon}">
-            <a href="https://discord.gg/dmDmjFCKuH" title="Discord">
-              ${discordIcon}
-            </a>
-          </li>
+              <li class="${styles.socialIcon}">
+                <a href="https://discord.gg/dmDmjFCKuH" title="Discord">
+                  ${discordIcon}
+                </a>
+              </li>
 
-          <li class="${styles.socialIcon}">
-            <a href="https://twitter.com/PrjEvergreen" title="Twitter">
-              ${twitterIcon}
-            </a>
-          </li>
-        </ul>
+              <li class="${styles.socialIcon}">
+                <a href="https://twitter.com/PrjEvergreen" title="Twitter">
+                  ${twitterIcon}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="${styles.netlifyBannerMobile}">
+          <a href="https://www.netlify.com/">This site is powered by Netlify</a>
+        </div>
       </footer>
     `;
   }

src/components/footer/footer.module.css

@@ -1,16 +1,18 @@
 .footer {
   background-color: var(--color-tertiary);
   padding: var(--size-fluid-1) var(--size-fluid-3);
+}
+
+.flexContainer {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  align-items: 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);
 }
@@ -23,24 +25,58 @@
   fill: var(--color-white);
 }
 
+.netlifyBanner {
+  display: none;
+  flex: 1 1 30%;
+  justify-content: center;
+  text-align: center;
+
+  & a {
+    color: var(--color-white);
+    font-size: var(--font-size-1);
+  }
+}
+
+.netlifyBannerMobile {
+  text-align: center;
+
+  & a {
+    color: var(--color-white);
+    font-size: var(--font-size-1);
+  }
+}
+
 .socialTray {
+  flex: 1 1 30%;
   display: flex;
-  gap: var(--size-2);
-  list-style-type: none;
-  background-color: var(--color-secondary);
-  border: var(--border-size-1) solid var(--color-black);
-  border-radius: var(--radius-6);
-  padding: var(--size-2) var(--size-3);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+  justify-content: end;
+
+  & ul {
+    display: inline-flex;
+    gap: var(--size-3);
+    list-style-type: none;
+    background-color: var(--color-secondary);
+    border: var(--border-size-1) solid var(--color-black);
+    border-radius: var(--radius-6);
+    padding: var(--size-2) var(--size-3);
+    cursor: pointer;
+  }
 }
 
 .socialIcon {
-  display: flex;
   align-items: center;
 }
 
 .socialIcon svg {
   fill: var(--color-gray);
 }
+
+@media (min-width: 768px) {
+  .netlifyBanner {
+    display: flex;
+  }
+
+  .netlifyBannerMobile {
+    display: none;
+  }
+}

src/components/footer/footer.spec.js

@@ -33,7 +33,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);