software: Render projects as cards with logos.

2 files changed, 49 insertions, 2 deletions

diff --git a/software.sxml b/software.sxml
index 96efa2d..929742f 100644
--- a/software.sxml
+++ b/software.sxml
@@ -233,10 +233,19 @@
     (ul (@ (class "projects"))
      ,@(hash-table-fold %projects
                         (lambda (key project acc)
-                          (cons `(li (span
+                          (cons `(li (@ (class "card"))
+                                     (div
+                                      (@ (class "card-header"))
+                                      (a (@ (href ,(project-url project)))
+                                         (img (@ (class "project-logo")
+                                                 (src ,(project-logo project))
+                                                 (alt ,(string-append "logo for "
+                                                                      (project-name project))))))
                                       (a (@ (class "project-url")
                                             (href ,(project-url project)))
-                                         ,(project-name project))
+                                         ,(project-name project)))
+                                     (div
+                                      (@ (class "card-body"))
                                       ,(let ((members (project-members project)))
                                          `(details
                                            (summary ,(format #false "members (~a)"
diff --git a/static/css/main.css b/static/css/main.css
index c026bda..b2f4fe6 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -356,15 +356,53 @@ article ul li::before {
 
 article ul.projects {
     position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
+
 article ul.projects details ul.members li {
     display: inline-block;
     list-style-type: none;
 }
+
+li.card::before,
 li.person::before {
     content: '';
 }
 
+li.card {
+    width: 300px;
+    display: block;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    margin: 1em 1em 0 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    background: #fefefe;
+}
+
+li.card .card-header {
+    border-bottom: 1px dotted #aaa;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+}
+li.card .card-header a {
+    border: none;
+}
+
+li.card .card-header img.project-logo {
+    max-height: 64px;
+    max-width: 64px;
+    margin-right: 0.5em;
+    border-radius: 5px;
+    margin: 10px;
+}
+li.card .card-body {
+    padding: 1em;
+}
+
 details summary {
     cursor: pointer;
     color: #4D4D4D;