Styling for usability

1 files changed, 27 insertions, 21 deletions

diff --git a/fussy.lisp b/fussy.lisp
index 11b3f4c..2afd96d 100644
--- a/fussy.lisp
+++ b/fussy.lisp
@@ -335,7 +335,7 @@ that they are not loaded during image gen.")
   (parse-integer string))
 
 
-(defparameter +themes-per-page+ 21)
+(defparameter +themes-per-page+ 20)
 
 (defun nav ()
   (html:with-html
@@ -345,7 +345,7 @@ that they are not loaded during image gen.")
 (defun page-nav (page page-count)
   "relative pagination nav to current page."
   (html:with-html 
-    (:div
+    (:div :class "page-nav"
      (dotimes (pg (ceiling (/ page-count +themes-per-page+)))
        (if (= pg page)
            (:span (format nil "  ~a  " (1+ pg)))
@@ -357,7 +357,6 @@ that they are not loaded during image gen.")
 (defun theme-preview-image (theme &optional variant)
   (html:with-html 
     (:img
-     :class "preview"
      :src (theme-preview-image-path theme variant))))
 
 (defun theme-preview-card (theme)
@@ -411,10 +410,6 @@ html, body {
   background-color: #eeeeff;
 }
 
-.preview {
-  max-width: 400px;
-}
-
 .container {
   width: 100%;
   display: flex;
@@ -423,7 +418,7 @@ html, body {
 }
 
 .card {
-  padding: 10px;
+  max-width: 50%;
 }
 
 .card  > a > h4 {
@@ -435,16 +430,27 @@ html, body {
   text-align: center;
 }
 
-nav {
+h1 {
+  text-align: center;
+}
+
+.header {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+.page-nav {
   margin-left: auto;
   margin-right: auto;
   width: 60%;
   font-size: 1.3em;
+  margin-top: 10px;
+  margin-bottom: 20px;
 }
 
-h1 {
-  text-align: center;
-}
+
 ")
 
 (lzb:defendpoint* :get "/css/style.css" () ()
@@ -487,14 +493,16 @@ h1 {
        (:body
         (:div :class "main"
               (nav)
-              (:p :class "center"
-                  "Emacs Themes Gallery for your Daily Procrastination Needs." (:br)
-                  (write-to-string (length all-themes)) " themes and counting...")
+              (:div  :class "center header"
+                     (:p
+                      "Emacs Themes Gallery for your Daily Procrastination Needs." (:br)
+                      (write-to-string (length all-themes)) " themes and counting..."))
               (page-nav page (length all-themes))
-              (:div )
               (:div :class "container"
                     (dolist (theme themes)
-                      (theme-preview-card theme)))))))))
+                      (theme-preview-card theme)))
+              (:div :class "foooter"
+                    (page-nav page (length all-themes)))))))))
 
 (defun a-package (string)
   (a:if-let (pkg
@@ -523,7 +531,7 @@ h1 {
        (:body
         (:div :class "main"
               (nav)
-              (:div :class "center"
+              (:div :class "center header"
                     (:h2 (package-namestring pkg) )
                     (:p (theme-pkg-description pkg))
                     (:p "This package contains"
@@ -535,8 +543,6 @@ h1 {
                     (dolist (theme themes)
                       (theme-preview-card theme)))))))))
 
-
-
 (lzb:defendpoint* :get "/theme/:pkg a-package:/:theme a-theme:" () ()
   "The page for a particular theme showing its previews for different prog langs"
   (unless (member theme (themes-in-package pkg) :test #'string-equal)
@@ -551,7 +557,7 @@ h1 {
      (:body
       (:div :class "main"
             (nav)
-            (:div :class "center"
+            (:div :class "center header"
              (:h2 theme)
              (:p "A theme in the package "
                  (:a :href (url-path pkg) (package-namestring pkg))))