aboutsummaryrefslogtreecommitdiffhomepage
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
parent8ea45fdb238952fa92d57979d71db61de105f59e (diff)
Add: more refinements to responsive styles
-rw-r--r--explore.lisp10
-rw-r--r--login.lisp2
-rw-r--r--navigation.lisp2
-rw-r--r--playlist.lisp4
-rw-r--r--static/css/main-3.css150
-rw-r--r--style.lisp2
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))