diff options
| -rw-r--r-- | explore.lisp | 10 | ||||
| -rw-r--r-- | login.lisp | 2 | ||||
| -rw-r--r-- | navigation.lisp | 2 | ||||
| -rw-r--r-- | playlist.lisp | 4 | ||||
| -rw-r--r-- | static/css/main-3.css | 150 | ||||
| -rw-r--r-- | style.lisp | 2 |
6 files changed, 157 insertions, 13 deletions
diff --git a/explore.lisp b/explore.lisp index 1774a2d..5c99fb8 100644 --- a/explore.lisp +++ b/explore.lisp @@ -8,15 +8,13 @@ (defun create-playlist-explore-card (parent pl) (with-clog-create parent - (div (:bind card) + (div (:bind card :class "card") (a (:link (url-to-playlist pl) ) - (img (:bind thumb)) + (img (:bind thumb :class "thumb")) (br ()) (span (:content (playlist-title pl))) (span (:content " -- ")) (span (:content (secs-to-hms (playlist-duration pl)))))) - (setf (maximum-width thumb) "180px" - (width card) "200px") (when-let (track (first (playlist-tracks pl))) (setf (url-src thumb) (or (track-thumb-url track) ""))))) @@ -45,6 +43,4 @@ (recent-playlists-area ())) (div () (section (:h3 :content "Who uses this?" :class "center")) - (user-list ())))) - (setf (maximum-width playlist-area) "80%" - (minimum-width playlist-area) "500px"))) + (user-list ())))))) @@ -5,7 +5,7 @@ (defun login-page (body) (include-style body) (with-clog-create body - (div () + (div (:class "login") (div () (section (:h3 :content "LOGIN")) (form () diff --git a/navigation.lisp b/navigation.lisp index 0fe68f0..731d31f 100644 --- a/navigation.lisp +++ b/navigation.lisp @@ -4,7 +4,7 @@ (defun create-navigation-header (parent) (with-clog-create parent - (section (:header :class "row") + (section (:header :class "header") (div () (a (:link "/home") (img ( :url-src "/favicon.ico")))) (div () (a (:link "/explore" :content "Explore"))) diff --git a/playlist.lisp b/playlist.lisp index 7c5a9b6..f676936 100644 --- a/playlist.lisp +++ b/playlist.lisp @@ -419,7 +419,7 @@ (add-playlist-viewer ctl) (include-style body) (with-clog-create body - (div () + (div (:class "container") (navigation-header ()) (div (:class "player") (now-playing-display (ctl)) @@ -474,5 +474,3 @@ (display input) "inline") (focus input)))) (initialize-now-playing body))))) - - 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; + } +} @@ -2,7 +2,7 @@ (in-package :vampire) -(defvar css-version "2") +(defvar css-version "3") (defun include-style (body) (load-css (html-document body) (format nil "/css/main-~a.css" css-version) :load-only-once nil)) |