added credits to footer

Author: salmacodecomputerlove

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -1,10 +1,47 @@
 <footer class="footer">
-  <p class="footer__copyright">&copy; {{ date | date: "yyyy" }} Fretonator</p>
+  <h6 class="footer__creditsTitle">Fretonator is open source</h6>
+  <p class="footer__thanksCopy">
+    Thank you to the following generous contributors:
+  </p>
+  <ul class="footer__creditsList">
+    <li class="footer__creditsListItem">
+      <a
+        href="http://drozar.io"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__creditsListItemLink"
+      >
+        Jacob D'Rozario
+      </a>
+      - design & UX
+    </li>
+    <li class="footer__creditsListItem">
+      <a
+        href="https://github.com/geometricpanda"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__creditsListItemLink"
+        >Jim Drury</a
+      >
+      - all things Angular
+    </li>
+    <li class="footer__creditsListItem">
+      <a
+        href="https://ell.io.tt/"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__creditsListItemLink"
+        >Elliot Brooks</a
+      >
+      - audio playback
+    </li>
+  </ul>
   <a
     class="footer__viewGithub"
     href="https://github.com/ishythefishy/fretonator"
     rel="nofollow noopener noreferrer"
     target="_blank"
     >View on GitHub</a
   >
+  <p class="footer__copyright">&copy; {{ date | date: 'yyyy' }} Fretonator</p>
 </footer>

apps/fretonator-web/src/app/common/footer/footer.component.scss

@@ -1,9 +1,10 @@
-@import "../../../styles/vars";
-@import "../../../styles/functions";
-@import "../../../styles/mixins";
+@import '../../../styles/vars';
+@import '../../../styles/functions';
+@import '../../../styles/mixins';
+@import '../../../styles/typography';
 
 .footer {
-  background-color: var(--peach);
+  background-color: var(--black);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -12,8 +13,39 @@
   padding: pxToRem($grid-unit * 2);
 }
 
+.footer__thanksCopy {
+  @include font_bodyCopy();
+  color: var(--offwhite);
+}
+
+.footer__creditsTitle {
+  @include font_medium();
+  margin-top: pxToRem($grid-unit);
+  margin-bottom: pxToRem($grid-unit);
+  color: var(--peach);
+  font-weight: var(--font-weight-bold);
+}
+
+.footer__creditsList {
+  list-style: none;
+  text-align: center;
+  padding: 0;
+  margin-bottom: pxToRem($grid-unit * 4);
+}
+
+.footer__creditsListItem {
+  @include font_bodyCopy();
+  color: var(--offwhite);
+}
+
+.footer__creditsListItemLink {
+  @include text_link();
+  color: var(--yellow);
+  border-color: var(--yellow);
+}
+
 .footer__copyright {
-  color: var(--black);
+  color: var(--offwhite);
   font-size: pxToRem(12);
   letter-spacing: var(--letter-spacing-display);
   font-weight: var(--font-weight-bold);
@@ -23,7 +55,7 @@
 }
 
 .footer__viewGithub {
-  color: var(--black);
+  color: var(--offwhite);
   font-size: pxToRem(12);
   display: block;
   margin-bottom: pxToRem($grid-unit * 2);