software: Render projects as cards with logos.

1 files changed, 38 insertions, 0 deletions

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;