Add: versioned CSS

2 files changed, 107 insertions, 34 deletions

diff --git a/static/css/main-2.css b/static/css/main-2.css
new file mode 100644
index 0000000..665eb76
--- /dev/null
+++ b/static/css/main-2.css
@@ -0,0 +1,101 @@
+
+body {
+    background-color: #1c1c1c;
+    color: #e8e7d5;
+}
+
+a {
+    color: #d478e0;
+}
+
+h1,h2,h3,h4 {
+    color: #ff9430;
+}
+
+button {
+    background: #1c1c1c;
+    color: #ff9430;
+    border: 1px solid #ff9430;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
+.center {
+    text-align: center;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: baseline;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: baseline;
+}
+
+.centered-column {
+    display: grid;
+    grid-template-columns:  1fr minmax(300px,500px) 1fr;
+    padding: 10px;
+    column-gap: 40px;
+}
+
+.four-column > div {
+    max-width: 50%;
+}
+
+
+.track-list-item:hover {
+    cursor: pointer;
+    background-color: #454545;
+}
+
+.player {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.now-playing {
+    display: flex;
+    width: 300px;
+    flex-direction: column;
+}
+
+.controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.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;
+}
diff --git a/static/css/main.css b/static/css/main.css
index 665eb76..1303fca 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -32,16 +32,12 @@ button:hover {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: center;
     align-content: baseline;
 }
 
-.column {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-content: baseline;
+.row>div {
+    margin: 30px;
 }
 
 .centered-column {
@@ -61,41 +57,17 @@ button:hover {
     background-color: #454545;
 }
 
-.player {
-    display: flex;
-    justify-content: space-evenly;
-    width: 100%;
-    flex-wrap: wrap;
-}
-
 .now-playing {
-    display: flex;
+    position: sticky;
+    top: 2em;
     width: 300px;
-    flex-direction: column;
-}
-
-.controls {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
 }
 
-.controls button {
+.now-playing 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;
-}