From 9fe45e4f7b54279f114e133e12a33f596dc7ef26 Mon Sep 17 00:00:00 2001 From: shoshin Date: Sun, 11 Dec 2022 21:24:03 -0600 Subject: Add: more refinements to responsive styles --- static/css/main-3.css | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 static/css/main-3.css (limited to 'static/css/main-3.css') 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; + } +} -- cgit v1.2.3