aboutsummaryrefslogtreecommitdiffhomepage
path: root/static/css
diff options
context:
space:
mode:
authorGrant Shoshin Shangreaux <shoshin@cicadas.surf>2022-12-07 15:55:39 -0600
committerGrant Shoshin Shangreaux <shoshin@cicadas.surf>2022-12-07 15:55:49 -0600
commit9983bad80881f72db54017115c3c70ea676d59b4 (patch)
tree6837a473d3d8a70b850018e01ab2a16450f21e92 /static/css
parent3a30045c509a9627e15abc9916549df8f3c7b268 (diff)
Add: versioned CSS
Diffstat (limited to 'static/css')
-rw-r--r--static/css/main-2.css101
-rw-r--r--static/css/main.css40
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;
-}