Update links to github and social media on settings page

Author: MoralCode

_config.yml

@@ -0,0 +1,6 @@
+
+name: ClassClock
+githubURL: https://github.com/MoralCode/ClassClock
+slackURL: https://join.slack.com/t/classclock/shared_invite/enQtNTE0MDkyNzAwNzU3LWNhMGUwODU2ZjhkYTYxMTgzNDE1OWEyMGY2OGNiNTBhOWM5NDVhZGUzNDVlNzRiZTE3NTNmODFjYWNkNDhmMDU
+twitterURL: https://twitter.com/classclockapp
+instagramURL: https://www.instagram.com/classclockapp/

settings.html

@@ -15,14 +15,17 @@
 
 
 <section id="credits" class="centered topSpace">
+    <ul class="footer__social">
+        <li><a href="{{ site.githubURL }}"><i class="fab fa-github" aria-hidden="true"></i></a></li>
+        <li><a href="{{ site.twitterURL }}"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
+        <li><a href="{{ site.instagramURL }}"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
+    </ul>
+
 
-    <a class=" topSpace bottomSpace" href="https://github.com/MoralCode/ClassClock">View on GitHub</a>
-    <a class=" topSpace" href="https://join.slack.com/t/classclock/shared_invite/enQtNTE0MDkyNzAwNzU3LWNhMGUwODU2ZjhkYTYxMTgzNDE1OWEyMGY2OGNiNTBhOWM5NDVhZGUzNDVlNzRiZTE3NTNmODFjYWNkNDhmMDU">Come chat on Slack!</a><br>
     <p id="credits" class="">
+        Created by: <a href="https://www.adriancedwards.com">Adrian Edwards</a> and
+        <a href="https://nbdeg.com/">Nick DeGroot</a><br>
         Idea by: <a href="https://twitter.com/MrKumprey">Dan Kumprey</a>
-        <br>Created by: <a href="https://www.adriancedwards.com">Adrian Edwards</a> and
-        <a href="https://nbdeg.com/">Nick DeGroot</a>
-        <br><a href="https://github.com/MoralCode/ClassClock/graphs/contributors">Contributors</a>
     </p>
 </section>
 

style.css

@@ -158,4 +158,39 @@ section#options > * {
 .verticalFlex {
     display: flex;
     flex-direction: column;
-}
+}
+
+
+.footer__social {
+    list-style: none;
+    margin: 0;
+  }
+  
+  .footer__social li {
+    display: inline-block;
+    font-size: 15px;
+    padding: 0;
+    margin-right: 12px;
+  }
+  
+  .footer__social li a {
+    display: block;
+    font-size: 48px;
+    /* line-height: 32px; */
+    text-align: center;
+    /* background-color: rgba(255, 255, 255, 0.03); */
+    color: #ffffff;
+    /* border-radius: 50%; */
+  }
+  
+  .footer__social li a:hover,
+  .footer__social li a:focus,
+  .footer__social li a:active {
+    /* background-color: #5b4f96; */
+    color: #c7c7c7;
+    font-weight: normal;
+  }
+  
+  .footer__social li:last-child {
+    margin-right: 0;
+  }