The project cards page is up... Beware fat load times

Author: Alan Yeung

_config_handbook.yml

@@ -52,6 +52,9 @@ collections:
   handbookchapters:
     output: true
 
+  projects:
+    output: true
+
 defaults:
   - scope:
       path: "_themes"
@@ -124,3 +127,10 @@ defaults:
     values:
       layout: handbook_chapter
       permalink: /handbook/:categories/:title.html
+
+  - scope:
+      path: "_projects"
+      type: projects
+    values:
+      layout: project
+

projects.html

@@ -7,14 +7,20 @@
 <section>
     <div class="container">
         <div class="row header-row">
-          <div class="col-lg-12 text-center">
+            <div class="col-lg-12 text-center">
               <h1>Projects</h1>
-              <!--<p class="text-primary">Prizes that everyone across Australia and New Zealand can compete for!</p>-->
-          </div>
+            </div>
         </div>
         <div class="row">
             {% for project in site.projects %}
-                <a href="{{ project.url }}">{{ project.project_title }}</a><br>
+            {% assign image_url = project.image_url | default: 'https://assets.govhack.org/img/logo/govhack-original-transp.png' %}
+            <a href="{{ project.url }}" class="project-card" style="background-image: url('{{ image_url }}')">
+              <article class="project-card-caption">
+                <strong>{{ project.project_title | truncatewords: 10 }}</strong><br>
+                {{ project.team_name | truncatewords: 10 }}<br>
+                {% assign location = site.locations | where: "gid", project.event | first %}{{ location.name }}, {{ location.jurisdiction }}
+              </article>
+            </a>
             {% endfor %}
         </div>
     </div>

resources/css/portal.css

@@ -1158,3 +1158,28 @@ div.bg-primary.card,
 div.bg-primary.card a {
   color: #fff;
 }
+
+
+.project-card {
+    float: right;
+    position: relative;
+    margin: 10px;
+    width: 300px;
+    height: 300px;
+    background: none center center/cover no-repeat scroll transparent;
+    border: 1px solid ghostwhite;
+}
+a.project-card {
+    display: block;
+    text-decoration: none;
+}
+.project-card-caption {
+    position: absolute;
+    height: 40%;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.6);
+    color: white;
+    padding: 20px;
+}