Improved the homepage's looks.

app/app.css

@@ -46,7 +46,7 @@ ul {
   height: 100%; /*400px*/
   /*margin-top: -200px;*/
   overflow-x: hidden;
-  overflow-y: hidden;
+  overflow-y: auto;
 }
 .landing {
   background: #50a3a2;
@@ -91,7 +91,7 @@ form {
   position: relative;
   z-index: 2;
 }
-form input {
+form input, #croom {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -287,6 +287,7 @@ form button:hover {
 }
 #github-login{
   background-color: #999;
+  margin-bottom: 100px;
 }
 .btn-social{
   -webkit-appearance: none;
@@ -337,8 +338,17 @@ footer a:hover{
 }
 
 .logout{
-  margin-left: 20px;
+  position: fixed;
+  top: 2px;
+  left: 2px;
+  background-color: white;
+  padding: 12px;
   cursor: pointer;
+  border-radius: 100%;
+  z-index: 2;
+  width: 38px;
+  height: 38px;
+  text-align: center;
 }
 .station{
   background-color: rgba(102,205,170,0.7);
@@ -351,6 +361,7 @@ footer a:hover{
   /*float: left;*/
   margin-right: auto;
   margin-left: auto;
+  position: relative;
 }
 
 .station > h3 {
@@ -478,11 +489,6 @@ footer a:hover{
   background-color: cadetblue;
   cursor: pointer;
 }
-@media (max-width: 992px) {
-    .station {
-        background-color: red;
-    }
-}
 #player {
   visibility: hidden;
   height: 0;
@@ -528,6 +534,7 @@ footer a:hover{
 #croom_container {
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 100px;
   width: 304px !important;
 }
 #croom_label {
@@ -557,4 +564,12 @@ footer a:hover{
 .song-input-label {
   width: 100%;
   text-align: center;
+}
+.station_link {
+  position:absolute;
+  width:100%;
+  height:100%;
+  top:0;
+  left: 0;
+  border-radius: 100%;
 }

app/templates/dashboard.html

@@ -3,14 +3,11 @@
          <i class="fa fa-power-off logout" tooltip="Logout"></i>
         <div class="row">
           {{#each rooms}}
-            <a href="/{{type}}">
-              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
-                  <div class="station">
-                      <h3>{{type}}</h3>
-                      <h5>Song</h5>
-                  </div>
-              </div>
-            </a>
+            <div class="station">
+                <h3>{{type}}</h3>
+                <h5>Song</h5>
+                <a href="/{{type}}" class="station_link"></a>
+            </div>
           {{/each}}
         </div>
         <div class="col-md-4"></div>
@@ -20,7 +17,7 @@
                 <div class="input-group">
                     <input type="text" id="croom" name="croom" required />
                 </div>
-                <button class="btn btn-warning" id="croom_create">Create</button>
+                <button class="btn btn-warning btn-block" id="croom_create">Create</button>
             </div>
         </div>
         <div class="col-md-4"></div>

app/templates/home.html

@@ -8,11 +8,9 @@
     <div class="loginlanding">
         <div id="login-view">
             {{> login}}
-            {{> footer}}
         </div>
         <div id="register-view" style="display:none">
             {{> register}}
-            {{> footer}}
         </div>
 
         <ul class="bg-bubbles">
@@ -28,5 +26,6 @@
             <li></li>
         </ul>
     </div>
+    {{> footer}}
     {{/if}}
 </template>