aboutsummaryrefslogtreecommitdiffhomepage
path: root/static
diff options
context:
space:
mode:
authorshoshin <shoshin@cicadas.surf>2022-12-11 21:24:03 -0600
committershoshin <shoshin@cicadas.surf>2022-12-11 21:24:03 -0600
commit9fe45e4f7b54279f114e133e12a33f596dc7ef26 (patch)
tree2ceac1f9555efaaf9d123196620fc4c11eac5b3d /static
parent8ea45fdb238952fa92d57979d71db61de105f59e (diff)
Add: more refinements to responsive styles
Diffstat (limited to 'static')
-rw-r--r--static/css/main-3.css150
1 files changed, 150 insertions, 0 deletions
diff --git a/static/css/main-3.css b/static/css/main-3.css
new file mode 100644
index 0000000..98afb13
--- /dev/null
+++ b/static/css/main-3.css
@@ -0,0 +1,150 @@
+body {
+ background-color: #1c1c1c;
+ color: #e8e7d5;
+ width: 90vw;
+ display: flex;
+ justify-content: center;
+ margin: auto;
+}
+
+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;
+}
+
+.container {
+ width: 100%;
+}
+
+.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: 2rem;
+ width: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.login {
+ margin-top: 10rem;
+}
+
+
+.card {
+ display: flex;
+ width: 200px;
+ height: 200px;
+ align-items: center;
+ justify-content: center;
+}
+
+.thumb {
+ max-width: 180px;
+}
+
+@media (max-width: 500px) {
+ body {
+ font-size: small;
+ width: 100vw;
+ }
+
+ h1 {
+ font-size: medium;
+ }
+
+ .header {
+ position: sticky;
+ top: 0px;
+ background-color: #1c1c1c;
+ padding: .1rem;
+ align-items: center;
+ justify-content: space-around;
+ }
+}
+
+@media (min-width: 500px) {
+ .playlist-display {
+ height: 80vh;
+ overflow-y: auto;
+ }
+}