Add: about page. css tweaks

6 files changed, 43 insertions, 4 deletions

diff --git a/about.lisp b/about.lisp
new file mode 100644
index 0000000..1eb42aa
--- /dev/null
+++ b/about.lisp
@@ -0,0 +1,23 @@
+;;;; about.lisp -- an about page.
+
+(in-package :vampire)
+
+(defun about-page (body)
+  (include-style body)
+  (with-clog-create body
+      (div ()
+           (navigation-header ())
+           (div (:class "centered-column") 
+                (div ())
+                (div () 
+                     (p ( :content "Vampire is a small private app shared
+  between friends. Its purpose is to create and share audio playlists,
+  and to collaborate on playlists with your friends in real time."))
+                     (p ( :content "The app is called vampire because it sucks
+           content from other sources, backed by the popular
+           youtube-dl tool."))
+
+                     (p ( :content "Vampire is written in Common Lisp using the
+           CLOG system."))
+                     (p ( :content "I hope you enjoy using Vampire.")))
+                (div ())))))
diff --git a/home.lisp b/home.lisp
index 7af5bba..4e4135a 100644
--- a/home.lisp
+++ b/home.lisp
@@ -52,7 +52,7 @@
                                    (or (uses-remaining invite) "unlimited"))))))
     (set-on-click delbtn (thunk*
                            (destroy-invite invite)
-                           (destroy item))))  )
+                           (destroy item)))))
 
 (defun create-invite-control (parent)
   (let* ((user (session-user parent))
diff --git a/navigation.lisp b/navigation.lisp
index f3b519e..0fe68f0 100644
--- a/navigation.lisp
+++ b/navigation.lisp
@@ -5,6 +5,7 @@
 (defun create-navigation-header (parent)
   (with-clog-create parent
       (section (:header :class "row")
-               (div () (img ( :url-src "/favicon.ico")))
-               (div ()  (a (:link "/home"  :content "Home")))
-               (div () (a (:link "/explore" :content "Explore"))))))
+               (div () (a (:link "/home")
+                          (img ( :url-src "/favicon.ico"))))
+               (div () (a (:link "/explore" :content "Explore")))
+               (div () (a (:link "/about" :content "About"))))))
diff --git a/static/css/main.css b/static/css/main.css
index 5556f99..64c90a9 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -40,6 +40,18 @@ button:hover {
     margin: 30px;
 }
 
+.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;
@@ -58,3 +70,4 @@ button:hover {
 .now-playing-track {
     background-color: #454545;
 }
+
diff --git a/vampire.asd b/vampire.asd
index a089d47..2690ca3 100644
--- a/vampire.asd
+++ b/vampire.asd
@@ -25,6 +25,7 @@
                (:file "session")
                (:file "style")
                (:file "navigation")
+               (:file "about")
                (:file "new-account")
                (:file "explore")
                (:file "login")
diff --git a/vampire.lisp b/vampire.lisp
index bd1e16d..a45b853 100644
--- a/vampire.lisp
+++ b/vampire.lisp
@@ -52,6 +52,7 @@
               :host (host config)
               :extended-routing t
               :static-root (static-directory config))
+  (set-on-new-window (when-logged-in? 'about-page) :path "/about")
   (set-on-new-window (when-logged-in? 'user-home-page) :path "/home")
   (set-on-new-window (when-logged-in? 'user-listing-page) :path "/user")
   (set-on-new-window 'login-page :path "/login")