summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRicardo Wurmus <rekado@elephly.net>2021-04-14 23:11:20 +0200
committerRicardo Wurmus <rekado@elephly.net>2021-04-14 23:11:45 +0200
commit315c63b82a6fadcd21b2ce4d4c44f438d83c3312 (patch)
tree3a5e80961fd7610c3acb07b294c9bfc9f462303e
parentsoftware: Record project logos. (diff)
software: Render projects as cards with logos.
Diffstat (limited to '')
-rw-r--r--software.sxml13
-rw-r--r--static/css/main.css38
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 @@
233 (ul (@ (class "projects")) 233 (ul (@ (class "projects"))
234 ,@(hash-table-fold %projects 234 ,@(hash-table-fold %projects
235 (lambda (key project acc) 235 (lambda (key project acc)
236 (cons `(li (span 236 (cons `(li (@ (class "card"))
237 (div
238 (@ (class "card-header"))
239 (a (@ (href ,(project-url project)))
240 (img (@ (class "project-logo")
241 (src ,(project-logo project))
242 (alt ,(string-append "logo for "
243 (project-name project))))))
237 (a (@ (class "project-url") 244 (a (@ (class "project-url")
238 (href ,(project-url project))) 245 (href ,(project-url project)))
239 ,(project-name project)) 246 ,(project-name project)))
247 (div
248 (@ (class "card-body"))
240 ,(let ((members (project-members project))) 249 ,(let ((members (project-members project)))
241 `(details 250 `(details
242 (summary ,(format #false "members (~a)" 251 (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 {
356 356
357article ul.projects { 357article ul.projects {
358 position: relative; 358 position: relative;
359 display: flex;
360 flex-direction: row;
361 flex-wrap: wrap;
359} 362}
363
360article ul.projects details ul.members li { 364article ul.projects details ul.members li {
361 display: inline-block; 365 display: inline-block;
362 list-style-type: none; 366 list-style-type: none;
363} 367}
368
369li.card::before,
364li.person::before { 370li.person::before {
365 content: ''; 371 content: '';
366} 372}
367 373
374li.card {
375 width: 300px;
376 display: block;
377 border: 1px solid #aaa;
378 border-radius: 5px;
379 margin: 1em 1em 0 0;
380 flex-grow: 1;
381 flex-shrink: 1;
382 background: #fefefe;
383}
384
385li.card .card-header {
386 border-bottom: 1px dotted #aaa;
387 display: inline-flex;
388 width: 100%;
389 align-items: center;
390}
391li.card .card-header a {
392 border: none;
393}
394
395li.card .card-header img.project-logo {
396 max-height: 64px;
397 max-width: 64px;
398 margin-right: 0.5em;
399 border-radius: 5px;
400 margin: 10px;
401}
402li.card .card-body {
403 padding: 1em;
404}
405
368details summary { 406details summary {
369 cursor: pointer; 407 cursor: pointer;
370 color: #4D4D4D; 408 color: #4D4D4D;