Grid layout for service badge and status definitions, adds CSS for status badges

data/badges/da/status.yaml

@@ -3,12 +3,15 @@ status:
   positive:
     name: positiv
     description: Tjenesten lever op til kravene til det badget dækker over.
-    color: "#4c4"
+    css_class: "positive"
 
   partial:
     name: Delvis
     description: Tjenesten lever delvist op til det badget dækker over. Dog i en sådan grad at vi mener det er værd at fremhæve.
+    css_class: "partial"
 
   negative:
     name: negativ
     description: Tjenesten lever ikke op til det badget dækker over.
+    css_class: "negative"
+

themes/datacoop2020/assets/static/css/style.scss

@@ -251,27 +251,53 @@ dl.dl-services,
     }
 }
 
-dl.badge-definitions,
+.badge-definitions,
-dl.status-definitions,
+.status-definitions,
 {
     display             : grid;
     column-gap          : 2rem;
-    dt {
+    .badge-icon {
         grid-column-start   : 1;
         grid-column-end     : 2;
-        font-weight         : bold;
-        .badge-icon {
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 10px;
-        }
-        .badge-name {
-        }
     }
-    dd {
+    .badge-name {
         grid-column-start   : 2;
         grid-column-end     : 3;
+        font-weight         : bold;
+        margin-top: 20px;
     }
+    .badge-description {
+        grid-column-start   : 3;
+        grid-column-end     : 4;
+        p {
+          margin-top: 20px;
+        }
+    }
+    
+    .badge-status {
+      margin-bottom: 40px;
+    }
+   
+}
+
+.badge-status {
+  width: 75px;
+  height: 75px;
+  border-radius: 75px;
+}
+.badge-status-positive {
+  @extend .badge-status;
+  border: 5px solid #4c4;
+}
+
+.badge-status-negative {
+  @extend .badge-status;
+  border: 5px solid #c44;
+}
+
+.badge-status-partial {
+  @extend .badge-status;
+  border: 5px solid #cc4;
 }
 
 @media(max-width:1000px) {

themes/datacoop2020/layouts/partials/badges.html

@@ -1,17 +1,15 @@
 <h2>{{ i18n "badges_headline" }}</h2>
 
-<dl class="badge-definitions">
+<section class="badge-definitions">
 {{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }}
 
-  <dt>
+  <div class="badge-icon">
-    <span class="badge-icon">
+  {{$svg := printf "static/static/img/badges/%s" .icon}}
-    {{$svg := printf "static/static/img/badges/%s" .icon}}
+  {{ $svg  | readFile | safeHTML }}
-    {{ $svg  | readFile | safeHTML }}
+  </div>
-    </span>
+  <div class="badge-name">{{ title .name }}</div>
-    <span class="badge-name">{{ title .name }}</span>
-  </dt>
 
-  <dd>
+  <div class="badge-description">
     {{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}}
     {{- $markdown := .description | markdownify -}}
 
@@ -20,22 +18,30 @@
     {{ else }}
         {{ $markdown }}
     {{ end }}
-  <dd>
+  </div>
 
 {{ end }}
-</dl>
+</section>
 
 
 <h2>{{ i18n "status_headline" }}</h2>
 
-<dl class="status-definitions">
+<section class="status-definitions">
 {{ range $.Site.Data.badges.da.status.status }}
 
-  <dt>{{ title .name }}</dt>
 
-  <dd>
+  <div class="badge-icon badge-status badge-status-{{ .css_class }}"></div>
-  {{ markdownify .description }}
+  <div class="badge-name">{{ title .name }}</div>
-  </dd>
+
+  <div class="badge-description">
+    {{- $markdown := .description | markdownify -}}
+
+    {{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
+        <p>{{ $markdown }}</p>
+    {{ else }}
+        {{ $markdown }}
+    {{ end }}
+  </div>
 
 {{ end }}
-</dl>
+</section>