Add: minor improvement of mobile [style]

Add: code review feedback

Fix: unbalanced paren

Fix: all the other stuff

1 files changed, 34 insertions, 6 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 1303fca..665eb76 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -32,12 +32,16 @@ button:hover {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-evenly;
     align-content: baseline;
 }
 
-.row>div {
-    margin: 30px;
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: baseline;
 }
 
 .centered-column {
@@ -57,17 +61,41 @@ button:hover {
     background-color: #454545;
 }
 
+.player {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
 .now-playing {
-    position: sticky;
-    top: 2em;
+    display: flex;
     width: 300px;
+    flex-direction: column;
+}
+
+.controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
-.now-playing button {
+.controls button {
     font-size: 2em;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
 }
 
 .now-playing-track {
     background-color: #454545;
 }
 
+.playlist-display {
+    margin-top: 2em;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+    overflow-y: auto;
+}