Add: Basic style

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")
   )