aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--explore.lisp4
-rw-r--r--home.lisp10
-rw-r--r--navigation.lisp9
-rw-r--r--playlist.lisp24
-rw-r--r--static/css/main.css25
-rw-r--r--static/css/reset.css2
-rw-r--r--style.lisp3
7 files changed, 55 insertions, 22 deletions
diff --git a/explore.lisp b/explore.lisp
index 5e6ada0..64d244a 100644
--- a/explore.lisp
+++ b/explore.lisp
@@ -20,7 +20,7 @@
(setf (url-src thumb) (or (track-thumb-url track) "")))))
(defun create-recent-playlists-area (parent)
- (let* ((container (create-div parent)))
+ (let* ((container (create-div parent :class "row")))
(dolist (pl (recent-playlists 10))
(create-playlist-explore-card container pl))))
@@ -30,5 +30,5 @@
(div ()
(navigation-header ())
;(media-search-area ())
- (section (:h2 :content "Recent Playlists"))
+ (section (:h2 :content "Recent Playlists" :class "center"))
(recent-playlists-area ()))))
diff --git a/home.lisp b/home.lisp
index e7475ec..0446b72 100644
--- a/home.lisp
+++ b/home.lisp
@@ -82,9 +82,11 @@
(with-clog-create body
(div ()
(navigation-header ())
- (p (:content (format nil "Welcome ~a" (user-name (session-user body)))))
- (new-playlist-form ())
- (playlist-listing ())
- (invite-control ()))))
+ (div (:class "row")
+ (div ()
+ (p (:content (format nil "Welcome ~a" (user-name (session-user body)))))
+ (new-playlist-form ())
+ (playlist-listing ())
+ (invite-control ()))))))
diff --git a/navigation.lisp b/navigation.lisp
index b362fe1..f3b519e 100644
--- a/navigation.lisp
+++ b/navigation.lisp
@@ -4,8 +4,7 @@
(defun create-navigation-header (parent)
(with-clog-create parent
- (section (:header )
- (div ()
- (img ( :url-src "/favicon.ico"))
- (a (:link "/home" :content "Home"))
- (a (:link "/explore" :content "Explore"))))))
+ (section (:header :class "row")
+ (div () (img ( :url-src "/favicon.ico")))
+ (div () (a (:link "/home" :content "Home")))
+ (div () (a (:link "/explore" :content "Explore"))))))
diff --git a/playlist.lisp b/playlist.lisp
index 08c2bbb..10ba039 100644
--- a/playlist.lisp
+++ b/playlist.lisp
@@ -399,16 +399,20 @@
(with-clog-create body
(div ()
(navigation-header ())
- (section (:h2)
- (:span (:bind title-elem :content (playlist-title pl)))
- (form-element (:text :bind input))
- (:span (:content " -- "))
- (:span (:bind dur-elem :content (secs-to-hms (playlist-duration pl)))))
-
- (now-playing-display (ctl))
- (track-listing (pl))
- (new-track-form (pl))
- (editor-managment (pl)))
+ (div (:class "row")
+ (div ()
+ (now-playing-display (ctl)))
+ (div ()
+ (section (:h2)
+ (:span (:bind title-elem :content (playlist-title pl)))
+ (form-element (:text :bind input))
+ (:span (:content " -- "))
+ (:span (:bind dur-elem :content (secs-to-hms (playlist-duration pl)))))
+ (track-listing (pl))))
+ (div (:class "row")
+ (div ()
+ (new-track-form (pl))
+ (editor-managment (pl)))))
(setf (pl-title ctl) title-elem
(pl-dur ctl) dur-elem
(display input) "none"
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..90d383a
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,25 @@
+
+body {
+ background-color: #190a0f;
+ color: #e76ad3;
+}
+
+a {
+ color: #0b9496;
+}
+
+.center {
+ text-align: center;
+}
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: baseline;
+}
+
+.row>div {
+ margin: 30px;
+}
+
diff --git a/static/css/reset.css b/static/css/reset.css
new file mode 100644
index 0000000..1bb9f7c
--- /dev/null
+++ b/static/css/reset.css
@@ -0,0 +1,2 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block}body{ line-height:1}ol,ul{ list-style:none}blockquote,q{ quotes:none}blockquote:before,blockquote:after,q:before,q:after{ content:""; content:none}table{ border-collapse:collapse; border-spacing:0}html{ line-height:1.15; -webkit-text-size-adjust:100%}main{ display:block}h1{ font-size:2em; margin:0.67em 0}hr{ box-sizing:content-box; height:0; overflow:visible}pre{ font-family:monospace,monospace; font-size:1em}a{ background-color:transparent}abbr[title]{ border-bottom:none; text-decoration:underline; text-decoration:underline dotted}b,strong{ font-weight:bolder}code,kbd,samp{ font-family:monospace,monospace; font-size:1em}small{ font-size:80%}sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline}sub{ bottom:-0.25em}sup{ top:-0.5em}img{ border-style:none}button,input,optgroup,select,textarea{ font-family:inherit; font-size:100%; line-height:1.15; margin:0}button,input{ overflow:visible}button,select{ text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{ -webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{ border-style:none; padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{ outline:1px dotted ButtonText}fieldset{ padding:0.35em 0.75em 0.625em}legend{ box-sizing:border-box; color:inherit; display:table; max-width:100%; padding:0; white-space:normal}progress{ vertical-align:baseline}textarea{ overflow:auto}[type="checkbox"],[type="radio"]{ box-sizing:border-box; padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{ height:auto}[type="search"]{ -webkit-appearance:textfield; outline-offset:-2px}[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}::-webkit-file-upload-button{ -webkit-appearance:button; font:inherit}details{ display:block}summary{ display:list-item}template{ display:none}[hidden]{ display:none}*:where(:not(iframe,canvas,img,svg,video):not(svg *,symbol *)){ all:unset; display:revert}*,*::before,*::after{ box-sizing:border-box}a,button{ cursor:revert}ol,ul,menu{ list-style:none}img{ max-width:100%}table{ border-collapse:collapse}textarea{ white-space:revert}meter{ -webkit-appearance:revert; appearance:revert}::placeholder{ color:unset}:where([hidden]){ display:none}:where([contenteditable]){ -moz-user-modify:read-write; -webkit-user-modify:read-write; overflow-wrap:break-word; -webkit-line-break:after-white-space}:where([draggable="true"]){ -webkit-user-drag:element}
+
diff --git a/style.lisp b/style.lisp
index 68d754d..ce8fa90 100644
--- a/style.lisp
+++ b/style.lisp
@@ -3,6 +3,7 @@
(in-package :vampire)
(defun include-style (body)
- ;(load-css (html-document body) "https://www.w3schools.com/w3css/4/w3.css")
+ ;(load-css (html-document body) "/css/reset.css")
+ (load-css (html-document body) "/css/main.css" :load-only-once nil)
;(load-css (html-document body) "https://www.w3schools.com/lib/w3-theme-indigo.css")
)