diff options
| -rw-r--r-- | explore.lisp | 4 | ||||
| -rw-r--r-- | home.lisp | 10 | ||||
| -rw-r--r-- | navigation.lisp | 9 | ||||
| -rw-r--r-- | playlist.lisp | 24 | ||||
| -rw-r--r-- | static/css/main.css | 25 | ||||
| -rw-r--r-- | static/css/reset.css | 2 | ||||
| -rw-r--r-- | style.lisp | 3 |
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 ())))) @@ -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} + @@ -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") ) |