WIP: Align items of service badges

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

@@ -205,9 +205,13 @@ aside > footer img:hover {
 }
 
 .badge-icon {
-  width: 30px;
+  width: 75px;
   height: auto;
-  svg{fill:#4b3aba;}
+  svg{
+    fill:#4b3aba;
+    width: 100%;
+    height: auto;
+  }
 }
 
 .principles-list {
@@ -232,7 +236,8 @@ aside > footer img:hover {
   }
 }
 
-dl.dl-services {
+dl.dl-services,
+{
     display             : grid;
     column-gap          : 2rem;
     dt {
@@ -246,6 +251,29 @@ dl.dl-services {
     }
 }
 
+dl.badge-definitions,
+dl.status-definitions,
+{
+    display             : grid;
+    column-gap          : 2rem;
+    dt {
+        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 {
+        grid-column-start   : 2;
+        grid-column-end     : 3;
+    }
+}
+
 @media(max-width:1000px) {
     :root {
         --base-grid         : 40px;

themes/datacoop2020/layouts/partials/badges.html

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