Changed the design of the Musare main page. Update the color scheme to give more attention to the station cards in the middle of the page. Updated the footer social media "buttons" to now be icons. Deleted a few files that were not being used.

app/client/stylesheets/cardcaption.css

@@ -11,6 +11,7 @@ figcaption {
     filter: alpha(opacity=0);
     opacity: 0;
     position: absolute;
+    top: 50%;
     height: 100%;
     width: 100%;
     background: rgba(0,0,0,.6);
@@ -35,4 +36,4 @@ figcaption a{
     width: 100%;
     position: absolute !important;
     bottom: 0;
-}
+}

app/client/templates/footer.html

@@ -1,24 +1,24 @@
 <template name="footer">
-    <footer class="page-footer teal accent-4">
+    <footer class="page-footer grey lighten-2">
         <div class="container row">
             <div class="col l6 s12">
-                <h5 class="white-text">Stay Connected</h5>
-                <p class="grey-text text-lighten-4">Follow us on social media or send us an email!</p>
-                <a href="https://www.facebook.com/MusareMusic" target="_blank" class="waves-effect waves-light btn blue darken-3 social">Facebook</a>
-                <a href="https://twitter.com/musareapp" target="_blank" class="waves-effect waves-light btn light-blue accent-2 social">Twitter</a>
-                <a href="mailto:musaremusic@gmail.com" class="waves-effect waves-light btn grey darken-1 social">Contact Us</a>
+                <h5 class="grey-text text-darken-2">Stay Connected</h5>
+                <p class="grey-text text-darken-1">Follow us on social media or send us an email!</p>
+                <a href="https://www.facebook.com/MusareMusic" target="_blank"><img src="\FB-f-Logo__blue_57.png" height="24dp" width="24dp" /></a>
+                <a href="https://twitter.com/musareapp" target="_blank"><img src="\TwitterLogo_#55acee.png" height="24dp" width="24dp" /></a>
+                <a href="mailto:musaremusic@gmail.com"><i class="material-icons">email</i></a>
             </div>
             <div class="col l4 offset-l2 s12">
-                <h5 class="white-text">Links</h5>
+                <h5 class="grey-text text-darken-2">Links</h5>
                 <ul>
-                    <li><a class="grey-text text-lighten-3" href="/faq">FAQ</a></li>
-                    <li><a class="grey-text text-lighten-3" href="/terms">Terms</a></li>
-                    <li><a class="grey-text text-lighten-3" href="/privacy">Privacy</a></li>
+                    <li><a class="grey-text text-darken-1" href="/faq">FAQ</a></li>
+                    <li><a class="grey-text text-darken-1" href="/terms">Terms</a></li>
+                    <li><a class="grey-text text-darken-1" href="/privacy">Privacy</a></li>
                 </ul>
             </div>
         </div>
         <div class="footer-copyright">
-            <div class="container">
+            <div class="container grey-text text-darken-1">
                Copyright &copy; 2016 Musare
             </div>
         </div>

app/client/templates/header.html

@@ -2,45 +2,45 @@
     <header>
         <!-- Dropdown Structure -->
         <ul id="contributeDrop" class="dropdown-content">
-            <li><a href="https://www.github.com/Musare/Musare" target="_blank">Github</a></li>
-            <li><a href="donate.html">Donate</a></li>
-            <li><a href="/feedback">Feedback</a></li>
+            <li><a href="https://www.github.com/Musare/Musare" target="_blank" class="grey-text text-darken-4">Github</a></li>
+            <li><a href="donate.html" class="grey-text text-darken-4">Donate</a></li>
+            <li><a href="/feedback" class="grey-text text-darken-4">Feedback</a></li>
         </ul>
         <ul id="aboutDrop" class="dropdown-content">
-            <li><a href="/project">The Project</a></li>
-            <li><a href="/team">The Team</a></li>
+            <li><a href="/project" class="grey-text text-darken-4">The Project</a></li>
+            <li><a href="/team" class="grey-text text-darken-4">The Team</a></li>
         </ul>
         <ul id="accountDrop" class="dropdown-content">
             {{#if currentUser}}
-                <li><a href="/u/{{currentUser.profile.username}}">Profile</a></li>
-                <li><a href="/settings">Settings</a></li>
+                <li><a href="/u/{{currentUser.profile.username}}" class="grey-text text-darken-4">Profile</a></li>
+                <li><a href="/settings" class="grey-text text-darken-4">Settings</a></li>
                 <li class="divider"></li>
-                <li class="logout"><a>Logout</a></li>
+                <li class="logout"><a class="grey-text text-darken-4">Logout</a></li>
             {{else}}
-                <li><a href="/login">Login</a></li>
-                <li><a href="/register">Register</a></li>
+                <li><a href="/login" class="grey-text text-darken-4">Login</a></li>
+                <li><a href="/register" class="grey-text text-darken-4">Register</a></li>
             {{/if}}
         </ul>
         <nav>
-            <div class="nav-wrapper teal accent-4">
-                <a href="/" class="brand-logo light">Musare</a>
-                <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
+            <div class="nav-wrapper grey darken-4">
+                <a href="/" class="brand-logo light white-text">Musare</a>
+                <a href="#" data-activates="mobile-navi" class="button-collapse white-text"><i class="material-icons">menu</i></a>
                 <ul class="right hide-on-med-and-down scroll-fix">
                   {{#if isModerator}}
-                    <li><a  class="orange-text" href="/admin"><b>Admin</b></a></li>
+                    <li><a  class="teal-text text-accent-4" href="/admin"><b>Admin</b></a></li>
                   {{/if}}
-                    <li><a href="/news">News</a></li>
-                    <li><a class="dropdown-button" href="#!" data-activates="contributeDrop">Contribute<i
+                    <li><a href="/news" class="white-text">News</a></li>
+                    <li><a class="dropdown-button white-text" href="#!" data-activates="contributeDrop">Contribute<i
                             class="material-icons right">arrow_drop_down</i></a></li>
-                    <li><a class="dropdown-button" href="#!" data-activates="aboutDrop">About<i
+                    <li><a class="dropdown-button white-text" href="#!" data-activates="aboutDrop">About<i
                             class="material-icons right">arrow_drop_down</i></a></li>
-                    <li><a class="dropdown-button" href="#!" data-activates="accountDrop">
+                    <li><a class="dropdown-button white-text" href="#!" data-activates="accountDrop">
                         {{#if currentUser}}
                             {{currentUser.profile.username}}
                         {{else}}
                             Account
                         {{/if}}
-                        <i class="material-icons right">arrow_drop_down</i></a></li>
+                        <i class="material-icons right white-text">arrow_drop_down</i></a></li>
                 </ul>
                 <ul class="side-nav" id="mobile-navi" style="width: 240px;">
                     <ul class="collapsible" data-collapsible="accordion">
@@ -51,33 +51,33 @@
                             <a href="/news">News</a>
                         </li>
                         <li>
-                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
+                            <div class="collapsible-header white-text"><i class="material-icons">arrow_drop_down</i>
                                 Contribute
                             </div>
-                            <div class="collapsible-body black-text">
+                            <div class="collapsible-body white-text">
                                 <a href="https://www.github.com/Musare/Musare" target="_blank">Github</a>
                                 <a href="donate.html">Donate</a>
                                 <a href="/feedback">Feedback</a>
                             </div>
                         </li>
                         <li>
-                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
+                            <div class="collapsible-header white-text"><i class="material-icons">arrow_drop_down</i>
                                 About
                             </div>
-                            <div class="collapsible-body black-text">
+                            <div class="collapsible-body white-text">
                                 <a href="/project">The Project</a>
                                 <a href="/team">The Team</a>
                             </div>
                         </li>
                         <li>
-                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
+                            <div class="collapsible-header white-text"><i class="material-icons">arrow_drop_down</i>
                                 {{#if currentUser}}
                                     {{currentUser.profile.username}}
                                 {{else}}
                                     Account
                                 {{/if}}
                             </div>
-                            <div class="collapsible-body black-text">
+                            <div class="collapsible-body white-text">
                                 <a href="/login">Login</a>
                                 <a href="/register">Register</a>
                             </div>

app/client/templates/home.html

@@ -5,14 +5,13 @@
             <div class="row">
                 {{#each rooms}}
                     <div class="col s12 m5 l2">
-                        <div class="card">
+                        <div class="card hoverable">
                             <div class="card-image waves-effect waves-block waves-light">
                                 <a href=/{{type}}>
                                     <img onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" src={{currentSong.song.img}}>
-                                    <figcaption>
-                                        <h5>{{currentSong.song.title}}</h5>
-                                        <h5>{{currentSong.song.artist}}</h5>
-                                        <a href=/{{type}} class="waves-effect waves-light btn">Join Room</a>
+                                    <figcaption class="caption center-align">
+                                      <h5>{{currentSong.song.title}}</h5>
+                                      <h5>{{currentSong.song.artist}}</h5>
                                     </figcaption>
                                 </a>
                             </div>
@@ -21,7 +20,7 @@
                                 <p>{{roomDesc}}</p>
                             </div>
                             <div class="card-action">
-                                <a href=/{{type}}>Join Room</a>
+                                <a href=/{{type}} class="teal-text text-accent-4">Join Room</a>
                             </div>
                         </div>
                     </div>