Add: more refinements to responsive styles

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 ()))))))
diff --git a/login.lisp b/login.lisp
index 4776fe5..0cf08b5 100644
--- a/login.lisp
+++ b/login.lisp
@@ -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;
+    }
+}
diff --git a/style.lisp b/style.lisp
index dc1d695..9387bdb 100644
--- a/style.lisp
+++ b/style.lisp
@@ -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))