Merge pull request 'Align items of service badges' (#63) from benjaoming/website:badges-service-list into new

Reviewed-on: #63

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

@@ -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,55 @@ dl.dl-services {
     }
 }
 
+.badge-definitions,
+.status-definitions,
+{
+    display             : grid;
+    column-gap          : 2rem;
+    .badge-icon {
+        grid-column-start   : 1;
+        grid-column-end     : 2;
+    }
+    .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) {
     :root {
         --base-grid         : 40px;

themes/datacoop2020/layouts/partials/badges.html

@@ -1,25 +1,47 @@
 <h2>{{ i18n "badges_headline" }}</h2>
 
+<section class="badge-definitions">
 {{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }}
 
-  <h3>
-    {{ title .name }}
-    <span class="badge-icon">
+  <div class="badge-icon">
   {{$svg := printf "static/static/img/badges/%s" .icon}}
   {{ $svg  | readFile | safeHTML }}
-    </span>
-  </h3>
+  </div>
+  <div class="badge-name">{{ title .name }}</div>
 
-  {{ markdownify .description }}
+  <div class="badge-description">
+    {{/* 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 }}
+  </div>
 
 {{ end }}
+</section>
+
 
 <h2>{{ i18n "status_headline" }}</h2>
 
+<section class="status-definitions">
 {{ range $.Site.Data.badges.da.status.status }}
 
-  <h3>{{ title .name }}</h3>
 
-  {{ markdownify .description }}
+  <div class="badge-icon badge-status badge-status-{{ .css_class }}"></div>
+  <div class="badge-name">{{ title .name }}</div>
+
+  <div class="badge-description">
+    {{- $markdown := .description | markdownify -}}
+
+    {{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
+        <p>{{ $markdown }}</p>
+    {{ else }}
+        {{ $markdown }}
+    {{ end }}
+  </div>
 
 {{ end }}
+</section>