add affected systems to incident cards

closes #12

site/layouts/partials/incident.html

@@ -1,15 +1,18 @@
+{{- $severity := .Params.severity  | default "under-maintenance" -}}
+{{- $alert := index .Site.Data.severity.alerts $severity -}}
 <div class="incident card">
   <div class="incident-header">
     <p class="incident-title">{{ .Title }}</p>
-    <p class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" .Date }}</p>
+    <div class="pull-right">
+      <p class="affected-systems">Affected Systems: <span class="incident-status color-{{ $alert }}">{{ delimit .Params.affectedsystems ", " }}</span>
+      </p>
+      <p class=incident-date>{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}</p>
+    </div>
   </div>
   <div class="incident-description">
     {{- .Content -}}
   </div>
-  {{- $severity := .Params.severity  | default "under-maintenance" -}}
-  {{- $alert := index .Site.Data.severity.alerts $severity -}}
-
   <p class="incident-status color-{{ $alert }}">
-    {{ index .Site.Data.severity.descriptions $severity }}
+    {{- index .Site.Data.severity.descriptions $severity -}}
   </p>
 </div>

src/css/main.css

@@ -147,12 +147,20 @@ a:active {
   text-transform: capitalize;
 }
 
-.incident-date {
+.pull-right {
   float: right;
+}
+
+.incident-date {
   font-size: 14px;
   opacity: 0.3;
 }
 
+.affected-systems {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
 @media (max-width: 450px) {
   .incident-date {
     width: 100%;