Pretty much finished up layout for home page. Will start work on cleaning up all of the JS files that the home page and its features are dependent on. I will also remove anything obsolete.

app/client/app.css

@@ -1,42 +1,20 @@
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
 
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-weight: 300;
-}
-
-html, body {
-    height: 100%;
-    background: #50a3a2;
-    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background-color: rgb(245, 245, 245);
 }
 
-body {
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 300;
+main {
+  flex: 1 0 auto;
 }
 
 .brand-logo {
   margin-left: 10px;
 }
 
-.landing {
-    background: #50a3a2;
-    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-    position: absolute;
-    /*top: 20%;*/
-    left: 0;
-    width: 100%;
-    height: 100%; /*400px*/
-    /*margin-top: -200px;*/
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
 .admin-container {
   background-color: rgb(102, 205, 170);
   color: white;
@@ -83,30 +61,6 @@ body {
   font-size: 18px;
 }
 
-.container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 80px 0;
-    height: 400px;
-    text-align: center;
-}
-
-.container h1 {
-    font-size: 40px;
-    color: white;
-    -webkit-transition-duration: 1s;
-    transition-duration: 1s;
-    font-weight: 200;
-}
-
-.container p {
-    font-size: 10px;
-    color: white;
-    -webkit-transition-duration: 1s;
-    transition-duration: 1s;
-    font-weight: 200;
-}
-
 .g-recaptcha {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -123,222 +77,6 @@ body {
     font-weight: 300;
 }
 
-.bg-bubbles {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    margin: 0px;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-.bg-bubbles li {
-    position: absolute;
-    list-style: none;
-    display: block;
-    width: 40px;
-    height: 40px;
-    border-radius: 100px;
-    /*background-color: rgba(255, 255, 255, 0.15);*/
-    bottom: 0px;
-    -webkit-animation: square 25s infinite;
-    animation: square 25s infinite;
-    -webkit-transition-timing-function: linear;
-    transition-timing-function: linear;
-    opacity: 0.5;
-}
-
-.bg-bubbles li:nth-child(1) {
-    left: 10%;
-}
-
-.bg-bubbles li:nth-child(2) {
-    left: 20%;
-    width: 80px;
-    height: 80px;
-    -webkit-animation-delay: 2s;
-    animation-delay: 2s;
-    -webkit-animation-duration: 17s;
-    animation-duration: 17s;
-}
-
-.bg-bubbles li:nth-child(3) {
-    left: 25%;
-    -webkit-animation-delay: 4s;
-    animation-delay: 4s;
-}
-
-.bg-bubbles li:nth-child(4) {
-    left: 40%;
-    width: 60px;
-    height: 60px;
-    -webkit-animation-duration: 22s;
-    animation-duration: 22s;
-    /*background-color: rgba(255, 255, 255, 0.25);*/
-}
-
-.bg-bubbles li:nth-child(5) {
-    left: 70%;
-}
-
-.bg-bubbles li:nth-child(6) {
-    left: 80%;
-    width: 120px;
-    height: 120px;
-    -webkit-animation-delay: 3s;
-    animation-delay: 3s;
-    /*background-color: rgba(255, 255, 255, 0.2);*/
-}
-
-.bg-bubbles li:nth-child(7) {
-    left: 32%;
-    width: 160px;
-    height: 160px;
-    -webkit-animation-delay: 7s;
-    animation-delay: 7s;
-}
-
-.bg-bubbles li:nth-child(8) {
-    left: 55%;
-    width: 20px;
-    height: 20px;
-    -webkit-animation-delay: 15s;
-    animation-delay: 15s;
-    -webkit-animation-duration: 40s;
-    animation-duration: 40s;
-}
-
-.bg-bubbles li:nth-child(9) {
-    left: 25%;
-    width: 10px;
-    height: 10px;
-    -webkit-animation-delay: 2s;
-    animation-delay: 2s;
-    -webkit-animation-duration: 40s;
-    animation-duration: 40s;
-    /*background-color: rgba(255, 255, 255, 0.3);*/
-}
-
-.bg-bubbles li:nth-child(10) {
-    left: 80%;
-    width: 160px;
-    height: 160px;
-    -webkit-animation-delay: 11s;
-    animation-delay: 11s;
-}
-
-.bg-bubbles img {
-    width: 100%;
-    height: 100%;
-}
-
-/* Tablet view fix */
-@media (max-width: 768px){
-    body{
-        height: auto !important;
-    }
-    .bg-bubbles li:nth-child(10) {
-        display: none;
-    }
-    #song-media{
-        margin-left: 0 !important;
-    }
-    #song-info{
-        margin: 15px auto;
-        width: 200px;
-    }
-    #settings{
-        margin: 0 auto !important;
-        margin-bottom: 10px !important;
-    }
-    #voting{
-        margin: 0 auto !important;
-        width: 300px !important;
-        margin-bottom: 100px !important;
-    }
-    #side-panel{
-        display: none;
-    }
-}
-/**/
-
-@-webkit-keyframes square {
-    0% {
-        -webkit-transform: translateY(-700px) rotate(600deg);
-        transform: translateY(-700px) rotate(600deg);
-    }
-    100% {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-    }
-}
-
-@keyframes square {
-    0% {
-        -webkit-transform: translateY(-700px) rotate(600deg);
-        transform: translateY(-700px) rotate(600deg);
-    }
-    100% {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-    }
-}
-
-.fa-github {
-    margin-top: 3px;
-}
-
-#github-login {
-    background-color: #999;
-    margin-bottom: 100px;
-}
-
-.btn-social {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    outline: 0;
-    border: 0;
-    padding: 10px 15px;
-    border-radius: 3px;
-    width: 304px;
-    cursor: pointer;
-    font-size: 18px;
-    color: #fff;
-}
-
-footer {
-    text-align: center;
-    width: 100%;
-    height: 75px;
-    margin-top: 75px;
-    color: white;
-    padding-top: 5px;
-}
-
-.push {
-    height: 75px; /* .push must be the same height as .footer */
-}
-
-footer a {
-    color: white;
-}
-
-footer a:hover {
-    color: white;
-}
-
-footer p {
-    margin: 0 !important;
-}
-
-footer .fa {
-    font-size: 2em;
-}
-
 .button-nowidth {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1022,9 +760,7 @@ nav form input[type="image"]{
 .rank-default {
     font-size: 0px;
 }
-.row {
-    margin: 0;
-}
+
 .sidebar-content {
     height: calc(100% - 42px);
 }

app/client/templates/footer.html

@@ -1,12 +1,22 @@
 <template name="footer">
-    <footer>
-        <p>Copyright © 2015 All Right Reserved</p>
-        <a href="/faq" class="footerButtons" id="FAQButton">FAQ |</a>
-        <a href="/terms" class="footerButtons" id="termsButton">Terms |</a>
-        <a href="/privacy" class="footerButtons" id="privacyButton">Privacy</a>
-        <br>
-        <a class="social-link" href="https://www.facebook.com/MusareMusic" target="_blank"><i class="fa fa-facebook"></i></a>
-        <a class="social-link" href="https://twitter.com/musareapp" target="_blank"><i class="fa fa-twitter"></i></a>
-        <a class="social-link" href="https://github.com/AkiraLaine/music-app" target="_blank"><i class="fa fa-github"></i></a>
-    </footer>
+  <footer class="page-footer teal accent-4">
+    <div class="container row">
+      <div class="col l6 s12">
+        <h5 class="white-text">Footer Content</h5>
+        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
+      </div>
+      <div class="col l4 offset-l2 s12">
+        <h5 class="white-text">Links</h5>
+        <ul>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-copyright">
+      <div class="container">
+        © 2014 Copyright Text
+        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
+      </div>
+    </div>
+  </footer>
 </template>

app/client/templates/header.html

@@ -1,69 +1,71 @@
 <template name="header">
-  <!-- Dropdown Structure -->
-  <ul id="contributeDrop" class="dropdown-content">
-    <li><a href="https://www.github.com/Musare/Musare">Github</a></li>
-    <li><a href="donate.html">Donate</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="/contact">Contact Us</a></li>
-  </ul>
-  <ul id="accountDrop" class="dropdown-content">
-    {{#if currentUser}}
-      <li><a href="#!">Profile</a></li>
-      <li><a href="#!">Settings</a></li>
-      <li class="divider"></li>
-      <li><a href="#!">Logout</a></li>
-    {{else}}
-      <li><a href="/login">Login</a></li>
-      <li><a href="/register">Register</a></li>
-    {{/if}}
-  </ul>
-  <nav>
-    <div class="nav-wrapper teal accent-4">
-      <a href="#!" class="brand-logo">Musare</a>
-      <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
-      <ul class="right hide-on-med-and-down">
-        <li><a href="feedback.html">Feedback</a></li>
-        <li><a class="dropdown-button" 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 class="material-icons right">arrow_drop_down</i></a></li>
-        <li><a class="dropdown-button" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
+  <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>
+    </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="/contact">Contact Us</a></li>
+    </ul>
+    <ul id="accountDrop" class="dropdown-content">
+      {{#if currentUser}}
+        <li><a href="#!">Profile</a></li>
+        <li><a href="#!">Settings</a></li>
+        <li class="divider"></li>
+        <li><a href="#!">Logout</a></li>
+        {{else}}
+        <li><a href="/login">Login</a></li>
+        <li><a href="/register">Register</a></li>
+        {{/if}}
       </ul>
-      <ul class="side-nav" id="mobile-navi" style="width: 240px;">
-        <li><a href="#">Feedback</a></li>
-        <ul class="collapsible" data-collapsible="accordion">
-          <li>
-            <div class="collapsible-header black-text"><i class="material-icons">filter_drama</i>First</div>
-            <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-          </li>
-          <li>
-            <div class="collapsible-header black-text"><i class="material-icons">place</i>Second</div>
-            <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-          </li>
-          <li>
-            <div class="collapsible-header black-text"><i class="material-icons">whatshot</i>Third</div>
-            <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-          </li>
-        </ul>
-        <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
-        <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
-        <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
-      --></ul>
-    </div>
-  </nav>
-  <script>
-    $(function() {
-      $(".dropdown-button").dropdown({
-        inDuration: 300,
-        outDuration: 225,
-        hover: true,
-        belowOrigin: true
+      <nav>
+        <div class="nav-wrapper teal accent-4">
+          <a href="/" class="brand-logo">Musare</a>
+          <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
+          <ul class="right hide-on-med-and-down">
+            <li><a href="feedback.html">Feedback</a></li>
+            <li><a class="dropdown-button" 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 class="material-icons right">arrow_drop_down</i></a></li>
+            <li><a class="dropdown-button" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
+          </ul>
+          <ul class="side-nav" id="mobile-navi" style="width: 240px;">
+            <li><a href="#">Feedback</a></li>
+            <ul class="collapsible" data-collapsible="accordion">
+              <li>
+                <div class="collapsible-header black-text"><i class="material-icons">filter_drama</i>First</div>
+                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
+              </li>
+              <li>
+                <div class="collapsible-header black-text"><i class="material-icons">place</i>Second</div>
+                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
+              </li>
+              <li>
+                <div class="collapsible-header black-text"><i class="material-icons">whatshot</i>Third</div>
+                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
+              </li>
+            </ul>
+            <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
+            <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
+            <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
+          --></ul>
+        </div>
+      </nav>
+      <script>
+      $(function() {
+        $(".dropdown-button").dropdown({
+          inDuration: 300,
+          outDuration: 225,
+          hover: true,
+          belowOrigin: true
+        });
+        $(".button-collapse").sideNav();
+        $('.collapsible').collapsible({
+          accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+        });
       });
-      $(".button-collapse").sideNav();
-      $('.collapsible').collapsible({
-        accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
-      });
-    });
-  </script>
+      </script>
+  </header>
 </template>

app/client/templates/home.html

@@ -1,27 +1,28 @@
 <template name="home">
-    {{> alerts}}
     {{> header}}
-    <div class="col s12 m10 l8">
-      <div class="row">
-        {{#each rooms}}
-        <div class="col s12 m5 l2">
-          <div class="card">
-            <div class="card-image waves-effect waves-block waves-light">
-              <a href="/{{type}}"><img src={{currentSong.song.img}}></a>
-            </div>
-            <div class="card-content">
-              <span class="card-title activator grey-text text-darken-4">{{display}}<i class="material-icons right">more_vert</i></span>
-              <p><a href="/{{type}}">Join Room</a></p>
-            </div>
-            <div class="card-reveal">
-              <span class="card-title grey-text text-darken-4">EDM Room<i class="material-icons right">close</i></span>
-              <p>The EDM room provides music similar to...</p>
+    <main>
+      <div class="col s12 m10 l8">
+        <div class="row">
+          {{#each rooms}}
+          <div class="col s12 m5 l2">
+            <div class="card">
+              <div class="card-image waves-effect waves-block waves-light">
+                <a href="/{{type}}"><img src={{currentSong.song.img}}></a>
+              </div>
+              <div class="card-content">
+                <span class="card-title activator grey-text text-darken-4">{{display}}<i class="material-icons right">more_vert</i></span>
+                <p><a href="/{{type}}">Listen</a></p>
+              </div>
+              <div class="card-reveal">
+                <span class="card-title grey-text text-darken-4">EDM Room<i class="material-icons right">close</i></span>
+                <p>The EDM room provides music similar to...</p>
+              </div>
             </div>
           </div>
+          {{/each}}
         </div>
-        {{/each}}
       </div>
-    </div>
+    </main>
     <!--{{> dashboard}}-->
     {{> footer}}
 </template>

app/client/templates/login.html

@@ -1,15 +1,26 @@
 <template name="login">
-    {{> alerts}}
-  <div class="landing">
-    {{> header}}
-    <div class="container">
+  {{> header}}
+  <main>
+    <div class="container row">
+      <form class="col s12 offset-s3">
         <h1>Login</h1>
-        <form class="form" id="login-form">
-            <input type="text" autocorrect="off" name="loginUsername" placeholder="Enter your username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your username'" required/>
-            <input type="password" autocorrect="off" name="loginPassword" placeholder="Enter your password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your password'" required/>
-            <button type="submit">Login</button>
-        </form>
-        <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Login with Github</button>
+        <div class="row">
+          <div class="input-field col s6">
+            <input id="username" type="text" class="validate">
+            <label for="first_name">Username</label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="input-field col s6">
+            <input id="password" type="password" class="validate">
+            <label for="password">Password</label>
+          </div>
+        </div>
+        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
+          <i class="material-icons right">send</i>
+        </button>
+      </form>
     </div>
-  </div>
+  </main>
+  {{> footer}}
 </template>

app/client/templates/register.html

@@ -1,33 +1,30 @@
 <template name="register">
-    {{> alerts}}
-    <div class="landing">
         {{> header}}
-          <div class="col s8">
-            <h1>Sign Up</h1>
-            <div class="row">
-              <form class="col s12">
-                <div class="row">
-                  <div class="input-field col s6">
-                    <input placeholder="Username" id="user_name" type="text" class="validate">
-                    <label for="first_name">Username</label>
-                  </div>
-                  <div class="input-field col s6">
-                    <input id="email" type="email" class="validate">
-                    <label for="last_name">Email</label>
-                  </div>
+        <main>
+          <div class="container row">
+            <h1>Register</h1>
+            <form class="col s12">
+              <div class="row">
+                <div class="input-field col s6">
+                  <input id="username" type="text" class="validate">
+                  <label for="first_name">Username</label>
                 </div>
-                <div class="row">
-                  <div class="input-field col s12">
-                    <input id="password" type="password" class="validate">
-                    <label for="password">Password</label>
-                  </div>
+                <div class="input-field col s6">
+                  <input id="email" type="email" class="validate">
+                  <label for="last_name">Email</label>
                 </div>
-              </form>
-            </div>
+              </div>
+              <div class="row">
+                <div class="input-field col s12">
+                  <input id="password" type="password" class="validate">
+                  <label for="password">Password</label>
+                </div>
+              </div>
+            </form>
+            <button class="btn waves-effect waves-light" type="submit" name="action" style="margin-left: 10px;">Submit
+              <i class="material-icons right">send</i>
+            </button>
           </div>
-              <!--{{> reCAPTCHA}}
-                <p>By registering, you agree to the Terms and Conditions and Privacy Policy.</p>
-                <button type="submit">Sign Up</button>
-            <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Signup with Github</button>-->
-        </div>
+        </main>
+        {{> footer}}
 </template>